@extends('layouts.auth', ['title' => 'Forgot Password - Booklio'])

@section('content')
    <x-ui.card padding="p-6 sm:p-7">
        <div class="mb-6">
            <span class="flex h-12 w-12 items-center justify-center rounded-xl bg-blue-50 text-booklio-primary">
                <x-ui.icon name="mail" class="h-6 w-6" />
            </span>
            <h1 class="mt-4 text-3xl font-extrabold tracking-tight text-booklio-dark">Forgot Password</h1>
            <p class="mt-2 text-sm leading-6 text-booklio-muted">Enter your account email and Booklio will send reset instructions.</p>
        </div>

        @if (session('status'))
            <div class="mb-4 rounded-lg border border-emerald-200 bg-emerald-50 px-4 py-3 text-sm font-semibold text-emerald-700">
                {{ session('status') }}
            </div>
        @endif

        <form method="POST" action="{{ route('password.email') }}" class="space-y-4">
            @csrf
            <x-form.input name="email" type="email" label="Email" value="owner@booklio.test" placeholder="you@example.com" />
            <x-ui.button class="w-full" type="submit">Send reset link</x-ui.button>
        </form>

        <a href="{{ route('login') }}" class="mt-6 inline-flex text-sm font-bold text-booklio-primary hover:text-blue-700">Back to login</a>
    </x-ui.card>
@endsection