{# styles/infozone/template/addons/navigation.html #}
<nav class="iz-nav" aria-label="Primary">
  <div class="iz-nav__inner">

    <div class="iz-nav__left" role="navigation" aria-label="Primary links">
      <a class="iz-nav__link" href="{{ U_INDEX }}">{{ L_FORUM_INDEX|default(L_HOME) }}</a>

      {% if S_DISPLAY_SEARCH and U_SEARCH %}
        <a class="iz-nav__link" href="{{ U_SEARCH }}">{{ L_SEARCH }}</a>
      {% endif %}

      {% if S_DISPLAY_MEMBERLIST and U_MEMBERLIST %}
        <a class="iz-nav__link" href="{{ U_MEMBERLIST }}">{{ L_MEMBERLIST }}</a>
      {% endif %}

      {% if U_FAQ %}
        <a class="iz-nav__link" href="{{ U_FAQ }}">{{ L_FAQ }}</a>
      {% endif %}
    </div>

    <div class="iz-nav__right" role="navigation" aria-label="Account and tools">
      {% if S_USER_LOGGED_IN %}
        {# Notifications #}
        {% if U_VIEW_ALL_NOTIFICATIONS %}
          <div class="iz-nav__group" data-iz-menu>
            <button class="iz-nav__iconbtn" type="button"
                    data-iz-menu-button
                    aria-expanded="false"
                    aria-haspopup="true"
                    aria-label="{{ L_NOTIFICATIONS }}">
              <span class="iz-ico" aria-hidden="true">
                <svg viewBox="0 0 24 24" width="20" height="20" focusable="false" aria-hidden="true">
                  <path fill="currentColor" d="M12 22a2.5 2.5 0 0 0 2.45-2h-4.9A2.5 2.5 0 0 0 12 22Zm7-6V11a7 7 0 0 0-5-6.71V3a2 2 0 1 0-4 0v1.29A7 7 0 0 0 5 11v5l-2 2v1h20v-1l-2-2Z"/>
                </svg>
              </span>
              {% if UNREAD_NOTIFICATIONS_COUNT %}
                <span class="iz-badge" aria-label="{{ UNREAD_NOTIFICATIONS_COUNT }} {{ L_NOTIFICATIONS }}">{{ UNREAD_NOTIFICATIONS_COUNT }}</span>
              {% endif %}
            </button>

            <div class="iz-nav__menu iz-nav__menu--right" data-iz-menu-panel hidden>
              <a class="iz-nav__menuitem" href="{{ U_VIEW_ALL_NOTIFICATIONS }}">{{ L_SEE_ALL }}</a>
              {% if U_MARK_ALL_NOTIFICATIONS %}
                <a class="iz-nav__menuitem" href="{{ U_MARK_ALL_NOTIFICATIONS }}">{{ L_MARK_ALL_READ }}</a>
              {% endif %}
            </div>
          </div>
        {% endif %}

        {# Private Messages #}
        {% if U_PRIVATEMSGS %}
          <a class="iz-nav__iconbtn iz-nav__iconlink" href="{{ U_PRIVATEMSGS }}" aria-label="{{ L_PRIVATE_MESSAGES }}">
            <span class="iz-ico" aria-hidden="true">
              <svg viewBox="0 0 24 24" width="20" height="20" focusable="false" aria-hidden="true">
                <path fill="currentColor" d="M20 4H4a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2Zm0 4-8 5L4 8V6l8 5 8-5v2Z"/>
              </svg>
            </span>
            {% if PRIVATE_MESSAGE_COUNT %}
              <span class="iz-badge" aria-label="{{ PRIVATE_MESSAGE_COUNT }} {{ L_PRIVATE_MESSAGES }}">{{ PRIVATE_MESSAGE_COUNT }}</span>
            {% endif %}
          </a>
        {% endif %}

        {# Username menu #}
        <div class="iz-nav__group" data-iz-menu>
          <button class="iz-nav__userbtn" type="button"
                  data-iz-menu-button
                  aria-expanded="false"
                  aria-haspopup="true">
            <span class="iz-nav__usertext">
              {% if CURRENT_USERNAME_SIMPLE %}{{ CURRENT_USERNAME_SIMPLE }}{% else %}{{ CURRENT_USERNAME }}{% endif %}
            </span>
          </button>

          <div class="iz-nav__menu iz-nav__menu--account iz-nav__menu--right" data-iz-menu-panel hidden>
            {% if U_PROFILE %}
              <a class="iz-nav__menuitem" href="{{ U_PROFILE }}">{{ L_PROFILE }}</a>
            {% endif %}
            {% if U_UCP %}
              <a class="iz-nav__menuitem" href="{{ U_UCP }}">{{ L_USER_CONTROL_PANEL|default(L_UCP) }}</a>
            {% endif %}
            {% if U_LOGIN_LOGOUT %}
              <a class="iz-nav__menuitem" href="{{ U_LOGIN_LOGOUT }}">{{ L_LOGIN_LOGOUT }}</a>
            {% endif %}
          </div>
        </div>

      {% else %}
        {# Logged out #}
        {% if (not S_IS_BOT) and S_REGISTER_ENABLED and U_REGISTER %}
          <a class="iz-btn iz-btn--secondary iz-nav__authbtn" href="{{ U_REGISTER }}">{{ L_REGISTER }}</a>
        {% endif %}
        {% if U_LOGIN_LOGOUT %}
          <a class="iz-btn iz-btn--primary iz-nav__authbtn" href="{{ U_LOGIN_LOGOUT }}">{{ L_LOGIN }}</a>
        {% endif %}
      {% endif %}
    </div>

  </div>
</nav>