{% load static add_to_qs %}{% load i18n %}
{# MOBILE HEADER #}
<header class="w-full bg-slate-200 dark:bg-slate-800 md:hidden">

  <input type="checkbox" id="nav-toggle" class="peer hidden">

  <nav class="flex items-center justify-between px-4 py-2">

    <a href="{{ script_prefix }}/" class="font-bold">
      {{ site_title }}
    </a>

    <label for="nav-toggle" class="cursor-pointer">
    <svg class="w-6 h-6" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round">
      <path d="M4 6h16M4 12h16M4 18h16" />
    </svg>
    </label>
  </nav>

  {# PUSH-DOWN MENU #}
  <div class="hidden peer-checked:block px-4 pb-4">
    <div class="flex flex-col gap-3 text-right">

      {% if not app_settings.SINGLE_TEAM %}
      <a href="{% url "team_list" %}">Teams</a>
      {% endif %}

      <a href="{% url "project_list" %}">Projects</a>

      <a href="{% url "global_issue_list_open" %}">Issues</a>

      {% if project %}
      <a href="{% url "issue_list_open" project_pk=project.pk %}{% current_qs %}">
        Issues ({{ project.name }})
      </a>
      {% endif %}

      <a href="{{ script_prefix }}/accounts/preferences/">Preferences</a>

      <form method="post" action="{% url 'logout' %}">
        {% csrf_token %}
        <button type="submit" class="text-right w-full">
          Log out
        </button>
      </form>

    </div>
  </div>
</header>

{# DESKTOP HEADER #}
<header class="hidden md:flex pl-4 bg-slate-200 dark:bg-slate-800 items-center">
    <a href="{{ script_prefix }}/"><img src="{% static 'images/bugsink-logo.png' %}" class="p-2 h-12 w-12 dark:hidden block" alt="Bugsink logo"><img src="{% static 'images/bugsink-logo-dark.png' %}" class="p-2 h-12 w-12 hidden dark:block" alt="Bugsink logo"></a>
    <a href="{{ script_prefix }}/"><div class="px-2 py-2 my-2 font-bold hover:bg-slate-300 dark:hover:bg-slate-700 rounded-xl">{{ site_title }}</div></a>

    {% if not app_settings.SINGLE_TEAM %}
    <a href="{% url "team_list" %}"><div class="px-4 py-2 my-2 hover:bg-slate-300 dark:hover:bg-slate-700 rounded-xl">{% translate "Teams" %}</div></a>
    {% endif %}

    <a href="{% url "project_list" %}"><div class="px-4 py-2 my-2 hover:bg-slate-300 dark:hover:bg-slate-700 rounded-xl">{% translate "Projects" %}</div></a>

    <a href="{% url "global_issue_list_open" %}"><div class="px-4 py-2 my-2 hover:bg-slate-300 dark:hover:bg-slate-700 rounded-xl">{% translate "Issues" %}</div></a>

    {% if project %}
    <a href="{% url "issue_list_open" project_pk=project.pk %}{% current_qs %}"><div class="px-4 py-2 my-2 hover:bg-slate-300 dark:hover:bg-slate-700 rounded-xl">{% translate "Issues" %} ({{ project.name }})</div></a>
    {% endif %}

    <div class="ml-auto flex">
    {% if app_settings.USE_ADMIN and user.is_staff %}
    <a href="{{ script_prefix }}/admin/"><div class="px-4 py-2 my-2 hover:bg-slate-300 dark:hover:bg-slate-700 rounded-xl">{% translate "Admin" %}</div></a>
    {% endif %}

    {% if user.is_superuser %}
    <a href="{{ script_prefix }}/users/"><div class="px-4 py-2 my-2 hover:bg-slate-300 dark:hover:bg-slate-700 rounded-xl">{% translate "Users" %}</div></a>
    {% endif %}

    {% if logged_in_user.is_anonymous %}
        <a href="{{ script_prefix }}/accounts/login/"><div class="px-4 py-2 my-2 hover:bg-slate-300 dark:hover:bg-slate-700 rounded-xl">{% translate "Login" %}</div></a>  {# I don't think this is actually ever shown in practice, because you must always be logged in #}
    {% else %}
        <a href="{{ script_prefix }}/bsmain/auth_tokens/"><div class="px-4 py-2 my-2 hover:bg-slate-300 dark:hover:bg-slate-700 rounded-xl">{% translate "Tokens" %}</div></a>
        <a href="{{ script_prefix }}/api/canonical/0/schema/swagger-ui/"><div class="px-4 py-2 my-2 hover:bg-slate-300 dark:hover:bg-slate-700 rounded-xl">{% translate "OpenAPI" %}</div></a>
        <a href="{{ script_prefix }}/accounts/preferences/"><div class="px-4 py-2 my-2 hover:bg-slate-300 dark:hover:bg-slate-700 rounded-xl">{% translate "Preferences" %}</div></a>
        <div class="px-4 py-2 my-2 mr-2 hover:bg-slate-300 dark:hover:bg-slate-700 rounded-xl"><form id="logout-form" method="post" action="{% url 'logout' %}">{% csrf_token %}<button type="submit">{% translate "Log out" %}</button></form></div>
    {% endif %}
    </div>
</header>