<?php
use Illuminate\Support\Facades\Password;
use Livewire\Attributes\{Validate, Title};
use Livewire\Component;
?>

<div class="flex items-center justify-center min-h-[calc(100vh-16rem)] py-12 px-4">
    <div class="w-full max-w-md">
        <x-card
            title="{{ __('Mot de passe oublié') }}"
            subtitle="{{ __('Saisissez votre e-mail pour recevoir un lien de réinitialisation') }}"
            class="shadow-xl bg-base-100"
            separator
            progress-indicator
        >
            {{-- Message de confirmation d'envoi du mail --}}
            @if (session('status'))
                <x-alert icon="o-check-circle" class="alert-success text-xs mb-4">
                    {{ session('status') }}
                </x-alert>
            @endif

            <x-form wire:submit="sendPasswordResetLink" class="space-y-4">
                <x-input
                    label="{{ __('Adresse e-mail') }}"
                    wire:model="email"
                    icon="o-envelope"
                    type="email"
                    required
                />

                <p class="text-xs text-base-content/60 pt-1">
                    <span class="text-error">*</span> @lang('Champ obligatoire')
                </p>

                <x-slot:actions>
                    <div class="flex flex-col sm:flex-row items-center justify-between gap-3 w-full pt-2">
                        <x-button
                            label="{{ __('Retour') }}"
                            type="button"
                            icon="o-arrow-left"
                            class="btn-ghost btn-sm w-full sm:w-auto order-2 sm:order-1"
                            link="{{ route('login') }}"
                        />

                        <x-button
                            label="{{ __('Envoyer le lien') }}"
                            type="submit"
                            icon-right="o-paper-airplane"
                            class="btn-primary btn-sm w-full sm:w-auto order-1 sm:order-2"
                            spinner="sendPasswordResetLink"
                        />
                    </div>
                </x-slot:actions>
            </x-form>
        </x-card>
    </div>
</div>