{% macro nav(selected="", show_lhs=true) -%}
<nav>
    <div class="content_container">
        <div class="flex nav_side">
            <a href="/" class="button desktop title">
                <b>{{ config.name }}</b>
            </a>

            {% if show_lhs %}
            <a
                href="/"
                class="button {% if selected == 'home' %}active{% endif %}"
            >
                {{ icon "house" }}
                <span class="desktop">{{ text "general:link.home" }}</span>
            </a>

            <a
                href="/popular"
                class="button {% if selected == 'popular' %}active{% endif %}"
            >
                {{ icon "trending-up" }}
                <span class="desktop">{{ text "general:link.popular" }}</span>
            </a>

            {% if user %}
            <a
                href="/communities"
                class="button {% if selected == 'communities' %}active{% endif %}"
            >
                {{ icon "book-heart" }}
                <span class="desktop"
                    >{{ text "general:link.communities" }}</span
                >
            </a>
            {% endif %} {% endif %}
        </div>

        <div class="flex nav_side">
            {% if user %}
            <a
                href="javascript:document.getElementById('town_square_post_dialog').showModal()"
                class="button"
                title="Create post"
            >
                {{ icon "square-pen" }}
            </a>

            <a
                href="/notifs"
                class="button {% if selected == 'notifications' %}active{% endif %}"
                title="Notifications"
            >
                {% if user.notification_count > 0 %} {{ icon "bell-dot" }}
                <span class="notification tr"
                    >{{ user.notification_count }}</span
                >
                {% else %} {{ icon "bell" }} {% endif %}
            </a>

            <div class="dropdown">
                <!-- prettier-ignore -->
                <button
                    class="flex-row title"
                    onclick="trigger('atto::hooks::dropdown', [event])"
                    exclude="dropdown"
                    style="gap: 0.25rem !important"
                >
                    {{ components::avatar(username=user.username, size="24px") }}
                    {{ icon "chevron-down" c(dropdown-arrow) }}
                </button>

                <div class="inner">
                    <b class="title">{{ user.username }}</b>
                    <a href="/@{{ user.username }}">
                        {{ icon "circle-user-round" }}
                        <span>{{ text "auth:link.my_profile" }}</span>
                    </a>

                    <a href="/settings">
                        {{ icon "settings" }}
                        <span>{{ text "auth:link.settings" }}</span>
                    </a>

                    {% if is_helper %}
                    <b class="title">{{ text "general:label.mod" }}</b>

                    <a href="/mod_panel/audit_log">
                        {{ icon "scroll-text" }}
                        <span>{{ text "general:link.audit_log" }}</span>
                    </a>

                    <a href="/mod_panel/reports">
                        {{ icon "flag" }}
                        <span>{{ text "general:link.reports" }}</span>
                    </a>

                    <a href="/mod_panel/ip_bans">
                        {{ icon "ban" }}
                        <span>{{ text "general:link.ip_bans" }}</span>
                    </a>
                    {% endif %}

                    <b class="title">{{ config.name }}</b>

                    <a href="https://github.com/trisuaso/tetratto">
                        {{ icon "code" }}
                        <span>{{ text "general:link.source_code" }}</span>
                    </a>

                    <a href="https://trisuaso.github.io/tetratto">
                        {{ icon "book" }}
                        <span>{{ text "general:link.reference" }}</span>
                    </a>

                    <div class="title"></div>
                    <button onclick="trigger('me::switch_account')">
                        {{ icon "ellipsis" }}
                        <span>{{ text "general:action.switch_account" }}</span>
                    </button>

                    <button class="red" onclick="trigger('me::logout')">
                        {{ icon "log-out" }}
                        <span>{{ text "auth:action.logout" }}</span>
                    </button>
                </div>
            </div>
            {% else %}
            <div class="dropdown">
                <button
                    class="title"
                    onclick="trigger('atto::hooks::dropdown', [event])"
                    exclude="dropdown"
                >
                    {{ icon "chevron-down" c(dropdown-arrow) }}
                </button>

                <div class="inner">
                    <a href="/auth/login" class="button">
                        {{ icon "log-in" }}
                        <span>{{ text "auth:action.login" }}</span>
                    </a>
                    <a href="/auth/register" class="button">
                        {{ icon "user-plus" }}
                        <span>{{ text "auth:action.register" }}</span>
                    </a>

                    <div class="title"></div>
                    <a href="https://github.com/trisuaso/tetratto">
                        {{ icon "code" }}
                        <span>View source</span>
                    </a>
                </div>
            </div>
            {% endif %}
        </div>
    </div>
</nav>
{%- endmacro %} {% macro timelines_nav(selected="") -%}
<div class="pillmenu w-full">
    <a href="/" class="{% if selected == 'home' %}active{% endif %}">
        {{ icon "newspaper" }}
        <span>{{ text "general:link.home" }}</span>
    </a>

    <a
        href="/following"
        class="{% if selected == 'following' %}active{% endif %}"
    >
        {{ icon "earth" }}
        <span>{{ text "general:link.following" }}</span>
    </a>

    <a href="/popular" class="{% if selected == 'popular' %}active{% endif %}">
        {{ icon "trending-up" }}
        <span>{{ text "general:link.popular" }}</span>
    </a>
</div>
{%- endmacro %}