@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>
                E-Mail-2FA 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 class="p-6">

    <div class="space-y-4">
        <p class="text-white/70 text-sm #mb-6">
            Wir senden einen 6-stelligen Bestätigungscode an deine aktuelle Account-E-Mail.
            Gib ihn unten ein, um E-Mail-2FA zu aktivieren.
        </p>

        {{-- Senden --}}
        <div class="text-center">
            <button
                type="button"
                wire:click="sendMail"
                @if($cooldown>0) disabled @endif
                class="px-4 py-2 rounded-lg text-sm
               bg-white/5 text-white/75 border border-white/15
               hover:bg-white/10 hover:text-white transition">

                Code an E-Mail senden
                @if($cooldown>0)
                    <span class="ml-2 text-white/70">({{ $cooldown }}s)</span>
                @endif
            </button>
        </div>

        {{-- Code --}}
        <div class="">
            <label class="block text-white/70 text-sm mb-1">6-stelliger Code</label>
            <input
                type="text"
                inputmode="numeric"
                maxlength="6"
                placeholder="••••••"
                wire:model.defer="code"
                class="w-full h-12 rounded-xl border border-white/10 bg-white/[0.05] px-3 text-white/90 tracking-[0.35em] text-center"
            >
        </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 items-center 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>

            @if($alreadyActive)
                <button wire:click="disable"
                        class="inline-flex items-center gap-2 rounded-lg px-4 py-2 text-sm bg-rose-500/20 text-rose-200 border border-rose-400/40 hover:bg-rose-500/30">
                    Deaktivieren
                </button>
            @else
                <button wire:click="$dispatch('security:totp-email: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>
            @endif
        </div>
    </div>
@endpush