{{-- resources/views/admin/auth/twofactor-login.blade.php --}}
@extends('admin.layouts.app')

@section('content')
    <div class="azp-page" style="max-width:420px;margin:40px auto 0;">
        <div class="card">
            <div class="card-body" style="padding:22px 20px;">
                <div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:8px;">
                    <div>
                        <div class="azp-page-title" style="font-size:18px;margin:0;">
                            Confirmar acesso
                        </div>
                        <div class="azp-page-subtitle" style="margin-top:3px;">
                            Introduz o código de autenticação de dois fatores.
                        </div>
                    </div>
                    <span class="azp-badge-pill" style="background:#eef4ff;color:#29418a;border-radius:999px;padding:3px 9px;font-size:10px;">
                        2º passo
                    </span>
                </div>

                @if($errors->any())
                    <div class="flash" style="border-color:#ffd3d3;background:#fff5f5;margin-bottom:12px;">
                        <ul class="small" style="margin:6px 0 0 18px">
                            @foreach($errors->all() as $error) <li>{{ $error }}</li> @endforeach
                        </ul>
                    </div>
                @endif

                <p class="small" style="margin:0 0 14px;color:#555;line-height:1.5;">
                    Abre a tua app de autenticação (Google Authenticator, etc.) e escreve o código de 6 dígitos
                    correspondente à conta <strong>{{ $admin->email }}</strong>.
                </p>

                <form action="{{ route('admin.twofactor.verify') }}" method="POST">
                    @csrf

                    <div class="field">
                        <label class="label">Código de 6 dígitos</label>
                        <input type="text"
                               name="code"
                               inputmode="numeric"
                               pattern="[0-9]*"
                               autocomplete="one-time-code"
                               placeholder="000000"
                               autofocus>
                        <div class="small" style="margin-top:4px;color:#777;">
                            O código é temporário e renova a cada 30 segundos.
                        </div>
                    </div>

                    <button type="submit" class="btn primary" style="width:100%;margin-top:12px;">
                        Confirmar e entrar
                    </button>
                </form>

                <div class="small" style="margin-top:14px;color:#999;text-align:center;">
                    Se não reconheces este pedido, fecha a sessão e altera a tua password.
                </div>
            </div>
        </div>
    </div>
@endsection