{% load i18n %}

{% if not theme %}
    <div class="border-b border-base-200 flex flex-row gap-1 mb-1 pb-1 px-2 dark:border-base-700">
        <a class="cursor-pointer flex flex-row grow px-2 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 grow leading-none -ml-1 px-2 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 grow -mr-1 px-2 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>
    </div>
{% endif %}