{% comment %}
Auth helper: store a JWT / API-key and show copyable curl / python / js snippets
for the current endpoint. DRF browsable API itself stays session-based; this is for
testing protected endpoints from a terminal or client.
{% endcomment %}
<div x-data="{ show: false, lang: 'curl' }">
  <span class="block text-xs font-medium uppercase tracking-wider text-muted-foreground mb-2.5">Auth</span>

  {# Type toggle #}
  <div class="inline-flex rounded-md border border-border p-0.5 mb-2 text-[12px]">
    <button @click="authType = 'bearer'"
            class="px-2.5 py-1 rounded font-medium transition-colors"
            :class="authType === 'bearer' ? 'bg-primary text-primary-foreground' : 'text-muted-foreground hover:text-foreground'">JWT</button>
    <button @click="authType = 'apikey'"
            class="px-2.5 py-1 rounded font-medium transition-colors"
            :class="authType === 'apikey' ? 'bg-primary text-primary-foreground' : 'text-muted-foreground hover:text-foreground'">API key</button>
  </div>

  {# Token input #}
  <div class="relative">
    <input :type="show ? 'text' : 'password'" x-model="authToken"
           :placeholder="authType === 'apikey' ? 'X-API-Key value' : 'Bearer token'"
           class="w-full px-2.5 py-1.5 pr-8 text-[12px] font-mono rounded-md border border-border bg-card text-foreground focus:outline-none focus:border-primary">
    <button @click="show = !show" type="button"
            class="absolute right-2 top-1/2 -translate-y-1/2 text-muted-foreground hover:text-foreground"
            :title="show ? 'Hide' : 'Show'">
      <i x-show="!show" data-lucide="eye" class="w-3.5 h-3.5"></i>
      <i x-show="show" x-cloak data-lucide="eye-off" class="w-3.5 h-3.5"></i>
    </button>
  </div>

  {# Usage snippets (curl / python / js) — always shown; token is woven in if set #}
  <div class="mt-3">
    <div class="flex items-center justify-between mb-1.5">
      <div class="inline-flex gap-3 text-[11px]">
        <template x-for="l in ['curl', 'python', 'js']" :key="l">
          <button @click="lang = l"
                  class="uppercase tracking-wider font-medium transition-colors"
                  :class="lang === l ? 'text-foreground' : 'text-muted-foreground hover:text-foreground'"
                  x-text="l"></button>
        </template>
      </div>
      <button @click="copy(snippet(lang), 'Copied')"
              class="text-[11px] text-muted-foreground hover:text-foreground transition-colors">Copy</button>
    </div>
    <pre class="rounded-md border border-border bg-card p-2.5 text-[11px] leading-5 whitespace-pre-wrap break-all"><code
      x-effect="
        $el.textContent = snippet(lang);
        $el.className = 'language-' + (lang === 'curl' ? 'bash' : lang === 'js' ? 'javascript' : 'python');
        delete $el.dataset.highlighted;
        window.hljs && hljs.highlightElement($el);
      "></code></pre>
  </div>
</div>