{# Settings dropdown (language + theme). Shared by base.html and admin/base.html
   to kill the former ~100-line copy-paste duplication.

   Proper Penguin UI dropdown: behaviour is the vendored
   dropdowns/dropdown-with-icons.html verbatim (isOpen / openedWithKeyboard,
   x-trap + $focus keyboard nav, x-cloak x-show, @click.outside). Trigger is our
   gear icon-only button; content is the language form + theme toggle. Needs the
   Alpine Focus plugin (loaded in base.html) for x-trap / $focus.

   Self-contained Alpine state + relative positioning; the host only places it
   (e.g. ml-auto in admin). The panel has NO id on purpose (see profile_menu.html
   for why — htmx hx-boost settles by id). #}
<div x-data="{ isOpen: false, openedWithKeyboard: false }"
  x-on:keydown.esc.window="isOpen = false, openedWithKeyboard = false"
  class="relative self-stretch">
{{ ui::icon_button(size="h-full w-9", aria_label=t(key='settings', lang=lang | default(value='sk')), attrs='x-on:click="isOpen = ! isOpen" x-on:keydown.space.prevent="openedWithKeyboard = true" x-on:keydown.enter.prevent="openedWithKeyboard = true" x-on:keydown.down.prevent="openedWithKeyboard = true" x-bind:aria-expanded="isOpen || openedWithKeyboard" aria-haspopup="true"', icon='<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-5"><path stroke-linecap="round" stroke-linejoin="round" d="M9.594 3.94c.09-.542.56-.94 1.11-.94h2.593c.55 0 1.02.398 1.11.94l.213 1.281c.063.374.313.686.645.87.074.04.147.083.22.127.324.196.72.257 1.075.124l1.217-.456a1.125 1.125 0 0 1 1.37.49l1.296 2.247a1.125 1.125 0 0 1-.26 1.431l-1.003.827c-.293.241-.438.613-.43.992a7.723 7.723 0 0 1 0 .255c-.008.378.137.75.43.991l1.004.827c.424.35.534.955.26 1.43l-1.298 2.247a1.125 1.125 0 0 1-1.369.491l-1.217-.456c-.355-.133-.75-.072-1.076.124a6.47 6.47 0 0 1-.22.128c-.331.183-.581.495-.644.869l-.213 1.281c-.09.543-.56.94-1.11.94h-2.594c-.55 0-1.019-.398-1.11-.94l-.213-1.281c-.062-.374-.312-.686-.644-.87a6.52 6.52 0 0 1-.22-.127c-.325-.196-.72-.257-1.076-.124l-1.217.456a1.125 1.125 0 0 1-1.369-.49l-1.297-2.247a1.125 1.125 0 0 1 .26-1.431l1.004-.827c.292-.24.437-.613.43-.991a6.932 6.932 0 0 1 0-.255c.007-.38-.138-.751-.43-.992l-1.004-.827a1.125 1.125 0 0 1-.26-1.43l1.297-2.247a1.125 1.125 0 0 1 1.37-.491l1.216.456c.356.133.751.072 1.076-.124.072-.044.146-.086.22-.128.332-.183.582-.495.644-.869l.214-1.28Z" /><path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z" /></svg>') }}
<div x-cloak x-show="isOpen || openedWithKeyboard" x-transition x-trap="openedWithKeyboard"
  x-on:click.outside="isOpen = false, openedWithKeyboard = false"
  x-on:keydown.down.prevent="$focus.wrap().next()" x-on:keydown.up.prevent="$focus.wrap().previous()"
  class="absolute right-0 mt-2 flex w-56 flex-col overflow-hidden rounded-radius border border-outline bg-surface-alt py-1 shadow-lg dark:border-outline-dark dark:bg-surface-dark-alt"
  role="menu">
  <form method="post" action="/lang" hx-boost="false">
  <input type="hidden" name="_csrf" value="{{ csrf_token() }}">
    <p class="px-4 py-1.5 text-xs font-semibold uppercase tracking-wide text-on-surface/60 dark:text-on-surface-dark/60">
      {{ t(key="settings-language", lang=lang | default(value='sk')) }}
    </p>
    <button type="submit" name="lang" value="en" role="menuitem"
      class="flex w-full items-center justify-between px-4 py-2 text-sm text-on-surface transition hover:bg-primary/5 hover:text-on-surface-strong focus-visible:bg-primary/10 focus-visible:text-on-surface-strong focus-visible:outline-hidden dark:text-on-surface-dark dark:hover:bg-primary-dark/5 dark:hover:text-on-surface-dark-strong">
      <span>English</span>
      {% if lang | default(value='sk') == "en" %}<span class="text-primary dark:text-primary-dark">✓</span>{% endif %}
    </button>
    <button type="submit" name="lang" value="sk" role="menuitem"
      class="flex w-full items-center justify-between px-4 py-2 text-sm text-on-surface transition hover:bg-primary/5 hover:text-on-surface-strong focus-visible:bg-primary/10 focus-visible:text-on-surface-strong focus-visible:outline-hidden dark:text-on-surface-dark dark:hover:bg-primary-dark/5 dark:hover:text-on-surface-dark-strong">
      <span>Slovenčina</span>
      {% if lang | default(value='sk') == "sk" %}<span class="text-primary dark:text-primary-dark">✓</span>{% endif %}
    </button>
  </form>
  {# Currency switcher. Only enabled (buyer-available) currencies are listed,
     from the `currencies()` snapshot; the whole section is hidden when the store
     is EUR-only (no enabled alternatives). The active code is read from the
     `currency` cookie client-side (Alpine); posting to /currency sets it. #}
  {% set cc = currencies() %}
  {% if cc.alts | length > 0 %}
  <p class="mt-1 px-4 py-1.5 text-xs font-semibold uppercase tracking-wide text-on-surface/60 dark:text-on-surface-dark/60">
    {{ t(key="settings-currency", lang=lang | default(value='sk')) }}
  </p>
  <form method="post" action="/currency" hx-boost="false"
    x-data="{ cur: ((document.cookie.split('; ').find(function (c) { return c.indexOf('currency=') === 0 }) || 'currency={{ cc.base.code }}').split('=')[1]) }">
  <input type="hidden" name="_csrf" value="{{ csrf_token() }}">
    <button type="submit" name="currency" value="{{ cc.base.code }}" role="menuitem"
      class="flex w-full items-center justify-between px-4 py-2 text-sm text-on-surface transition hover:bg-primary/5 hover:text-on-surface-strong focus-visible:bg-primary/10 focus-visible:text-on-surface-strong focus-visible:outline-hidden dark:text-on-surface-dark dark:hover:bg-primary-dark/5 dark:hover:text-on-surface-dark-strong">
      <span>{{ cc.base.code }} ({{ cc.base.symbol }})</span>
      <span x-cloak x-show="cur === '{{ cc.base.code }}'" class="text-primary dark:text-primary-dark">✓</span>
    </button>
    {% for a in cc.alts %}
    <button type="submit" name="currency" value="{{ a.code }}" role="menuitem"
      class="flex w-full items-center justify-between px-4 py-2 text-sm text-on-surface transition hover:bg-primary/5 hover:text-on-surface-strong focus-visible:bg-primary/10 focus-visible:text-on-surface-strong focus-visible:outline-hidden dark:text-on-surface-dark dark:hover:bg-primary-dark/5 dark:hover:text-on-surface-dark-strong">
      <span>{{ a.code }} ({{ a.symbol }})</span>
      <span x-cloak x-show="cur === '{{ a.code }}'" class="text-primary dark:text-primary-dark">✓</span>
    </button>
    {% endfor %}
  </form>
  {% endif %}
  <p class="mt-1 px-4 py-1.5 text-xs font-semibold uppercase tracking-wide text-on-surface/60 dark:text-on-surface-dark/60">
    {{ t(key="settings-theme", lang=lang | default(value='sk')) }}
  </p>
  {# Theme picker: Penguin UI's switch toggle (penguinui-components/toggle/default-toggle.html),
     adapted from a standalone checkbox into a light/dark switch wired to our existing
     setTheme()/currentTheme() helpers in base.html (which drive <html data-theme>). The `dark`
     state initialises from the resolved theme — so a stored 'system' preference still reflects
     the current appearance — and stays in sync via the theme:changed event the helpers dispatch.
     Toggling writes an explicit light/dark choice (the old tri-state 'system' option is dropped,
     matching Penguin's binary toggle). #}
  <div class="px-4 py-2"
    x-data="{
      labels: { light: '{{ t(key='theme-light', lang=lang | default(value='sk')) }}', dark: '{{ t(key='theme-dark', lang=lang | default(value='sk')) }}' },
      dark: document.documentElement.getAttribute('data-theme') === 'dark'
    }"
    @theme:changed.document="dark = document.documentElement.getAttribute('data-theme') === 'dark'">
    <label for="themeToggle" class="inline-flex w-full cursor-pointer items-center justify-between gap-3">
      <span class="text-sm font-medium text-on-surface dark:text-on-surface-dark" x-text="dark ? labels.dark : labels.light"></span>
      <input id="themeToggle" type="checkbox" class="peer sr-only" role="switch"
        :checked="dark" @change="setTheme($event.target.checked ? 'dark' : 'light')" />
      <div class="relative h-6 w-11 after:h-5 after:w-5 peer-checked:after:translate-x-5 rounded-full border border-outline bg-surface-alt after:absolute after:bottom-0 after:left-[0.0625rem] after:top-0 after:my-auto after:rounded-full after:bg-on-surface after:transition-all after:content-[''] peer-checked:bg-primary peer-checked:after:bg-on-primary peer-focus:outline-2 peer-focus:outline-offset-2 peer-focus:outline-outline-strong peer-focus:peer-checked:outline-primary peer-active:outline-offset-0 dark:border-outline-dark dark:bg-surface-dark-alt dark:after:bg-on-surface-dark dark:peer-checked:bg-primary-dark dark:peer-checked:after:bg-on-primary-dark dark:peer-focus:outline-outline-dark-strong dark:peer-focus:peer-checked:outline-primary-dark" aria-hidden="true"></div>
    </label>
  </div>
</div>
</div>
