@push('modal.header')
    <div class="px-5 pt-5 pb-3 border-b border-white/10
              backdrop-blur rounded-t-2xl relative">
        <div class="flex items-center justify-between">
            <h2 class="text-lg font-semibold text-white">TOTP einrichten</h2>
            <button wire:click="$dispatch('closeModal')" class="text-white/60 hover:text-white text-lg">
                <i class="ph ph-x"></i>
            </button>
        </div>
    </div>
@endpush

<div
    x-data="{
    code:['','','','','',''],
    focusNext(i){ if(this.code[i].length===1 && i<5) this.$refs['d'+(i+1)].focus() },
    paste(e){ const t=(e.clipboardData||window.clipboardData).getData('text').replace(/\D/g,'').slice(0,6); t.split('').forEach((c,i)=>this.code[i]=c) }
  }"
    class="p-6"
>
    <div class="space-y-4">
        <div class="text-sm text-white/70">
            Scanne den QR-Code mit deiner Authenticator-App und gib den 6-stelligen Code zur Bestätigung ein.
        </div>

        {{-- Step 1 --}}
        <div class="#mt-4 mb-2 inline-flex items-center gap-2 rounded-full bg-white/5 border border-white/10 px-3 py-1">
            <span class="text-xs font-semibold text-white/90">Step 1</span>
            <span class="text-xs text-white/70">QR-Code scannen</span>
        </div>

        <div class="#mt-3 rounded-2xl border border-white/10 bg-white/[0.04] p-3">
            <div class="grid grid-cols-1 sm:grid-cols-2 gap-3 items-center">
                {{-- QR: perfectly square --}}
                <div class="flex justify-center #max-h-48">
                    <img src="{{ $qrPng }}" alt="TOTP QR"
                         class="w-48 h-fit rounded-xl border border-white/10 bg-black/20 p-2 object-contain"/>
                </div>

                {{-- Secret + copy (stacked, readable) --}}
                <div class="space-y-3">
                    <p class="text-sm font-medium text-white/85">Kannst du nicht scannen?</p>
                    <p class="text-xs text-white/60">Gib stattdessen diesen Secret-Key ein:</p>

                    <div class="mt-2 #flex flex-col sm:flex-row sm:items-center gap-2">
                        <input readonly value="{{ $secret }}"
                               class="nx-input"/>
                    </div>
                    <x-button.copy-btn :text="$secret"/>
                </div>
            </div>
        </div>

        {{-- Step 2 --}}
        <div
            class="#mt-6 #mb-2 inline-flex items-center gap-2 rounded-full bg-white/5 border border-white/10 px-3 py-1">
            <span class="text-xs font-semibold text-white/90">Step 2</span>
            <span class="text-xs text-white/70">Bestätigungscode eingeben</span>
        </div>

        {{-- 6 small boxes, centered --}}
        <div x-on:paste.prevent="paste($event)"
             class="mt-3 flex justify-center gap-2 sm:gap-3">
            @for($i=0;$i<6;$i++)
                <input x-model="code[{{ $i }}]" x-ref="d{{ $i }}" maxlength="1"
                       x-on:input="focusNext({{ $i }})"
                       class="nx-input w-10 h-12 sm:w-11 sm:h-12 text-center text-lg"/>
            @endfor
        </div>
    </div>
</div>

@push('modal.footer')
    <div class="px-5 py-3 border-t border-white/10 backdrop-blur rounded-b-2xl">
        <div class="flex justify-end gap-2">
            <button type="button" wire:click="$dispatch('closeModal')"
                    class="px-4 py-2 rounded-lg text-sm border border-white/10 text-white/70 hover:text-white hover:border-white/20">
                Abbrechen
            </button>

            <button type="submit" wire:click="$dispatch('security:totp:enable')"
                    class="px-4 py-2 rounded-lg text-sm bg-emerald-500/20 text-emerald-300 border border-emerald-400/30 hover:bg-emerald-500/30">
                Bestätigen & aktivieren
            </button>
        </div>
    </div>
@endpush