@extends('layouts.app')
@section('content')
<section class="mx-auto max-w-md card p-8">
    <div class="mb-6 text-center">
        <div class="mx-auto flex h-16 w-16 items-center justify-center rounded-2xl bg-teal-600 text-2xl text-white">
            <i class="fa-solid fa-envelope-circle-check"></i>
        </div>
        <h1 class="mt-4 text-3xl font-black text-slate-950">Verifikasi Login</h1>
        <p class="mt-2 text-slate-500">Masukkan kode 6 digit yang dikirim ke email akun Anda.</p>
    </div>

    <form method="post" action="{{ route('login.verify') }}" class="grid gap-4">
        @csrf
        <div>
            <label class="label">Kode Verifikasi</label>
            <input class="field text-center text-2xl tracking-[.45em]" type="text" name="code" maxlength="6" inputmode="numeric" autocomplete="one-time-code" required autofocus>
            @error('code')<p class="mt-2 text-sm font-bold text-rose-600">{{ $message }}</p>@enderror
        </div>
        <button class="btn-primary w-full"><i class="fa-solid fa-shield-halved"></i> Verifikasi dan Masuk</button>
    </form>

    <form method="post" action="{{ route('login.verify.resend') }}" class="mt-4">
        @csrf
        <button class="w-full rounded-2xl border border-slate-200 bg-white px-4 py-3 text-sm font-black text-slate-600 transition hover:bg-slate-50" type="submit">
            Kirim ulang kode
        </button>
    </form>
</section>
@endsection