@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' => 1])

            <header class="dauth__head">
                <span class="dauth__badge" aria-hidden="true"><svg class="i"><use href="#i-mail"/></svg></span>
                <div>
                    <h1>Donor sign in</h1>
                    <p class="dauth__sub">See your donations, download receipts and manage monthly giving.</p>
                </div>
            </header>

            <form class="dauth__form" action="{{ route('donor.send') }}" method="post" novalidate>
                @csrf
                <x-field name="email" label="Email you donated with" type="email" required autocomplete="email" inputmode="email" />
                <button class="btn btn--green btn--lg btn--block" type="submit">Send me a code<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-shield"/></svg>No password needed. Code valid for 10 minutes.</p>
            <p class="dauth__foot">New here? <a href="{{ route('donate') }}">Make your first donation</a> and your account is created automatically.</p>
        </div>
    </div>
</section>
@endsection