@extends('layouts.auth')

@section('title', 'Reset your password')

@section('content')
<h1 class="display text-3xl">Forgot your password?</h1>
<p class="mt-3 text-sm leading-relaxed" style="color: var(--ink-soft);">
    Give us the email you signed up with and we'll send a link to set a new one.
</p>

@if(session('status'))
    <div class="mt-7 border-l-2 pl-4 py-1" style="border-color: var(--good);">
        <p class="text-sm font-semibold" style="color: var(--good);">{{ session('status') }}</p>
    </div>
@endif

@if($errors->any())
    <div class="mt-7 border-l-2 pl-4 py-1" style="border-color: var(--bad);">
        <ul class="space-y-1 text-sm" style="color: var(--bad);">
            @foreach($errors->all() as $error)<li>{{ $error }}</li>@endforeach
        </ul>
    </div>
@endif

<form method="POST" action="{{ route('password.email') }}" class="mt-8 space-y-5">
    @csrf
    <div>
        <label for="email" class="field-label">Email</label>
        <input id="email" type="email" name="email" value="{{ old('email') }}" required
               autocomplete="email" autofocus class="field">
    </div>
    <button type="submit" class="btn btn-primary w-full">Send the link</button>
</form>

<p class="mt-6 text-sm" style="color: var(--muted);">
    <a href="{{ route('login') }}" class="underline decoration-2 underline-offset-4">Back to log in</a>
</p>
@endsection