{{ template "headers.html" . }}

<section class="md:h-screen py-36 flex items-center bg-[url('../../assets/images/hosting/bg-hosting.jpg')] bg-no-repeat bg-center bg-cover">
    <div class="absolute inset-0"></div>
    <div class="container">
        <div class="flex text-center">
            <div class="w-full">
                <div class="max-w-[400px] m-auto p-6 bg-white dark:bg-slate-900 shadow-md dark:shadow-gray-800 rounded-md">
                    <h5 class="my-4 text-xl font-semibold">{{"Mot de passe perdu :" | t}}</h5>
                    <p class="mb-6 text-slate">{{ "Veuillez saisir votre adresse électronique. Vous recevrez un nouveau mot de passe par e-mail." | t }}</p>
                    <div class="grid grid-cols-1">
                        <form class="ltr:text-left rtl:text-right" method="post" action="/forgot-password">
                            <div class="mb-4">
                                <input id="LoginEmail" name="username" type="email" class="text-xl font-bold text-center text-indigo-600 shadow-md dark:shadow-gray-800 form-input" placeholder="you@mail.com">
                            </div>
                            <div class="mb-4">
                                <input type="submit" class="w-full text-white bg-indigo-600 rounded-md border-indigo-600 btn hover:bg-indigo-700 hover:border-indigo-700" value="{{ "Connexion" | t }}">
                            </div>
                        </form>
                        <div class="text-center">
                            <a href="/{{ if .isConnected }}signout{{ else }}signin{{ end }}" class="text-slate">{{"Annuler" | t}}</a>
                        </div>
                    </div>
                </div>
                <div class="mt-3 max-w-[400px] m-auto p-6 bg-white dark:bg-slate-900 shadow-md dark:shadow-gray-800 rounded-md">
                    <div class="grid grid-cols-1">
                        <div class="text-center">
                            <span class="text-slate-400 ltr:mr-2 rtl:ml-2">{{"Nouvel arrivant ?" | t}}</span> <a href="/signup" class="inline-block font-bold text-black dark:text-white">{{"Créez votre compte" | t}}</a>
                        </div>
                    </div>
                </div> 
            </div>
        </div>
    </div>
</section>

{{ template "footer.html" . }}