@page
@model JergueroCS.Pages.NewDefinitionModel
@{
}

<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">
            ¡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"
            hx-post="/login"
            hx-swap="innerHTML"
            hx-target="#login-result"
            hx-target-error="#login-result-error"
        >
            <input hidden name="login_redirect" value=(redirect_url) />

            <div class="py-2">
                <label class="text-sm opacity-85" for="login-email">Correo electronico:</label>
                <br />
                <input 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" id="login-email"
                    name="login_email" type="email" required data-loading-disable="true" />
            </div>

            <div class="py-2">
                <label class="text-sm opacity-85" for="login-password">Contraseña:</label>
                <br />
                <input 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" id="login-password"
                    name="login_password" type="password" min="8" max="64" required data-loading-disable="true" />
            </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>