{# Settings drawer — five tabs: Imports / Profile / Density / ETF pairs / About.

   Each tab is a separate template included below; switching is purely
   client-side via Alpine. Cross-tab interactions (e.g. profile changes
   that recompute pages) post to /preferences and rely on HX-Refresh.

   Open events come from outside this scope via:
     window.dispatchEvent(new CustomEvent('open-settings-drawer', { detail: { tab: 'density' } }))

   `tab` is optional; defaults to 'imports' if not set or unknown. #}
<div id="settings-drawer-root"
     class="fixed inset-0 z-30 pointer-events-none"
     :class="{ 'pointer-events-auto': open }"
     x-data="{
       open: false,
       tab: 'imports',
       width: (function () {
         const v = parseInt(localStorage.getItem('settings-drawer-width') || '480', 10);
         return Number.isFinite(v) ? v : 480;
       })(),
       resizing: false,
       openTab(name) { this.tab = name; this.open = true; },
       startResize(ev) {
         ev.preventDefault();
         this.resizing = true;
         const startX = ev.clientX;
         const startW = this.width;
         const min = 360;
         const onMove = (e) => {
           const max = Math.max(min + 40, window.innerWidth - 60);
           const next = Math.max(min, Math.min(max, startW + (startX - e.clientX)));
           this.width = next;
         };
         const onUp = () => {
           document.removeEventListener('mousemove', onMove);
           document.removeEventListener('mouseup', onUp);
           document.body.style.userSelect = '';
           document.body.style.cursor = '';
           try { localStorage.setItem('settings-drawer-width', String(this.width)); } catch (e) {}
           this.resizing = false;
         };
         document.body.style.userSelect = 'none';
         document.body.style.cursor = 'col-resize';
         document.addEventListener('mousemove', onMove);
         document.addEventListener('mouseup', onUp);
       }
     }"
     x-on:open-settings-drawer.window="openTab($event.detail?.tab || 'imports')"
     x-on:keydown.window.escape="open = false"
     x-cloak>
  {# Backdrop — fades in/out independent of the panel slide so the dim feels
     like ambient context, not part of the panel's geometry. #}
  <div x-show="open"
       x-transition:enter="transition-opacity duration-300 ease-out"
       x-transition:enter-start="opacity-0"
       x-transition:enter-end="opacity-100"
       x-transition:leave="transition-opacity duration-200 ease-in"
       x-transition:leave-start="opacity-100"
       x-transition:leave-end="opacity-0"
       class="absolute inset-0 bg-overlay-medium backdrop-blur-sm"
       @click="open = false"
       aria-hidden="true"></div>

  {# Drawer panel — slides from the right edge using --duration-med / --ease-out-soft
     (matched by Tailwind's duration-300 + ease-out, close enough to our tokens
     that hand-converting to arbitrary-value utilities would be busy-work).
     Width is resizable via the left-edge drag handle. The icon that opens this
     drawer is hidden on mobile, so width binds unconditionally. #}
  <aside id="settings-drawer"
         x-show="open"
         x-transition:enter="transition-transform duration-300 ease-out"
         x-transition:enter-start="translate-x-full"
         x-transition:enter-end="translate-x-0"
         x-transition:leave="transition-transform duration-200 ease-in"
         x-transition:leave-start="translate-x-0"
         x-transition:leave-end="translate-x-full"
         class="absolute inset-y-0 right-0 vibrancy-surface flex flex-col"
         :style="'box-shadow: var(--shadow-drawer); width: ' + width + 'px; max-width: 100vw;'"
         role="dialog"
         aria-modal="true"
         aria-label="Settings">
    {# Drag handle for resize. Uses inline styles for cursor + background so it
       doesn't depend on Tailwind utility compilation. 8px hit zone, 2px visible bar. #}
    <div data-testid="settings-drawer-resize-handle"
         style="position: absolute; top: 0; bottom: 0; left: -4px; width: 8px; cursor: col-resize; z-index: 35;"
         @mousedown="startResize($event)"
         @mouseenter="$el.querySelector('.handle-bar').style.backgroundColor = resizing ? 'var(--color-accent)' : 'rgba(94,92,230,0.7)'"
         @mouseleave="$el.querySelector('.handle-bar').style.backgroundColor = resizing ? 'var(--color-accent)' : 'rgba(94,92,230,0.25)'"
         role="separator"
         aria-orientation="vertical"
         aria-label="Resize settings drawer">
      <div class="handle-bar"
           :style="`position: absolute; top: 0; bottom: 0; left: 50%; transform: translateX(-50%); width: 2px; background-color: ${resizing ? 'var(--color-accent)' : 'rgba(94,92,230,0.25)'}; transition: background-color 0.15s;`"></div>
    </div>
    <header class="flex items-center justify-between px-4 py-3 border-b" style="border-color: var(--color-hairline);">
      <h2 class="text-[16px] font-semibold tracking-tight m-0">Settings</h2>
      <button data-testid="settings-drawer-close"
              type="button"
              class="text-label-2 hover:text-text"
              @click="open = false"
              aria-label="Close">
        <img src="/static/icons/x.svg?v={{ asset_v }}" class="w-5 h-5 icon-mono" alt="">
      </button>
    </header>

    <nav class="flex gap-1 px-4 pt-2" role="tablist">
      <button type="button"
              role="tab"
              data-tab="imports"
              :class="tab === 'imports' ? 'tab tab--active' : 'tab'"
              @click="tab = 'imports'">Imports</button>
      <button type="button"
              role="tab"
              data-tab="profile"
              :class="tab === 'profile' ? 'tab tab--active' : 'tab'"
              @click="tab = 'profile'">Profile</button>
      <button type="button"
              role="tab"
              data-tab="density"
              :class="tab === 'density' ? 'tab tab--active' : 'tab'"
              @click="tab = 'density'">Density</button>
      <button type="button"
              role="tab"
              data-tab="etf-pairs"
              :class="tab === 'etf-pairs' ? 'tab tab--active' : 'tab'"
              @click="tab = 'etf-pairs'">ETF pairs</button>
      <button type="button"
              role="tab"
              data-tab="about"
              :class="tab === 'about' ? 'tab tab--active' : 'tab'"
              @click="tab = 'about'">About</button>
    </nav>

    <div class="flex-1 overflow-y-auto px-4 py-4">
      <div x-show="tab === 'imports'" x-cloak>
        {% include "_settings_drawer_imports_tab.html" %}
      </div>
      <div x-show="tab === 'profile'" x-cloak>
        {% include "_settings_drawer_profile_tab.html" %}
      </div>
      <div x-show="tab === 'density'" x-cloak>
        {% include "_settings_drawer_density_tab.html" %}
      </div>
      <div x-show="tab === 'etf-pairs'" x-cloak>
        {% include "_settings_drawer_etf_pairs_tab.html" %}
      </div>
      <div x-show="tab === 'about'" x-cloak>
        {% include "_settings_drawer_about_tab.html" %}
      </div>
    </div>
  </aside>
</div>