{% load i18n static milea_tags %}
<header class="navbar navbar-expand-md navbar-light d-print-none">
    <div class="container-xl">
        <button class="navbar-toggler"
                type="button"
                data-bs-toggle="collapse"
                data-bs-target="#navbar-menu"
                aria-controls="navbar-menu"
                aria-expanded="false"
                aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
        <h1 class="navbar-brand navbar-brand-autodark d-none-navbar-horizontal pe-0 pe-md-3">
            <a href="{{ site_url }}">
                <img src="{% custom_static 'img/logo.png' %}"
                     width="110"
                     height="32"
                     alt="Logo"
                     class="navbar-brand-image"/>
            </a>
        </h1>
        <div class="navbar-nav flex-row order-md-last">
            <div class="d-none d-md-flex me-3">
                <!-- Buttons -->
                <a onclick="toggleTheme()"
                   href="javascript:void(0);"
                   class="nav-link px-0 toggleTheme hide-theme-dark"
                   data-bs-toggle="tooltip"
                   data-bs-placement="bottom"
                   aria-label="Enable dark mode"
                   data-bs-original-title="Enable dark mode">
                    <svg xmlns="http://www.w3.org/2000/svg"
                         class="icon"
                         width="24"
                         height="24"
                         viewBox="0 0 24 24"
                         stroke-width="2"
                         stroke="currentColor"
                         fill="none"
                         stroke-linecap="round"
                         stroke-linejoin="round">
                        <path stroke="none" d="M0 0h24v24H0z" fill="none" />
                        <path d="M12 3c.132 0 .263 0 .393 0a7.5 7.5 0 0 0 7.92 12.446a9 9 0 1 1 -8.313 -12.454z" />
                    </svg>
                </a>
                <a onclick="toggleTheme()"
                   href="javascript:void(0);"
                   class="nav-link px-0 toggleTheme hide-theme-light"
                   data-bs-toggle="tooltip"
                   data-bs-placement="bottom"
                   aria-label="Enable light mode"
                   data-bs-original-title="Enable light mode">
                    <svg xmlns="http://www.w3.org/2000/svg"
                         class="icon"
                         width="24"
                         height="24"
                         viewBox="0 0 24 24"
                         stroke-width="2"
                         stroke="currentColor"
                         fill="none"
                         stroke-linecap="round"
                         stroke-linejoin="round">
                        <path stroke="none" d="M0 0h24v24H0z" fill="none" />
                        <circle cx="12" cy="12" r="4"></circle>
                        <path d="M3 12h1m8 -9v1m8 8h1m-9 8v1m-6.4 -15.4l.7 .7m12.1 -.7l-.7 .7m0 11.4l.7 .7m-12.1 -.7l-.7 .7" />
                    </svg>
                </a>
            </div>
            {% if has_permission %}
                <!-- User Menu -->
                <div class="nav-item dropdown">
                    <a href="#"
                       class="nav-link d-flex lh-1 text-reset p-0"
                       data-bs-toggle="dropdown"
                       aria-label="Open user menu">
                        <span class="avatar avatar-sm"
                              style="background-image: url({% static 'milea/img/user-icon.png' %})"></span>
                        <div class="d-none d-xl-block ps-2">
                            <div>{% translate "Welcome" %}</div>
                            <div class="mt-1 small text-muted">{% firstof user.get_short_name user.get_username %}</div>
                        </div>
                    </a>
                    <div class="dropdown-menu dropdown-menu-end dropdown-menu-arrow">
                        {% if user.is_active and user.is_staff %}
                            {% url 'django-admindocs-docroot' as docsroot %}
                            {% if docsroot %}
                                <a href="{{ docsroot }}" class="dropdown-item">{% translate "Documentation" %}</a>
                            {% endif %}
                        {% endif %}
                        {% if user.has_usable_password %}
                            <a href="{% url 'admin:password_change' %}" class="dropdown-item">{% translate "Change password" %}</a>
                        {% endif %}
                        <div class="dropdown-divider my-1"></div>
                        <form id="logout-form" method="post" action="{% url 'admin:logout' %}">
                            {% csrf_token %}
                            <button class="dropdown-item" type="submit">{% translate "Log out" %}</button>
                        </form>
                    </div>
                </div>
            {% endif %}
        </div>
        {% block nav-global %}
        {% endblock nav-global %}
    </div>
</header>
