{% load i18n static %}

<div class="flex items-center ml-auto">
    <div class="flex flex-row group items-center leading-none relative" x-data="{ openUserLinks: false, openTheme: false }">
        <div class="flex flex-row text-gray-500">
            <div class="mr-4 relative">
                <a class="block cursor-pointer hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200" x-on:click="openTheme = !openTheme">
                    <span class="material-symbols-outlined">
                        <span x-text="adminTheme == 'dark' && 'dark_mode' || adminTheme == 'light' && 'light_mode' || 'computer'"></span>
                    </span>
                </a>

                <nav class="absolute bg-white border flex flex-col leading-none overflow-hidden py-1 -right-2 rounded shadow-lg text-sm text-gray-500 top-7 w-40 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400" x-cloak x-show="openTheme" @click.outside="openTheme = false">
                    <a class="cursor-pointer flex flex-row leading-none mx-1 px-3 py-1.5 rounded hover:bg-gray-100 hover:text-gray-700 dark:hover:bg-gray-700 dark:hover:text-gray-200"
                       x-on:click="adminTheme = 'dark'"
                       x-bind:class="adminTheme == 'dark' && 'text-primary-600 dark:text-primary-500 dark:hover:!text-primary-500 hover:!text-primary-600'">
                        <span class="material-symbols-outlined mr-2">dark_mode</span>
                        <span class="leading-none self-center">{% trans "Dark" %}</span>
                    </a>

                    <a class="cursor-pointer flex flex-row mx-1 px-3 py-1.5 rounded hover:bg-gray-100 hover:text-gray-700 dark:hover:bg-gray-700 dark:hover:text-gray-200"
                       x-on:click="adminTheme = 'light'"
                       x-bind:class="adminTheme == 'light'  && 'text-primary-600 dark:text-primary-500 dark:hover:!text-primary-500 hover:!text-primary-600'">
                        <span class="material-symbols-outlined mr-2">light_mode</span>
                        <span class="leading-none self-center">{% trans "Light" %}</span>
                    </a>

                    <a class="cursor-pointer flex flex-row mx-1 px-3 py-1.5 rounded hover:bg-gray-100 hover:text-gray-700 dark:hover:bg-gray-700 dark:hover:text-gray-200"
                       x-on:click="adminTheme = 'auto'"
                       x-bind:class="adminTheme == 'auto' && 'text-primary-600 dark:text-primary-500 dark:hover:!text-primary-500 hover:!text-primary-600'">
                        <span class="material-symbols-outlined mr-2">computer</span>
                        <span class="leading-none self-center">{% trans "System" %}</span>
                    </a>
                </nav>
            </div>

            <div class="relative">
                <a class="block cursor-pointer hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200" @click="openUserLinks = !openUserLinks">
                    <span class="material-symbols-outlined">person</span>
                </a>

                <nav class="absolute bg-white border flex flex-col leading-none overflow-hidden py-1 -right-2 rounded shadow-lg text-sm text-gray-500 top-7 w-52 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400" x-cloak x-show="openUserLinks" @click.outside="openUserLinks = false">
                    <div class="border-b border-gray-100 flex flex-row flex-shrink-0 items-start justify-start mb-1 pb-1 dark:border-gray-700">
                        <span class="block mx-1 px-3 py-2 truncate">
                            {% firstof user.get_short_name user.get_username %}
                        </span>
                    </div>

                    {% if nav_global %}
                        {{ nav_global }}
                    {% endif %}

                    {% if site_url %}
                        <a href="{{ site_url }}" class="mx-1 px-3 py-2 rounded hover:bg-gray-100 hover:text-gray-700 dark:hover:bg-gray-700 dark:hover:text-gray-200">
                            {% translate 'View site' %}
                        </a>
                    {% endif %}

                    {% if user.has_usable_password %}
                        <a href="{% url 'admin:password_change' %}" class="mx-1 px-3 py-2 rounded hover:bg-gray-100 hover:text-gray-700 dark:hover:bg-gray-700 dark:hover:text-gray-200">
                            {% translate 'Change password' %}
                        </a>
                    {% endif %}

                    <div class="border-t mt-1 pt-1 dark:border-gray-700">
                        <a href="{% url 'admin:logout' %}" class="bg-none block mx-1 px-3 py-2 text-red-500 rounded hover:bg-red-100 dark:hover:bg-red-500/20 dark:hover:text-red-500">
                            {% translate 'Log out' %}
                        </a>
                    </div>
                </nav>
            </div>
        </div>
    </div>

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