{% load i18n %}
<div class="navbar bg-base-100">
    <div class="navbar-start">
        <div id="menu-toggle" tabindex="0" role="button" class="btn btn-ghost btn-circle">
            <svg
                    xmlns="http://www.w3.org/2000/svg"
                    class="h-5 w-5"
                    fill="none"
                    viewBox="0 0 24 24"
                    stroke="currentColor">
                <path
                        stroke-linecap="round"
                        stroke-linejoin="round"
                        stroke-width="2"
                        d="M4 6h16M4 12h16M4 18h7"/>
            </svg>
        </div>
    </div>
    <div class="navbar-center max-sm:hidden">
        <a class="btn btn-ghost  text-xl" href="{% url 'admin:index' %}">
            {{ site_header|default:'Django site admin' }}
        </a>
    </div>
    <div class="navbar-end">
        <div class="dropdown dropdown-bottom dropdown-end">
            <div tabindex="0" role="button" class="btn btn-ghost btn-sm m-1">
                {% trans "Theme" %}
                <svg
                        width="12px"
                        height="12px"
                        class="inline-block h-2 w-2 fill-current opacity-60"
                        xmlns="http://www.w3.org/2000/svg"
                        viewBox="0 0 2048 2048">
                    <path d="M1799 349l242 241-1017 1017L7 590l242-241 775 775 775-775z"></path>
                </svg>
            </div>
            <ul tabindex="0" class="dropdown-content  bg-base-300 rounded-md z-20 w-48 p-2 shadow-2xl">
                <li>
                    <input
                            data-set-theme="light" data-act-class="ACTIVECLASS"
                            type="radio"
                            name="theme-dropdown"
                            class="theme-controller btn btn-sm btn-block btn-ghost justify-start"
                            aria-label="{% trans "Light" %}"
                            value="light"/>
                </li>
                <li>
                    <input
                            type="radio"
                            name="theme-dropdown"
                            class="theme-controller btn btn-sm btn-block btn-ghost justify-start"
                            aria-label="{% trans "Dark" %}"
                            value="dark"
                            data-act-class="ACTIVECLASS"
                            data-set-theme="dark"
                    />
                </li>
                <li>
                    <input
                            type="radio"
                            name="theme-dropdown"
                            class="theme-controller btn btn-sm btn-block btn-ghost justify-start"
                            aria-label="{% trans "Dracula" %}"
                            value="dracula"
                            data-act-class="ACTIVECLASS"
                            data-set-theme="dracula"
                    />
                </li>
                <li>
                    <input
                            type="radio"
                            name="theme-dropdown"
                            class="theme-controller btn btn-sm btn-block btn-ghost justify-start"
                            aria-label="{% trans "Dim" %}"
                            value="dim"
                            data-act-class="ACTIVECLASS"
                            data-set-theme="dim"
                    />
                </li>
                <li>
                    <input
                            type="radio"
                            name="theme-dropdown"
                            class="theme-controller btn btn-sm btn-block btn-ghost justify-start"
                            aria-label="{% trans "Lemonade" %}"
                            value="lemonade"
                            data-act-class="ACTIVECLASS"
                            data-set-theme="lemonade"
                    />
                </li>
                <li>
                    <input
                            type="radio"
                            name="theme-dropdown"
                            class="theme-controller btn btn-sm btn-block btn-ghost justify-start"
                            aria-label="{% trans "Autumn" %}"
                            value="autumn"
                            data-act-class="ACTIVECLASS"
                            data-set-theme="autumn"
                    />
                </li>
            </ul>
        </div>
        <div class="dropdown dropdown-bottom dropdown-end">
            <div tabindex="0" role="button" class="btn btn-ghost btn-circle m-1">
                <i class="fa-regular fa-user text-lg"></i>
            </div>
            <ul tabindex="0" class="dropdown-content rounded-md  bg-base-300 z-20 w-48 p-2 shadow-2xl">
                <li>
                    <a class="btn btn-sm btn-block btn-ghost justify-start"
                       href="{% url 'admin:password_change' %}">{% trans 'Change password' %}</a>
                </li>
                <li>
                    <a class="btn btn-sm btn-block btn-ghost justify-start" onclick="$('#logout-form').submit()"
                       href="#">{% translate 'Log out' %}</a>
                </li>

                {% if site_url %}
                    <a class="btn btn-sm btn-block btn-ghost justify-start"
                       href="{{ site_url }}">{% translate 'View site' %}</a>
                {% endif %}

                {% if user.is_active and user.is_staff %}
                    {% url 'django-admindocs-docroot' as docsroot %}
                    {% if docsroot %}
                        <a class="btn btn-sm btn-block btn-ghost justify-start"
                           href="{{ docsroot }}">{% translate 'Documentation' %}</a>
                    {% endif %}
                {% endif %}
            </ul>
        </div>
    </div>
</div>