@extends('layouts.guest')
@section('title', 'Enter your code – ' . \App\Models\Setting::get('system_short_name', 'TRACE'))
@section('content')

<h1 class="h3 fw-bold mb-1">Enter your code</h1>
<p class="text-muted mb-4" style="font-size:.9rem">
    If an account exists for <strong class="text-body">{{ $email }}</strong>,
    we've sent a {{ \App\Models\LoginCode::LENGTH }}-digit code. It expires in {{ $minutes }} minutes.
</p>

@if($errors->any())
<div class="alert alert-danger d-flex align-items-start gap-2 py-2">
    <i class="bi bi-exclamation-circle mt-1"></i>
    <div>{{ $errors->first() }}</div>
</div>
@endif

<form method="POST" action="{{ route('login.code.verify.submit') }}" class="mb-3">
    @csrf
    <div class="mb-3">
        <label class="form-label" for="code">One-time code</label>
        <input type="text" id="code" name="code" class="form-control otp-input"
               required autofocus autocomplete="one-time-code" inputmode="numeric"
               pattern="[0-9]*" maxlength="{{ \App\Models\LoginCode::LENGTH }}"
               placeholder="000000">
    </div>

    <button type="submit" class="btn btn-primary w-100">
        Sign in <i class="bi bi-arrow-right ms-1"></i>
    </button>
</form>

<form method="POST" action="{{ route('login.code.send') }}">
    @csrf
    <input type="hidden" name="email" value="{{ $email }}">
    <button type="submit" class="btn btn-google w-100">
        <i class="bi bi-arrow-clockwise me-1"></i>Send a new code
    </button>
</form>

<p class="text-center small text-muted mt-4 mb-0">
    Wrong address? <a href="{{ route('login.code') }}" class="fw-semibold text-decoration-none">Start again</a>
</p>
@endsection