{% extends "django_fundamentals/layouts/settings.html" %}
{% load django_fundamentals %}
{% comment %}
API TAB — SHOW, COPY AND REGENERATE THE USER'S DRF TOKEN.

The token is blurred by default so it survives a screen share or a screenshot.
Regeneration is destructive (DRF's authtoken is one-per-user), so it is guarded
by an inline confirmation rather than a browser confirm() — a native dialog
blocks the page and is unstyleable.
{% endcomment %}

{% block head_title %}API · {{ block.super }}{% endblock %}

{% block content %}
<h1 class="text-xl font-semibold tracking-tight text-ink">API</h1>
<p class="mt-1 text-sm text-muted">
    Authenticate API requests with this token.
</p>

<section class="mt-6 rounded-lg border border-line bg-raised p-5"
         x-data="{ revealed: false, copied: false }">
    <h2 class="text-base font-semibold tracking-tight text-ink">Your API token</h2>

    <div class="mt-4 flex items-center gap-2">
        <code class="min-w-0 flex-1 truncate rounded border border-line bg-sunken px-3 py-2 font-mono text-sm text-ink transition"
              :class="revealed ? '' : 'blur-sm select-none'"
              x-ref="token">{{ api_token.key }}</code>

        <button type="button" @click="revealed = !revealed"
                class="inline-flex h-9 w-9 shrink-0 items-center justify-center rounded border border-line text-muted transition-colors hover:bg-sunken hover:text-ink focus:outline-none focus-visible:ring-2 focus-visible:ring-brand"
                :aria-label="revealed ? 'Hide token' : 'Show token'">
            <span x-show="!revealed">
                {% include "django_fundamentals/atoms/icon.html" with name="eye" class="h-4 w-4" %}
            </span>
            <span x-show="revealed" x-cloak>
                {% include "django_fundamentals/atoms/icon.html" with name="eye-off" class="h-4 w-4" %}
            </span>
        </button>

        <button type="button"
                @click="navigator.clipboard.writeText($refs.token.textContent.trim()).then(() => { copied = true; setTimeout(() => copied = false, 2000) })"
                class="inline-flex h-9 w-9 shrink-0 items-center justify-center rounded border border-line text-muted transition-colors hover:bg-sunken hover:text-ink focus:outline-none focus-visible:ring-2 focus-visible:ring-brand"
                :aria-label="copied ? 'Copied' : 'Copy token to clipboard'">
            <span x-show="!copied">
                {% include "django_fundamentals/atoms/icon.html" with name="copy" class="h-4 w-4" %}
            </span>
            <span x-show="copied" x-cloak class="text-success">
                {% include "django_fundamentals/atoms/icon.html" with name="check" class="h-4 w-4" %}
            </span>
        </button>
    </div>

    <p class="mt-3 text-xs text-muted">
        Send it as an <code class="font-mono">Authorization: Token &lt;your-token&gt;</code> header.
    </p>
</section>

<section class="mt-6 rounded-lg border border-line bg-raised p-5"
         x-data="{ confirming: false }">
    <h2 class="text-base font-semibold tracking-tight text-ink">Regenerate token</h2>
    <p class="mt-2 text-sm text-muted">
        Issue a new token if the current one has been exposed.
    </p>

    {# THESE THREE NEED ALPINE HANDLERS, WHICH atoms/button.html CAN'T CARRY, #}
    {# SO THEY USE THE button_classes TAG DIRECTLY — SAME CLASSES, SAME LOOK. #}
    <div x-show="!confirming" class="mt-4">
        <button type="button" @click="confirming = true"
                class="{% button_classes variant='secondary' %}">Regenerate token</button>
    </div>

    <div x-show="confirming" x-cloak class="mt-4 space-y-4">
        {% include "django_fundamentals/atoms/alert.html" with level="warning" body="Your current token stops working immediately. Anything using it — scripts, integrations, saved requests — will need the new token." %}

        <form method="post" action="{% url 'django_fundamentals_token_regenerate' %}" class="flex flex-wrap gap-2">
            {% csrf_token %}
            <button type="submit" class="{% button_classes variant='danger' %}">Yes, regenerate it</button>
            <button type="button" @click="confirming = false"
                    class="{% button_classes variant='ghost' %}">Cancel</button>
        </form>
    </div>
</section>
{% endblock %}