{% extends "htmx_base.html" %}

{% block head %}
    <script src="https://unpkg.com/htmx.org@1.9.12"
            integrity="sha384-ujb1lZYygJmzgSwoxRggbCHcjc0rB2XoQrxeTUQyRjrOnlCoYta87iKBWq3EsdM2"
            crossorigin="anonymous"></script>
    <!-- HTMX Config -->
    <meta name="htmx-config" content='{"useTemplateFragments":"true"}'>
{% endblock head %}

{% block header %}
    <header class="bg-neutral text-neutral-content">
        <nav class="navbar">
            <div class="navbar-start">
                <a class="btn btn-ghost text-xl" href="{% url 'htmx:incident-list' %}">Argus Logo</a>
            </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>
                            <summary>{{ request.user }}</summary>
                            <ul class="p-2">
                                <li>Theme: <a class="link" href="{% url 'htmx:theme-list' %}">{{ theme }}</a></li>
                                <li>
                                    <form action="{% url "htmx:logout" %}" method="POST">
                                        {% csrf_token %}
                                        <button class="btn btn-ghost">Log out</button>
                                    </form>
                                </li>
                            </ul>

                        </details>
                    {% else %}
                        <a class="btn" href="{% url 'htmx:login' %}">Log in</a>
                    {% endif %}
                {% endblock %}
            </div>
        </nav>
    </header>
{% endblock header %}
