{% extends "allauth/layouts/base.html" %}{% load i18n %}

<!---->
{% block inner %}
<div class="relative size-full">
  <header class="absolute inset-x-0 top-0 z-10 backdrop-blur-3xl">
    <nav class="navbar p-4">
      <ul class="navbar-start gap-4">
        <li
          class="tooltip tooltip-right rtl:tooltip-left tooltip-primary lg:hidden"
          data-tip="{% trans 'Open drawer' %}"
        >
          <label
            for="sidebar"
            aria-label="{% trans 'close sidebar' %}"
            class="btn btn-sm lg:btn-md 2xl:btn-lg btn-square btn-ghost"
          >
            <i data-lucide="menu" class="size-4 lg:size-6"></i>
            <span class="sr-only">{% trans 'Open drawer' %}</span>
          </label>
        </li>

        <!---->
        {% block branding %}
        <li
          class="tooltip tooltip-right rtl:tooltip-left tooltip-primary md:hidden"
          data-tip="{% trans 'Accounts' %}"
        >
          <h1 class="relative">
            <a
              href="{% url 'account_profile' %}"
              class="btn btn-square btn-primary lg:btn-lg 2xl:btn-lg"
            >
              <div
                class="btn btn-square btn-primary rotate-45 p-0 shadow-none lg:btn-lg 2xl:btn-lg"
              >
                <i
                  data-lucide="shield-user"
                  class="-rotate-45 lg:size-8 2xl:size-10"
                ></i>
              </div>
              <span class="sr-only">{% trans 'Accounts' %}</span>
            </a>
          </h1>
        </li>
        {% endblock %}
      </ul>

      <ul class="navbar-end gap-4">
        {% block navbar_end %}{% endblock %}

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

        <!---->
        {% block theme_toggle %}
        <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 %}dark{% 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>
        {% endblock %}
      </ul>
    </nav>
  </header>

  <div
    class="size-full max-h-dvh overflow-y-auto px-4 py-24 md:max-h-[calc(100dvh-0.5rem)] lg:max-h-[calc(100dvh-1rem)]"
  >
    <main class="container mx-auto grid gap-8">
      {% include 'allauth/components/messages.html' %}

      <div class="flex items-center justify-center size-full">
        <section
          class="max-w-xl card card-sm bg-base-100 border border-base-300 shadow-xl lg:card-md xl:card-lg 2xl:card-xl"
        >
          <div class="card-body">{% block content %}{% endblock %}</div>
        </section>
      </div>
    </main>
  </div>
</div>
{% endblock %}