@extends('layouts.app')
@section('title', 'Enter code · AGS Account')

@section('content')
  <div style="max-width: 420px; margin: 8vh auto 0;">
    <h1 style="margin-bottom: 6px;">Enter the code</h1>
    <p class="muted" style="margin-bottom: 24px;">
      We sent a 6-digit code to <strong>{{ $hint }}</strong>. It expires in 10 minutes.
    </p>
    <div class="card">
      <form method="POST" action="{{ route('verify.submit') }}">
        @csrf
        <label for="code">6-digit code</label>
        <input type="text" id="code" name="code" inputmode="numeric" pattern="[0-9]{6}"
               maxlength="6" autocomplete="one-time-code" required autofocus
               style="letter-spacing: 0.4em; text-align: center; font-size: 22px;">
        <button type="submit" class="btn" style="margin-top: 14px; width: 100%;">
          Verify &amp; sign in
        </button>
      </form>
    </div>
    <p style="text-align: center; margin-top: 16px;">
      <a href="{{ route('login') }}" class="muted">Use a different address</a>
    </p>
  </div>
@endsection