{% extends "htmx_base.html" %}
{% load static %}
{% block header %}
  <header class="bg-neutral text-neutral-content">
    <nav class="navbar">
      <div class="navbar-start">
        {% block logo %}
          <a class="link" href="{% url logo.url|default:'htmx:incident-list' %}">
            <img class="object-scale-down h-14"
                 src="{% static logo.file|default:'logo_white.svg' %}"
                 alt="{{ logo.alt|default:'go to homepage' }}">
          </a>
        {% endblock logo %}
      </div>
      <div class="navbar-center flex">
        <ul class="menu menu-horizontal px-1">
          {% block navlinks %}
            <li>
              <a href="{% url 'htmx:incident-list' %}">Incidents</a>
            </li>
            <li>
              <a href="{% url 'htmx:timeslot-placeholder' %}">Timeslots</a>
            </li>
            <li>
              <a href="{% url 'htmx:notificationprofile-placeholder' %}">Profiles</a>
            </li>
          {% endblock navlinks %}
        </ul>
      </div>
      <div class="navbar-end">
        {% block userlink %}
          {% if request.user.is_authenticated %}
            <details class="dropdown dropdown-end">
              <summary class="btn btn-base-200 btn-circle avatar placeholder"
                       aria-description="User menu">
                <span aria-hidden="true"
                      class="size-10 rounded-full ring-base-200 ring-offset-primary ring ring-offset-2 text-2xl capitalize leading-9">
                  {{ request.user|make_list|first }}
                </span>
              </summary>
              <ul class="menu menu-md dropdown-content bg-base-200 text-base-content rounded-box z-[1] mt-3 w-52 p-2 shadow max-h-svh">
                <li class="menu-title">
                  Logged in as: <span class="text-info">{{ request.user }}</span>
                  <div class="divider divider-secondary my-0"></div>
                </li>
                <li>{% include "htmx/themes/_theme_dropdown.html" %}</li>
                <li>{% include "htmx/dateformat/_dateformat_dropdown.html" %}</li>
                <li>
                  <a href="{% url 'htmx:user-preferences' %}">Preferences…</a>
                </li>
                <li>
                  <form class="flex" action="{% url "htmx:logout" %}" method="post">
                    {% csrf_token %}
                    <button class="flex-1 text-start" type="submit">Log out</button>
                  </form>
                </li>
              </ul>
            </details>
          {% else %}
            <a class="btn" href="{% url 'htmx:login' %}">Log in</a>
          {% endif %}
        {% endblock userlink %}
      </div>
    </nav>
  </header>
{% endblock header %}
