@extends('adminlte::auth.auth-page', ['authType' => 'login'])

@section('title', 'Verify Sign In')

@section('auth_header')
    <div class="text-center">
        <div class="h5 mb-1">Check your email</div>
        <div class="small text-muted">Enter the 6-digit code sent to {{ $email }}</div>
    </div>
@stop

@section('auth_body')
    @if(session('status'))
        <x-adminlte-alert theme="success" dismissable>
            {{ session('status') }}
        </x-adminlte-alert>
    @endif

    <form method="POST" action="{{ route('two-factor.verify') }}">
        @csrf

        <div class="input-group mb-3">
            <input type="text" inputmode="numeric" maxlength="6" name="code"
                   class="form-control @error('code') is-invalid @enderror"
                   placeholder="Verification code" autofocus required>
            <div class="input-group-append">
                <div class="input-group-text"><span class="fas fa-shield-alt"></span></div>
            </div>
            @error('code')
                <span class="invalid-feedback" role="alert"><strong>{{ $message }}</strong></span>
            @enderror
        </div>

        <button type="submit" class="btn btn-primary btn-block">
            <i class="fas fa-check mr-1"></i> Verify
        </button>
    </form>

    <form method="POST" action="{{ route('two-factor.resend') }}" class="mt-3">
        @csrf
        <button type="submit" class="btn btn-outline-secondary btn-block">
            <i class="fas fa-paper-plane mr-1"></i> Send New Code
        </button>
    </form>
@stop

@section('auth_footer')
    <div class="text-center">
        <a href="{{ route('login') }}">Back to sign in</a>
    </div>
@stop

@push('css')
    <style>
        .login-page {
            background: #eef3f8;
            min-height: 100vh;
        }

        .login-box {
            max-width: calc(100% - 2rem);
            width: 420px;
        }

        .login-box .card {
            border: 0;
            border-radius: 10px;
            box-shadow: 0 18px 45px rgba(9, 36, 63, .12);
            overflow: hidden;
        }

        .login-logo a {
            color: #1f2d3d;
            display: block;
            font-size: 0;
            font-weight: 700;
        }

        .login-logo img.sariel-auth-logo {
            display: block;
            height: auto;
            margin: 0 auto .75rem;
            max-width: min(280px, 84vw);
        }

        .btn,
        .form-control,
        .input-group-text {
            border-radius: 6px;
        }
    </style>
@endpush