@extends('layouts.auth')
@section('title', 'Verify email')
@section('auth_title', 'Verify your email')
@section('auth_subtitle', 'Enter the 6-digit code we just emailed to ' . e(auth()->user()->email) . '.')

@section('content')

@if(session('status') === 'verification-code-sent')
    <div class="auth-alert auth-alert-success" role="status">
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><path d="M9 12l2 2 4-4"/></svg>
        <span>A new code has been sent. Please check your inbox.</span>
    </div>
@endif

@if($errors->any())
    <div class="auth-alert auth-alert-error" role="alert">
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><line x1="12" y1="8" x2="12" y2="12"/><line x1="12" y1="16" x2="12.01" y2="16"/></svg>
        <span>{{ $errors->first() }}</span>
    </div>
@endif

<div class="auth-form">
    <form method="POST" action="{{ route('verification.verify') }}" autocomplete="off">
        @csrf
        <label for="code" class="auth-label">Verification code</label>
        <input
            id="code"
            name="code"
            type="text"
            inputmode="numeric"
            pattern="[0-9]{6}"
            maxlength="6"
            required
            autofocus
            class="auth-input"
            style="letter-spacing: .35em; text-align: center; font-size: 20px;"
            placeholder="000000"
            value="{{ old('code') }}"
        >

        <button type="submit" class="auth-submit">
            Verify email
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="20 6 9 17 4 12"/></svg>
        </button>
    </form>

    <form method="POST" action="{{ route('verification.send') }}" style="margin-top: 12px;">
        @csrf
        <button type="submit" class="auth-submit auth-submit-secondary">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M22 2L11 13"/><path d="M22 2l-7 20-4-9-9-4 20-7z"/></svg>
            Resend code
        </button>
    </form>

    <form method="POST" action="{{ route('logout') }}" style="margin-top: 12px;">
        @csrf
        <button type="submit" class="auth-submit auth-submit-secondary">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 21H5a2 2 0 01-2-2V5a2 2 0 012-2h4"/><path d="M16 17l5-5-5-5"/><path d="M21 12H9"/></svg>
            Sign out
        </button>
    </form>
</div>

@endsection