{# 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"
     :class="open ? 'pointer-events-auto' : 'pointer-events-none'"
     x-data="{
       open: false,
       tab: 'imports',
       width: (function () {
         // Default 520 — wider than the original 420 so the Imports table's
         // FILENAME column shows enough characters without forcing the user to
         // discover the resize handle. Existing user-saved values are kept.
         const v = parseInt(localStorage.getItem('settings-drawer-width') || '520', 10);
         return Number.isFinite(v) ? v : 520;
       })(),
       resizing: false,
       handleHovered: false,
       previouslyFocused: null,
       init() {
         // Dispatch a bubbling event whenever the drawer transitions to closed,
         // so the underlying settings_entry.html carryforward fragment can defer
         // its lazy fetch until the user is actually looking at it.
         this.$watch('open', (v) => {
           if (v) {
             // Capture the trigger so we can restore focus on close; move
             // focus to the close button so screenreaders + keyboard users
             // land inside the dialog instead of staying at the gear icon.
             this.previouslyFocused = document.activeElement;
             this.$nextTick(() => {
               const closeBtn = this.$root.querySelector('[data-testid=\'settings-drawer-close\']');
               if (closeBtn) closeBtn.focus();
             });
           } else {
             this.$dispatch('settings-drawer-closed');
             if (this.previouslyFocused && this.previouslyFocused.focus) {
               this.previouslyFocused.focus();
               this.previouslyFocused = null;
             }
           }
         });
       },
       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. Uses bg-overlay-strong
     + a heavier blur so any underlying content (e.g. the carryforward fragment
     rendered by settings_entry.html) reads as background ambience, not as a
     competing UI layer. #}
  <div x-show="open"
       x-transition:enter="transition-opacity duration-[240ms] ease-out"
       x-transition:enter-start="opacity-0"
       x-transition:enter-end="opacity-100"
       x-transition:leave="transition-opacity duration-[160ms] ease-in"
       x-transition:leave-start="opacity-100"
       x-transition:leave-end="opacity-0"
       class="absolute inset-0 bg-overlay-strong backdrop-blur-md"
       @click="open = false"
       aria-hidden="true"></div>

  {# Drawer panel — slides from the right edge. Durations bind to
     --duration-med (240ms) / --duration-fast (160ms) via arbitrary-value
     utilities so timing stays in lockstep with the rest of the motion system.
     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-[240ms] ease-out"
         x-transition:enter-start="translate-x-full"
         x-transition:enter-end="translate-x-0"
         x-transition:leave="transition-transform duration-[160ms] 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="handleHovered = true"
         @mouseleave="handleHovered = false"
         role="separator"
         aria-orientation="vertical"
         aria-label="Resize settings drawer">
      {# Hover + active state both drive the bar via :style so Alpine stays in
         control of the binding. The previous inline-style mutation on
         mouseenter shadowed the :style binding, leaving the resize-active
         highlight visually stuck after the first hover. #}
      <div class="handle-bar"
           :style="`position: absolute; top: 0; bottom: 0; left: 50%; transform: translateX(-50%); width: 2px; background-color: ${resizing ? 'var(--color-signature)' : (handleHovered ? 'var(--color-signature-edge)' : 'var(--color-signature-tint)')}; 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'"
              :aria-selected="tab === 'imports' ? 'true' : 'false'"
              @click="tab = 'imports'">Imports</button>
      <button type="button"
              role="tab"
              data-tab="profile"
              :class="tab === 'profile' ? 'tab tab--active' : 'tab'"
              :aria-selected="tab === 'profile' ? 'true' : 'false'"
              @click="tab = 'profile'">Profile</button>
      <button type="button"
              role="tab"
              data-tab="density"
              :class="tab === 'density' ? 'tab tab--active' : 'tab'"
              :aria-selected="tab === 'density' ? 'true' : 'false'"
              @click="tab = 'density'">Density</button>
      <button type="button"
              role="tab"
              data-tab="etf-pairs"
              :class="tab === 'etf-pairs' ? 'tab tab--active' : 'tab'"
              :aria-selected="tab === 'etf-pairs' ? 'true' : 'false'"
              @click="tab = 'etf-pairs'">ETF pairs</button>
      <button type="button"
              role="tab"
              data-tab="about"
              :class="tab === 'about' ? 'tab tab--active' : 'tab'"
              :aria-selected="tab === 'about' ? 'true' : 'false'"
              @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>
      <template x-if="tab === 'profile'">
        <div>{% include "_settings_drawer_profile_tab.html" %}</div>
      </template>
      <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>