@page
@model Jerguero.Pages.LoginModel

<h1 class="text-3xl font-bold text-center my-4 fixed top-0 w-screen">
    Jerguero
</h1>
<div class="flex items-center h-screen w-full">
    <div class="container mx-auto" hx-ext="response-targets">
        <p class="my-4 p-2 rounded bg-c-bg-2 text-c-on-bg shadow shadow-zinc-500">
            ¡Iniciá sesión para comenzar a crear definiciones!
        </p>
        <form
            class="my-4 py-4 px-2 rounded bg-c-bg-2 text-c-on-bg shadow shadow-zinc-500"
            method="post"
        >
            <div asp-validation-summary="ModelOnly" class="text-red-400"></div>
            <input type="hidden" value="@Model.RedirectUrl">

            <div class="py-2">
                <label class="text-sm opacity-85" asp-for="LoginPerson.Email">Correo electronico:</label>
                <br />
                <input asp-for="LoginPerson.Email" 
                    class="inline-block w-full rounded bg-c-bg text-c-on-bg py-2 px-1
                            disabled:cursor-not-allowed disabled:opacity-50 transition-opacity"
                    type="email" required />
                <span asp-validation-for="LoginPerson.Email" class="text-red-400"></span>
            </div>

            <div class="py-2">
                <label asp-for="LoginPerson.Password" class="text-sm opacity-85" for="login-password">Contraseña:</label>
                <br />
                <input asp-for="LoginPerson.Password" 
                    class="inline-block w-full rounded bg-c-bg text-c-on-bg py-2 px-1
                            disabled:cursor-not-allowed disabled:opacity-50 transition-opacity"
                    type="password" pattern=".{8,}" required />
                <span asp-validation-for="LoginPerson.Password" class="text-red-400"></span>
            </div>

            <div class="text-center pt-2">
                <button type="submit" class="py-1 px-2 rounded bg-c-primary text-c-on-primary hover:underline
                        disabled:cursor-not-allowed disabled:animate-pulse" data-loading-disable>
                    Iniciar sesión
                </button>
            </div>

            <div id="login-result" class="text-center pt-2"></div>
            <div id="login-result-error" class="text-center pt-2 text-red-400"></div>
        </form>

    </div>
</div>


@section Scripts {
    <partial name="_ValidationScriptsPartial" />
}