@extends('layouts.app')

@section('body_class', 'page-donor-auth')

@section('content')
<section class="dauth">
    <div class="container">
        <div class="dauth__card">
            @include('donor.partials.auth-steps', ['step' => 2])

            <header class="dauth__head">
                <span class="dauth__badge dauth__badge--blue" aria-hidden="true"><svg class="i"><use href="#i-lock"/></svg></span>
                <div>
                    <h1>Enter your code</h1>
                    <p class="dauth__sub">Sent to <strong class="dauth__email">{{ $email }}</strong>. It works for 10 minutes.</p>
                </div>
            </header>

            <form class="dauth__form" action="{{ route('donor.verify.store') }}" method="post" novalidate>
                @csrf
                @include('partials.flash')
                <div class="field @error('code') has-error @enderror">
                    <label class="field__label" for="code">Your 6-digit code</label>
                    <input class="input input--code" id="code" name="code" type="text" inputmode="numeric" pattern="[0-9]{6}" maxlength="6" autocomplete="one-time-code" placeholder="&bull;&bull;&bull;&bull;&bull;&bull;" autofocus required
                           @error('code') aria-invalid="true" aria-describedby="code-err" @enderror>
                    @error('code')<p class="field__err" id="code-err">{{ $message }}</p>@enderror
                </div>
                <button class="btn btn--green btn--lg btn--block" type="submit">Sign in<svg class="i" aria-hidden="true"><use href="#i-arrow"/></svg></button>
            </form>

            <p class="dauth__note"><svg class="i" aria-hidden="true"><use href="#i-mail"/></svg>No email? Check your spam or promotions folder.</p>
            <p class="dauth__foot"><a href="{{ route('donor.login') }}">Use a different email or send a new code</a></p>
        </div>
    </div>
</section>
@endsection