---
/*
 * Copyright (C) 2026 Garudex Labs.  All Rights Reserved.
 * Caracal, a product of Garudex Labs
 *
 * Two-state theme toggle: sun or moon, defaults to dark.
 */
---

<starlight-theme-toggle>
  <button type="button" class="theme-toggle" aria-label="Switch to light theme" aria-pressed="false">
    <svg class="icon icon-sun" aria-hidden="true" width="18" height="18" viewBox="0 0 24 24" fill="currentColor">
      <path d="M5 12a1 1 0 0 0-1-1H3a1 1 0 0 0 0 2h1a1 1 0 0 0 1-1Zm.64 5-.71.71a1 1 0 0 0 0 1.41 1 1 0 0 0 1.41 0l.71-.71A1 1 0 0 0 5.64 17ZM12 5a1 1 0 0 0 1-1V3a1 1 0 0 0-2 0v1a1 1 0 0 0 1 1Zm5.66 2.34a1 1 0 0 0 .7-.29l.71-.71a1 1 0 1 0-1.41-1.41l-.66.71a1 1 0 0 0 0 1.41 1 1 0 0 0 .66.29Zm-12-.29a1 1 0 0 0 1.41 0 1 1 0 0 0 0-1.41l-.71-.71a1.004 1.004 0 1 0-1.43 1.41l.73.71ZM21 11h-1a1 1 0 0 0 0 2h1a1 1 0 0 0 0-2Zm-2.64 6A1 1 0 0 0 17 18.36l.71.71a1 1 0 0 0 1.41 0 1 1 0 0 0 0-1.41l-.76-.66ZM12 6.5a5.5 5.5 0 1 0 5.5 5.5A5.51 5.51 0 0 0 12 6.5Zm0 9a3.5 3.5 0 1 1 0-7 3.5 3.5 0 0 1 0 7Zm0 3.5a1 1 0 0 0-1 1v1a1 1 0 0 0 2 0v-1a1 1 0 0 0-1-1Z" />
    </svg>
    <svg class="icon icon-moon" aria-hidden="true" width="18" height="18" viewBox="0 0 24 24" fill="currentColor">
      <path d="M21.64 13a1 1 0 0 0-1.05-.14 8.049 8.049 0 0 1-3.37.73 8.15 8.15 0 0 1-8.14-8.1 8.59 8.59 0 0 1 .25-2A1 1 0 0 0 8 2.36a10.14 10.14 0 1 0 14 11.69 1 1 0 0 0-.36-1.05Zm-9.5 6.69A8.14 8.14 0 0 1 7.08 5.22v.27a10.15 10.15 0 0 0 10.14 10.14 9.784 9.784 0 0 0 2.1-.22 8.11 8.11 0 0 1-7.18 4.32v-.04Z" />
    </svg>
  </button>
</starlight-theme-toggle>

<script is:inline>
  (() => {
    const KEY = 'starlight-theme';
    const get = () => {
      try { return localStorage.getItem(KEY); } catch { return null; }
    };
    const set = (t) => {
      try { localStorage.setItem(KEY, t); } catch {}
    };
    const apply = (t) => {
      document.documentElement.dataset.theme = t;
    };
    const current = get() === 'light' ? 'light' : 'dark';
    set(current);
    apply(current);
  })();
</script>

<script>
  class StarlightThemeToggle extends HTMLElement {
    connectedCallback() {
      const btn = this.querySelector('button');
      if (!btn) return;
      const apply = (t: string) => {
        document.documentElement.dataset.theme = t;
        try { localStorage.setItem('starlight-theme', t); } catch {}
        this.dataset.theme = t;
        btn.setAttribute('aria-pressed', t === 'dark' ? 'true' : 'false');
        btn.setAttribute(
          'aria-label',
          t === 'dark' ? 'Switch to light theme' : 'Switch to dark theme',
        );
      };
      const initial = document.documentElement.dataset.theme === 'light' ? 'light' : 'dark';
      apply(initial);
      btn.addEventListener('click', () => {
        const next = this.dataset.theme === 'dark' ? 'light' : 'dark';
        apply(next);
      });
    }
  }
  customElements.define('starlight-theme-toggle', StarlightThemeToggle);
</script>

<style>
  starlight-theme-toggle {
    display: inline-flex;
  }
  .theme-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    padding: 0;
    border: 1px solid var(--sl-color-hairline);
    border-radius: 6px;
    background: var(--caracal-panel, transparent);
    color: var(--sl-color-text);
    cursor: pointer;
  }
  .theme-toggle:hover {
    border-color: var(--sl-color-hairline-shade);
    color: var(--caracal-link, var(--sl-color-text));
  }
  .theme-toggle .icon {
    display: none;
  }
  starlight-theme-toggle[data-theme='dark'] .icon-sun {
    display: inline;
  }
  starlight-theme-toggle[data-theme='light'] .icon-moon {
    display: inline;
  }
</style>
