{% load i18n %}

<div class="relative" x-data="{ openTheme: false }">
    <a class="block cursor-pointer h-[18px] leading-none hover:text-base-700 dark:hover:text-base-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 border-base-200 flex flex-col leading-none py-1 -right-2 rounded-default shadow-lg top-7 w-40 z-50 dark:bg-base-800 dark:border-base-700" x-cloak x-show="openTheme" x-transition x-on:click.outside="openTheme = false">
        <a class="cursor-pointer flex flex-row leading-none mx-1 px-3 py-1.5 rounded-default hover:bg-base-100 hover:text-base-700 dark:hover:bg-base-700 dark:hover:text-base-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-default hover:bg-base-100 hover:text-base-700 dark:hover:bg-base-700 dark:hover:text-base-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-default hover:bg-base-100 hover:text-base-700 dark:hover:bg-base-700 dark:hover:text-base-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>
