{% load i18n %}

<li
  class="tooltip tooltip-left rtl:tooltip-right"
  data-tip="{% trans 'Theme' %}"
>
  <button
    popovertarget="theme"
    style="anchor-name: --theme"
    class="btn btn-sm lg:btn-md 2xl:btn-lg btn-square btn-ghost"
  >
    <i data-lucide="swatch-book" class="size-4 lg:size-6"></i>
    <span class="sr-only">{% trans 'Theme' %}</span>
  </button>

  <ul
    popover
    id="theme"
    style="position-anchor: --theme; max-height: 20rem"
    class="menu menu-sm dropdown dropdown-left bg-base-100/50 rounded-box shadow-lg backdrop-blur-3xl rtl:dropdown-right lg:menu-md 2xl:menu-lg"
  >
    <li class="menu-title">{% trans 'Select a theme' %}</li>
    <li>
      <input
        type="radio"
        name="theme-dropdown"
        class="theme-controller btn btn-sm btn-block btn-ghost justify-start lg:btn-md 2xl:btn-lg"
        aria-label="Default"
        value="default"
      />
    </li>
    <li>
      <input
        type="radio"
        name="theme-dropdown"
        class="theme-controller btn btn-sm btn-block btn-ghost justify-start lg:btn-md 2xl:btn-lg"
        aria-label="Light"
        value="light"
      />
    </li>
    <li>
      <input
        type="radio"
        name="theme-dropdown"
        class="theme-controller btn btn-sm btn-block btn-ghost justify-start lg:btn-md 2xl:btn-lg"
        aria-label="Dark"
        value="dark"
      />
    </li>
    <li>
      <input
        type="radio"
        name="theme-dropdown"
        class="theme-controller btn btn-sm btn-block btn-ghost justify-start lg:btn-md 2xl:btn-lg"
        aria-label="Cupcake"
        value="cupcake"
      />
    </li>
    <li>
      <input
        type="radio"
        name="theme-dropdown"
        class="theme-controller btn btn-sm btn-block btn-ghost justify-start lg:btn-md 2xl:btn-lg"
        aria-label="Bumblebee"
        value="bumblebee"
      />
    </li>
    <li>
      <input
        type="radio"
        name="theme-dropdown"
        class="theme-controller btn btn-sm btn-block btn-ghost justify-start lg:btn-md 2xl:btn-lg"
        aria-label="Emerald"
        value="emerald"
      />
    </li>
    <li>
      <input
        type="radio"
        name="theme-dropdown"
        class="theme-controller btn btn-sm btn-block btn-ghost justify-start lg:btn-md 2xl:btn-lg"
        aria-label="Corporate"
        value="corporate"
      />
    </li>
    <li>
      <input
        type="radio"
        name="theme-dropdown"
        class="theme-controller btn btn-sm btn-block btn-ghost justify-start lg:btn-md 2xl:btn-lg"
        aria-label="Synthwave"
        value="synthwave"
      />
    </li>
    <li>
      <input
        type="radio"
        name="theme-dropdown"
        class="theme-controller btn btn-sm btn-block btn-ghost justify-start lg:btn-md 2xl:btn-lg"
        aria-label="Retro"
        value="retro"
      />
    </li>
    <li>
      <input
        type="radio"
        name="theme-dropdown"
        class="theme-controller btn btn-sm btn-block btn-ghost justify-start lg:btn-md 2xl:btn-lg"
        aria-label="Cyberpunk"
        value="cyberpunk"
      />
    </li>
    <li>
      <input
        type="radio"
        name="theme-dropdown"
        class="theme-controller btn btn-sm btn-block btn-ghost justify-start lg:btn-md 2xl:btn-lg"
        aria-label="Valentine"
        value="valentine"
      />
    </li>
    <li>
      <input
        type="radio"
        name="theme-dropdown"
        class="theme-controller btn btn-sm btn-block btn-ghost justify-start lg:btn-md 2xl:btn-lg"
        aria-label="Halloween"
        value="halloween"
      />
    </li>
    <li>
      <input
        type="radio"
        name="theme-dropdown"
        class="theme-controller btn btn-sm btn-block btn-ghost justify-start lg:btn-md 2xl:btn-lg"
        aria-label="Garden"
        value="garden"
      />
    </li>
    <li>
      <input
        type="radio"
        name="theme-dropdown"
        class="theme-controller btn btn-sm btn-block btn-ghost justify-start lg:btn-md 2xl:btn-lg"
        aria-label="Forest"
        value="forest"
      />
    </li>
    <li>
      <input
        type="radio"
        name="theme-dropdown"
        class="theme-controller btn btn-sm btn-block btn-ghost justify-start lg:btn-md 2xl:btn-lg"
        aria-label="Aqua"
        value="aqua"
      />
    </li>
    <li>
      <input
        type="radio"
        name="theme-dropdown"
        class="theme-controller btn btn-sm btn-block btn-ghost justify-start lg:btn-md 2xl:btn-lg"
        aria-label="Lofi"
        value="lofi"
      />
    </li>
    <li>
      <input
        type="radio"
        name="theme-dropdown"
        class="theme-controller btn btn-sm btn-block btn-ghost justify-start lg:btn-md 2xl:btn-lg"
        aria-label="Pastel"
        value="pastel"
      />
    </li>
    <li>
      <input
        type="radio"
        name="theme-dropdown"
        class="theme-controller btn btn-sm btn-block btn-ghost justify-start lg:btn-md 2xl:btn-lg"
        aria-label="Fantasy"
        value="fantasy"
      />
    </li>
    <li>
      <input
        type="radio"
        name="theme-dropdown"
        class="theme-controller btn btn-sm btn-block btn-ghost justify-start lg:btn-md 2xl:btn-lg"
        aria-label="Wireframe"
        value="wireframe"
      />
    </li>
    <li>
      <input
        type="radio"
        name="theme-dropdown"
        class="theme-controller btn btn-sm btn-block btn-ghost justify-start lg:btn-md 2xl:btn-lg"
        aria-label="Black"
        value="black"
      />
    </li>
    <li>
      <input
        type="radio"
        name="theme-dropdown"
        class="theme-controller btn btn-sm btn-block btn-ghost justify-start lg:btn-md 2xl:btn-lg"
        aria-label="Luxury"
        value="luxury"
      />
    </li>
    <li>
      <input
        type="radio"
        name="theme-dropdown"
        class="theme-controller btn btn-sm btn-block btn-ghost justify-start lg:btn-md 2xl:btn-lg"
        aria-label="Dracula"
        value="dracula"
      />
    </li>
    <li>
      <input
        type="radio"
        name="theme-dropdown"
        class="theme-controller btn btn-sm btn-block btn-ghost justify-start lg:btn-md 2xl:btn-lg"
        aria-label="Cmyk"
        value="cmyk"
      />
    </li>
    <li>
      <input
        type="radio"
        name="theme-dropdown"
        class="theme-controller btn btn-sm btn-block btn-ghost justify-start lg:btn-md 2xl:btn-lg"
        aria-label="Autumn"
        value="autumn"
      />
    </li>
    <li>
      <input
        type="radio"
        name="theme-dropdown"
        class="theme-controller btn btn-sm btn-block btn-ghost justify-start lg:btn-md 2xl:btn-lg"
        aria-label="Business"
        value="business"
      />
    </li>
    <li>
      <input
        type="radio"
        name="theme-dropdown"
        class="theme-controller btn btn-sm btn-block btn-ghost justify-start lg:btn-md 2xl:btn-lg"
        aria-label="Acid"
        value="acid"
      />
    </li>
    <li>
      <input
        type="radio"
        name="theme-dropdown"
        class="theme-controller btn btn-sm btn-block btn-ghost justify-start lg:btn-md 2xl:btn-lg"
        aria-label="Lemonade"
        value="lemonade"
      />
    </li>
    <li>
      <input
        type="radio"
        name="theme-dropdown"
        class="theme-controller btn btn-sm btn-block btn-ghost justify-start lg:btn-md 2xl:btn-lg"
        aria-label="Night"
        value="night"
      />
    </li>
    <li>
      <input
        type="radio"
        name="theme-dropdown"
        class="theme-controller btn btn-sm btn-block btn-ghost justify-start lg:btn-md 2xl:btn-lg"
        aria-label="Coffee"
        value="coffee"
      />
    </li>
    <li>
      <input
        type="radio"
        name="theme-dropdown"
        class="theme-controller btn btn-sm btn-block btn-ghost justify-start lg:btn-md 2xl:btn-lg"
        aria-label="Winter"
        value="winter"
      />
    </li>
    <li>
      <input
        type="radio"
        name="theme-dropdown"
        class="theme-controller btn btn-sm btn-block btn-ghost justify-start lg:btn-md 2xl:btn-lg"
        aria-label="Dim"
        value="dim"
      />
    </li>
    <li>
      <input
        type="radio"
        name="theme-dropdown"
        class="theme-controller btn btn-sm btn-block btn-ghost justify-start lg:btn-md 2xl:btn-lg"
        aria-label="Nord"
        value="nord"
      />
    </li>
    <li>
      <input
        type="radio"
        name="theme-dropdown"
        class="theme-controller btn btn-sm btn-block btn-ghost justify-start lg:btn-md 2xl:btn-lg"
        aria-label="Sunset"
        value="sunset"
      />
    </li>
    <li>
      <input
        type="radio"
        name="theme-dropdown"
        class="theme-controller btn btn-sm btn-block btn-ghost justify-start lg:btn-md 2xl:btn-lg"
        aria-label="Caramellatte"
        value="caramellatte"
      />
    </li>
    <li>
      <input
        type="radio"
        name="theme-dropdown"
        class="theme-controller btn btn-sm btn-block btn-ghost justify-start lg:btn-md 2xl:btn-lg"
        aria-label="Abyss"
        value="abyss"
      />
    </li>
    <li>
      <input
        type="radio"
        name="theme-dropdown"
        class="theme-controller btn btn-sm btn-block btn-ghost justify-start lg:btn-md 2xl:btn-lg"
        aria-label="Silk"
        value="silk"
      />
    </li>
  </ul>
</li>

<li
  class="tooltip tooltip-left rtl:tooltip-right"
  data-tip="{% trans 'Toggle theme' %}"
>
  <label
    class="swap swap-rotate btn btn-sm lg:btn-md 2xl:btn-lg btn-square btn-ghost"
  >
    <input
      type="checkbox"
      class="theme-controller"
      value="{% block toggle_theme %}silk{% endblock %}"
    />
    <i data-lucide="sun" class="swap-off size-4 lg:size-6"></i>
    <i data-lucide="moon-star" class="swap-on size-4 lg:size-6"></i>
    <span class="sr-only"> {% trans 'Toggle theme' %} </span>
  </label>
</li>
