@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">
                <i class="ph ph-shield-check text-white/70 text-lg"></i>
                Recovery-Codes</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 class="p-6">
    <div class="space-y-4">
        @if(empty($plainCodes))
            <div class="rounded-xl border border-white/10 bg-white/[0.04] p-4 #mb-5">
                @if($hasExisting)
                    <div class="flex items-start gap-3">
                        <i class="ph ph-info text-white/60 text-lg"></i>
                        <div class="text-sm text-white/80">
                            Für deinen Account existieren bereits Recovery-Codes.
                            Aus Sicherheitsgründen können sie <span class="font-semibold">nicht erneut angezeigt</span>
                            werden.
                            Du kannst sie jedoch <span class="font-semibold">neu erzeugen (rotieren)</span>.
                        </div>
                    </div>
                @else
                    <div class="text-sm text-white/80">
                        Recovery-Codes sind Einmal-Notfallcodes, falls du z. B. den Zugriff auf deine 2FA-App verlierst.
                        Sie werden <span class="font-semibold">nur direkt nach der Erstellung</span> angezeigt – bitte
                        speichere oder drucke sie sofort.
                    </div>
                @endif
            </div>
        @else
            <div class="#mb-3 text-sm text-white/70">
                Hier sind deine neuen Recovery-Codes. Sie werden <span class="font-semibold">nur jetzt</span> angezeigt.
                Bewahre sie offline & sicher auf.
            </div>
            <div class="rounded-xl border border-white/10 bg-white/[0.04] p-4">
                <div class="grid grid-cols-2 md:grid-cols-3 gap-2">
                    @foreach($plainCodes as $c)
                        <div
                            class="rounded-lg border border-white/10 bg-white/[0.06] px-3 py-2 font-mono text-white/90 tracking-wider text-center">
                            {{ chunk_split($c, 5, ' ') }}
                        </div>
                    @endforeach
                </div>
            </div>
            <div class="text-xs text-white/50 rounded-xl border border-white/10 bg-white/[0.04] p-2">
                <b>Tipp</b>: Aktiviere TOTP als Hauptmethode, nutze E-Mail-Codes als Fallback und drucke diese Codes aus.
            </div>
        @endif
    </div>
</div>

@push('modal.footer')
    <div class="px-5 py-3 border-t border-white/10 backdrop-blur rounded-b-2xl">
        @if(empty($plainCodes))
            <div class="flex items-center justify-end gap-2">
                <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 wire:click="generate"
                        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">
                    {{ $hasExisting ? 'Neu erstellen & anzeigen' : 'Erstellen & anzeigen' }}
                </button>
            </div>
        @else
            <div class="flex flex-wrap items-center justify-end gap-2">
                <button
                    x-data
                    x-on:click="navigator.clipboard.writeText(@js(implode(PHP_EOL, $plainCodes)))"
                    class="px-4 py-2 rounded-lg text-sm border border-white/10 text-white/70 hover:text-white hover:border-white/20">
                    In Zwischenablage
                </button>

                <button wire:click="downloadTxt"
                        class="px-4 py-2 rounded-lg text-sm border border-white/10 text-white/70 hover:text-white hover:border-white/20">
                    Als .txt speichern
                </button>

                <button wire:click="$dispatch('closeModal')"
                        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">
                    Fertig
                </button>
            </div>
        @endif
    </div>
@endpush