{% 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">
    {% if SHOW_THEME_SELECTOR %}
        <div title="Change Theme" class="dropdown dropdown-end block ">
            <div tabindex="0" role="button" class="btn group btn-sm gap-1.5 px-1.5 btn-ghost" aria-label="Change Theme">
                <div class="bg-base-100 group-hover:border-base-content/20 border-base-content/10 grid shrink-0 grid-cols-2 gap-0.5 rounded-md border p-1 transition-colors">
                    <div class="bg-base-content size-1.5 rounded-full"></div>
                    <div class="bg-primary size-1.5 rounded-full"></div>
                    <div class="bg-secondary size-1.5 rounded-full"></div>
                    <div class="bg-accent size-1.5 rounded-full"></div>
                </div>
                <svg width="12px" height="12px" class="mt-px hidden size-2 fill-current opacity-60 sm:inline-block"
                     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>
            <div tabindex="0"
                 class="dropdown-content bg-base-200 text-base-content rounded-box top-px max-h-[calc(100vh-8.6rem)] overflow-y-auto border-[length:var(--border)] border-white/5 shadow-2xl outline-[length:var(--border)] outline-black/5 mt-10">
                <ul class="menu w-56">
                    <li class="menu-title text-xs">{% trans "Theme" %}</li> <!--[-->
                    {% for theme in THEME_LIST %}
                    <li>
                        <button class="gap-3 px-2" data-set-theme="{{ theme.value }}" data-act-class="[&amp;_svg]:visible">
                            <div data-theme="{{ theme.value }}"
                                 class="bg-base-100 grid shrink-0 grid-cols-2 gap-0.5 rounded-md p-1 shadow-sm">
                                <div class="bg-base-content size-1 rounded-full"></div>
                                <div class="bg-primary size-1 rounded-full"></div>
                                <div class="bg-secondary size-1 rounded-full"></div>
                                <div class="bg-accent size-1 rounded-full"></div>
                            </div>
                            <div class="w-32 truncate">{{ theme.name }}</div>
                            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24"
                                 fill="currentColor" class="invisible h-3 w-3 shrink-0">
                                <path d="M20.285 2l-11.285 11.567-5.286-5.011-3.714 3.716 9 8.728 15-15.285z"></path>
                            </svg>
                        </button>
                    </li>
                    {% endfor %}
                </ul>
            </div>
        </div>
        {% endif %}
        <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>
        {% if change_language_url %}
            <div title="Change Language" class="dropdown dropdown-end">
                <div tabindex="0" role="button" class="btn btn-ghost" aria-label="Language">
                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" class="h-4 w-4">
                        <path fill-rule="evenodd"
                              d="M11 5a.75.75 0 0 1 .688.452l3.25 7.5a.75.75 0 1 1-1.376.596L12.89 12H9.109l-.67 1.548a.75.75 0 1 1-1.377-.596l3.25-7.5A.75.75 0 0 1 11 5Zm-1.24 5.5h2.48L11 7.636 9.76 10.5ZM5 1a.75.75 0 0 1 .75.75v1.261a25.27 25.27 0 0 1 2.598.211.75.75 0 1 1-.2 1.487c-.22-.03-.44-.056-.662-.08A12.939 12.939 0 0 1 5.92 8.058c.237.304.488.595.752.873a.75.75 0 0 1-1.086 1.035A13.075 13.075 0 0 1 5 9.307a13.068 13.068 0 0 1-2.841 2.546.75.75 0 0 1-.827-1.252A11.566 11.566 0 0 0 4.08 8.057a12.991 12.991 0 0 1-.554-.938.75.75 0 1 1 1.323-.707c.049.09.099.181.15.271.388-.68.708-1.405.952-2.164a23.941 23.941 0 0 0-4.1.19.75.75 0 0 1-.2-1.487c.853-.114 1.72-.185 2.598-.211V1.75A.75.75 0 0 1 5 1Z"
                              clip-rule="evenodd"></path>
                    </svg>
                    <svg width="12px" height="12px" class="hidden h-2 w-2 fill-current opacity-60 sm:inline-block"
                         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>

                <div id="switch-language" tabindex="0"
                     class="dropdown-content z-20 bg-base-200 text-base-content rounded-box top-px mt-16 max-h-[calc(100vh-10rem)] w-56 overflow-y-auto border border-white/5 shadow-2xl outline outline-1 outline-black/5">
                    <ul class="menu menu-sm gap-1"><!---->
                        {% get_current_language as LANGUAGE_CODE %}
                        {% get_available_languages as LANGUAGES %}
                        {% get_language_info_list for LANGUAGES as languages %}
                        {% for lang in languages %}
                            <li>
                                <button onclick="switchLanguage(this)">
                                <span class="badge lang-id capitalize badge-sm badge-outline
                                !pl-1.5 !pr-1 pt-px font-mono !text-[.6rem] font-bold tracking-widest opacity-50">{{ lang.code }}</span>
                                    <span class="font-[sans-serif]">{{ lang.name_local }}</span></button>
                            </li>
                        {% endfor %}
                    </ul>
                </div>

            </div>
        {% endif %}
    </div>
</div>