@extends('layouts.public.base')

@section('page.title', 'Mon espace')

@section('page.content')
    <div class="flex justify-center items-center h-[70vh]">
        <div class="flex flex-col items-center max-w-xl mx-auto w-full">
            <img src="{{ asset('images/logos/lockit.png') }}" alt="Lockit" class="w-32 h-auto object-contain mb-2">
            <p class="mb-4 italic">Bienvenue dans votre espace client</p>
            <form action="#" method="GET" class="flex flex-col items-center w-full">
                <div class="grid grid-cols-1 lg:grid-cols-2 gap-4 w-full">
                    @include('components.forms.inputs.classic', [
                        'id' => 'username',
                        'placeholder' => "Nom d'utilisateur"
                    ])

                    @include('components.forms.inputs.classic', [
                        'id' => 'password',
                        'type' => 'password',
                        'placeholder' => "Mot de passe"
                    ])
                </div>

                <button type="submit" class="px-4 py-2 text-white bg-lockit-blue rounded-full font-serif uppercase shadow mt-4 w-full">
                    Se connecter
                </button>
            </form>
        </div>
    </div>
@endsection