<?php
use Livewire\Attributes\{Validate, Title};
use Livewire\Component;
use Illuminate\Support\Str;
use Illuminate\Auth\Events\Lockout;
use Illuminate\Support\Facades\{Auth, RateLimiter, Session};
use Illuminate\Validation\ValidationException;
?>

<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="{{ __('Connexion') }}"
            subtitle="{{ __('Accédez à votre compte pour gérer vos commandes') }}"
            class="shadow-xl bg-base-100"
            separator
            progress-indicator
        >
            <x-form wire:submit="login" class="space-y-4">
                <x-input
                    label="{{ __('Adresse e-mail') }}"
                    wire:model="email"
                    icon="o-envelope"
                    type="email"
                    required
                />

                <x-password
                    label="{{ __('Mot de passe') }}"
                    wire:model="password"
                    clearable
                    required
                />

                <div class="flex items-center justify-between pt-1">
                    <x-checkbox
                        label="{{ __('Rester connecté') }}"
                        wire:model="remember"
                        class="checkbox-primary checkbox-sm"
                    />

                    <x-button
                        label="{{ __('Mot de passe oublié ?') }}"
                        class="btn-ghost btn-xs text-base-content/70 hover:text-primary"
                        link="/forgot-password"
                    />
                </div>

                <p class="text-xs text-base-content/60 pt-2">
                    <span class="text-error">*</span> @lang('Champs obligatoires')
                </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="{{ __('Créer un compte') }}"
                            class="btn-ghost btn-sm w-full sm:w-auto order-2 sm:order-1"
                            link="/register"
                        />

                        <x-button
                            label="{{ __('Se connecter') }}"
                            type="submit"
                            icon-right="o-arrow-right-end-on-rectangle"
                            class="btn-primary btn-sm w-full sm:w-auto order-1 sm:order-2"
                            spinner="login"
                        />
                    </div>
                </x-slot:actions>
            </x-form>
        </x-card>
    </div>
</div>