{% load duration %}
{% load static %}
{% load i18n %}
<header class="container-fluid">
  <nav>
    <ul class="nav-logo">
      <a href="{% url 'common:home' %}">
        <img src="{{ site_logo }}" alt="" />
      </a>
    </ul>
    <ul class="nav-search {% if request.GET.q %}unhide{% endif %}">
      <li>
        <form role="search" method="get" action="{% url 'common:search' %}">
          <input type="search"
                 name="q"
                 id="q"
                 placeholder="{% trans 'title, creator, ISBN, item url, @user, @user@instance' %}"
                 class="search"
                 value="{{ request.GET.q|default:'' }}" />
          <select name="c">
            {% visible_categories as cats %}
            <option value="all">{% trans 'All Items' %}</option>
            {% if 'book' in cats %}
              <option {% if request.GET.c == 'book' or '/book/' in request.path %}selected{% endif %}
                      value="book">{% trans 'Book' %}</option>
            {% endif %}
            {% if 'movie' in cats or 'tv' in cats %}
              <option {% if request.GET.c and request.GET.c == 'movietv' or '/movie/' in request.path or '/tv/' in request.path %}selected{% endif %}
                      value="movietv">{% trans 'Movie & TV' %}</option>
            {% endif %}
            {% if 'podcast' in cats %}
              <option {% if request.GET.c and request.GET.c == 'podcast' or '/podcast/' in request.path %}selected{% endif %}
                      value="podcast">{% trans 'Podcast' %}</option>
            {% endif %}
            {% if 'music' in cats %}
              <option {% if request.GET.c and request.GET.c == 'music' or '/album/' in request.path %}selected{% endif %}
                      value="music">{% trans 'Music' %}</option>
            {% endif %}
            {% if 'game' in cats %}
              <option {% if request.GET.c and request.GET.c == 'game' or '/game/' in request.path %}selected{% endif %}
                      value="game">{% trans 'Game' %}</option>
            {% endif %}
            {% if 'performance' in cats %}
              <option {% if request.GET.c == 'performance' or '/performance/' in request.path %}selected{% endif %}
                      value="performance">{% trans 'Performance' %}</option>
            {% endif %}
            <option {% if request.GET.c == 'journal' %}selected{% endif %}
                    value="journal">{% trans 'Journal' %}</option>
            <option {% if request.GET.c == 'timeline' %}selected{% endif %}
                    value="timeline">{% trans 'Posts' %}</option>
          </select>
          <input type="submit" value="&#xf002;" class="fa-solid" />
        </form>
      </li>
    </ul>
    <ul class="nav-links">
      <li class="small-only" style="font-size: 125%; margin-top: 0.2em;">
        <a class="nav-link-search"
           _="on click toggle .unhide on .nav-search then call #q.focus()"
           href="#"><i class="fa-solid fa-magnifying-glass"></i></a>
      </li>
      <li class="small-only">
        <a class="nav-link-discover" href="{% url 'catalog:discover' %}"><i class="fa-solid fa-globe"></i></a>
      </li>
      <li class="small-only">
        <a class="nav-link-feed" href="{% url 'social:feed' %}"><i class="fa-solid fa-users"></i></a>
      </li>
      <li class="small-only">
        <a class="nav-link-home" href="{% url 'common:me' %}"><i class="fa-solid fa-house-user"></i></a>
      </li>
      <li class="large-only">
        <a class="nav-link-discover" href="{% url 'catalog:discover' %}">{% trans 'Explore' %}</a>
      </li>
      <li class="large-only">
        <a class="nav-link-feed" href="{% url 'social:feed' %}">{% trans 'Feed' %}</a>
      </li>
      <li class="large-only">
        <a class="nav-link-home" href="{% url 'common:me' %}">{% trans 'Home' %}</a>
      </li>
    </ul>
    <ul class="nav-dropdown">
      <li>
        <details class="dropdown">
          <summary aria-haspopup="listbox">
            <span class="avatar">
              <img alt=""
                   title="{% if request.user.is_authenticated %}{{ request.user.username }}{% else %}{% endif %}"
                   src="{% if request.user.is_authenticated %}{{ request.user.avatar }}{% else %}{{ user_icon }}{% endif %}" />
            </span>
          </summary>
          <ul role="listbox" style="min-width:-webkit-max-content;" dir="rtl">
            {% if request.user.is_authenticated %}
              <li>
                <a href="{% url 'social:notification' %}">{% trans 'Notification' %}</a>
              </li>
              <li>
                <a href="{% url 'users:data' %}">{% trans 'Data' %}</a>
              </li>
              <li>
                <a href="{% url 'users:preferences' %}">{% trans 'Preferences' %}</a>
              </li>
              <li>
                <a href="{% url 'users:info' %}">{% trans 'Account' %}</a>
              </li>
              <li>
                <a href="{% url 'users:logout' %}">{% trans 'Logout' %}</a>
              </li>
              {% if request.user.is_superuser %}
                <li>
                  <a href="/neodb-admin/">{% trans 'Database' %}</a>
                </li>
                <li>
                  <a href="/admin/">{% trans 'Manage' %}</a>
                </li>
              {% endif %}
            {% else %}
              <li>
                <a href="{% url 'users:login' %}?next={{ request.get_full_path | urlencode }}">{% trans 'Sign up or Login' %}</a>
              </li>
            {% endif %}
          </ul>
        </details>
      </li>
    </ul>
  </nav>
</header>
{% if request.user.is_authenticated %}
  <script>
function _search_cat_change(){
  if (['journal', 'timeline'].includes($('.nav-search select').val())) {
    $('#q').attr('placeholder', "{% trans 'title or content  category:tv  status:complete  rating:8..10  date:2021-09-11..2022-02' %}");
  } else {
    $('#q').attr('placeholder', "{% trans 'title, creator, ISBN, item url, @user, @user@instance' %}");
  }
}
$('.nav-search select').on('change', _search_cat_change);
_search_cat_change();
  </script>
{% endif %}
{% if messages %}
  <ul class="messages" style="text-align:center">
    {% for message in messages %}
      <li {% if message.tags %}class="{{ message.tags }}"{% endif %}>
        {% if message.meta.url %}
          [<a href="{{ message.meta.url }}">{% trans "Open" %}</a>]
        {% endif %}
        {{ message }}
      </li>
    {% endfor %}
  </ul>
{% endif %}