@extends('layouts.storefront')

@section('body_attributes', 'data-page="auth-password-request"')
@section('title', 'Reset Access | ' . config('app.name'))
@section('meta_description', 'Request a password reset link to regain access to your Clusterfix account.')

@section('content')
    <x-auth.shell
        eyebrow="ACCESS RECOVERY"
        title="Reset your password"
        description="We’ll send a reset link to your email address if it belongs to an existing account."
        :highlights="[
            ['icon' => 'mail', 'title' => 'Email delivery', 'text' => 'The reset link is sent to your inbox.'],
            ['icon' => 'shield', 'title' => 'Secure request', 'text' => 'Only registered email addresses can request a reset.'],
        ]"
    >
        @if (session('status'))
            <div class="mb-6 rounded-xl border border-emerald-500/20 bg-emerald-500/10 px-4 py-3 text-sm text-emerald-700">
                {{ session('status') }}
            </div>
        @endif

        @if ($errors->any())
            <div class="mb-6 rounded-xl border border-red-500/20 bg-red-500/10 px-4 py-3 text-sm text-red-700">
                <ul class="list-disc pl-5 space-y-1">
                    @foreach ($errors->all() as $error)
                        <li>{{ $error }}</li>
                    @endforeach
                </ul>
            </div>
        @endif

        <form method="POST" action="{{ route('auth.password.request.send') }}" class="space-y-4">
            @csrf

            <div>
                <label class="block text-xs font-semibold text-on-surface mb-1.5 uppercase tracking-wider" for="reset-email">Email address</label>
                <input id="reset-email" name="email" value="{{ old('email') }}" type="email" class="w-full rounded-xl border border-outline-variant bg-surface-container-low text-body-sm py-3 px-4 focus:ring-primary focus:border-primary" placeholder="you@workshop.com" required>
            </div>

            <button type="submit" class="bg-primary text-on-primary font-label-md text-label-md px-6 py-3.5 rounded-xl hover:bg-primary-container transition-all active:scale-95 shadow-md shadow-primary/10 glow-button flex items-center justify-center gap-2 w-full font-bold">
                <span>Send reset link</span>
                <span class="material-symbols-outlined text-base">send</span>
            </button>
        </form>

        <div class="mt-6 flex flex-col sm:flex-row gap-3 text-sm">
            <a href="{{ route('auth.login') }}" class="inline-flex items-center justify-center rounded-xl border border-outline-variant px-5 py-3 text-on-surface-variant hover:text-primary hover:border-primary transition-colors">Return to login</a>
            <a href="{{ route('auth') }}" class="inline-flex items-center justify-center rounded-xl border border-outline-variant px-5 py-3 text-on-surface-variant hover:text-primary hover:border-primary transition-colors">Back to access chooser</a>
        </div>
    </x-auth.shell>
@endsection