@extends('layout.app')

@section('body')

<main class="w-full my-10 flex flex-col items-center justify-center px-4">
    <div class="max-w-sm w-full text-gray-600">
        <div class="text-center">
            <a href="{{ Route('homepage') }}"><img src="{{ asset('img/logo.png') }}" width="150" class="mx-auto" /></a>
            <div class="mt-5 space-y-2">
                <h3 class="text-gray-800 text-2xl font-bold sm:text-3xl">Franc'App</h3>
                {{-- <p class="">Don't have an account? <a href="javascript:void(0)" class="font-medium text-indigo-600 hover:text-indigo-500">Sign up</a></p> --}}
            </div>
        </div>
        <form method="POST" action="{{ Route('login.store') }}" class="mt-8 space-y-5">
            @csrf
            <div>
                <label class="font-medium">Email</label>
                <input type="email" name="email" required autofocus class="w-full mt-2 px-3 py-2 text-gray-500 bg-transparent outline-none border focus:border-(--color-orange) shadow-sm rounded-lg"/>
            </div>
            @error('email')
                <span class="msgError">{{ $message }}</span>
            @enderror
            <div>
                <label class="font-medium">Mot de passe</label>
                <input type="password" name="password" required class="w-full mt-2 px-3 py-2 text-gray-500 bg-transparent outline-none border focus:border-(--color-orange) shadow-sm rounded-lg" />
            </div>
                <x-button class="w-full">Connexion</x-button>
            <div class="text-center">
                <a href="javascript:void(0)" class="hover:text-(--color-orange)">Mot de passe oublié ?</a>
            </div>
        </form>
    </div>
</main>

@endsection