<section>
    @php($twoFactorEnabled = (bool) auth()->user()->two_factor_confirmed_at)

    <div class="rounded-xl border border-ink-100 bg-ink-50 p-4">
        <div class="flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between">
            <div class="flex items-start gap-3">
                <span class="grid h-10 w-10 shrink-0 place-items-center rounded-xl bg-white text-brand-600 shadow-sm">
                <svg class="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2h-1V7a5 5 0 00-10 0v4H6a2 2 0 00-2 2v6a2 2 0 002 2zm3-10V7a3 3 0 016 0v4H9z"/></svg>
                </span>
                <div>
                    <p class="text-sm font-black text-ink-900">
                        {{ $twoFactorEnabled ? 'Tu cuenta tiene 2FA activo.' : 'Tu cuenta todavía no tiene 2FA activo.' }}
                    </p>
                    <p class="mt-1 text-sm leading-6 text-ink-500">
                        {{ $twoFactorEnabled ? 'Para desactivarlo, confirma primero tu contraseña actual.' : 'Para activarlo, confirma tu contraseña actual y te enviaremos el código cuando inicies sesión.' }}
                    </p>
                </div>
            </div>
            <span class="inline-flex w-fit items-center gap-2 rounded-full px-3 py-1.5 text-xs font-black {{ $twoFactorEnabled ? 'bg-emerald-50 text-emerald-700' : 'bg-amber-50 text-amber-700' }}">
                <span class="h-2 w-2 rounded-full {{ $twoFactorEnabled ? 'bg-emerald-500' : 'bg-amber-500' }}"></span>
                {{ $twoFactorEnabled ? 'Activo' : 'Inactivo' }}
            </span>
        </div>
    </div>

    @if ($twoFactorEnabled)
        <form method="POST" action="{{ route('two-factor.disable') }}" class="mt-6 space-y-5">
            @csrf
            @method('DELETE')

            <div>
                <x-input-label for="disable_2fa_password" value="Contraseña actual" class="text-xs font-bold uppercase tracking-[0.14em] text-ink-500" />
                <x-text-input id="disable_2fa_password" name="password" type="password"
                              class="mt-2 block w-full max-w-md rounded-xl border-ink-200 bg-ink-50 px-4 py-3 text-sm font-semibold shadow-none transition focus:border-brand-500 focus:bg-white focus:ring-2 focus:ring-brand-500/20"
                              required autocomplete="current-password" />
                <x-input-error :messages="$errors->get('password')" class="mt-2" />
            </div>

            <x-danger-button class="justify-center rounded-full px-6 py-3 text-xs font-black">
                Desactivar 2FA
            </x-danger-button>
        </form>
    @else
        <form method="POST" action="{{ route('two-factor.enable') }}" class="mt-6 space-y-5">
            @csrf

            <div>
                <x-input-label for="enable_2fa_password" value="Contraseña actual" class="text-xs font-bold uppercase tracking-[0.14em] text-ink-500" />
                <x-text-input id="enable_2fa_password" name="password" type="password"
                              class="mt-2 block w-full max-w-md rounded-xl border-ink-200 bg-ink-50 px-4 py-3 text-sm font-semibold shadow-none transition focus:border-brand-500 focus:bg-white focus:ring-2 focus:ring-brand-500/20"
                              required autocomplete="current-password" />
                <x-input-error :messages="$errors->get('password')" class="mt-2" />
            </div>

            <x-primary-button class="justify-center rounded-full bg-ink-950 px-6 py-3 text-xs font-black hover:bg-ink-800">
                Activar 2FA
            </x-primary-button>
        </form>
    @endif
</section>
