@php
    $field = 'h-14 w-full rounded-md border border-line bg-inset text-center font-mono text-2xl font-semibold tracking-[0.5em] text-ink caret-accent placeholder:text-ink-4 focus:border-accent/40 focus:outline-none';
    $label = 'mb-1.5 block font-mono text-[11px] uppercase tracking-wider text-ink-3';
    $err = 'mt-1.5 flex items-center gap-1.5 font-mono text-[11px] text-offline';
@endphp

<div class="space-y-6">
    <div class="space-y-1.5">
        <p class="font-mono text-[10px] font-semibold uppercase tracking-[0.18em] text-accent-text">Zwei-Faktor</p>
        <h1 class="font-display text-2xl font-bold tracking-tight text-ink">Einrichten</h1>
        <p class="font-mono text-xs leading-relaxed text-ink-3">Scanne den Code mit einer Authenticator-App (Aegis, Google Authenticator, …) und bestätige mit einem Code.</p>
    </div>

    <div class="flex flex-col items-center gap-3">
        <div class="rounded-lg border border-line bg-ink p-3">
            <img src="{{ $this->qrCode() }}" alt="2FA-QR-Code" class="h-44 w-44" />
        </div>
        <div class="w-full rounded-md border border-line bg-inset px-3 py-2 text-center">
            <p class="font-mono text-[10px] uppercase tracking-wider text-ink-4">Geheimnis (manuell)</p>
            <p class="mt-1 break-all font-mono text-xs text-ink-2">{{ $secret }}</p>
        </div>
    </div>

    <form wire:submit="confirm" class="space-y-4">
        <div>
            <label for="code" class="{{ $label }}">Bestätigungs-Code</label>
            <input wire:model="code" id="code" inputmode="numeric" autocomplete="one-time-code" maxlength="6" autofocus
                   class="{{ $field }}" placeholder="000000" />
            @error('code') <p class="{{ $err }}"><x-icon name="alert" class="h-3.5 w-3.5 shrink-0" />{{ $message }}</p> @enderror
        </div>

        <x-btn variant="primary" size="lg" type="submit" class="w-full" wire:loading.attr="disabled" wire:target="confirm">
            <svg wire:loading wire:target="confirm" class="h-4 w-4 animate-spin" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" aria-hidden="true"><path d="M21 12a9 9 0 1 1-6.219-8.56" stroke-linecap="round" /></svg>
            <span wire:loading.remove wire:target="confirm">Aktivieren</span>
            <span wire:loading wire:target="confirm">Prüfe…</span>
        </x-btn>
    </form>
</div>