{{ define "title" }}Log in{{end}}

{{ define "body" }}
<div class="flex items-center justify-center min-h-screen p-8 pt-16">
    <div class="absolute top-2 left-2">
        {{ template "logo" . }}
    </div>
    {{template "login_form" . }}
</div>
{{ end }}

{{ define "login_form" }}
<form hx-post="/login" hx-swap="outerHTML" class="w-full max-w-sm flex flex-col gap-4">
    <div>
        <h1 class="flex gap-1 items-center text-lg font-semibold">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor"
                style="height: 20px; width: auto;">
                <path fill-rule="evenodd"
                    d="M10 1a4.5 4.5 0 0 0-4.5 4.5V9H5a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2v-6a2 2 0 0 0-2-2h-.5V5.5A4.5 4.5 0 0 0 10 1Zm3 8V5.5a3 3 0 1 0-6 0V9h6Z"
                    clip-rule="evenodd" />
            </svg>

            Log in
        </h1>
        <h5 class="text-sm">
            Please fill in your credentials to proceed
        </h5>
    </div>
    <div>
        <fieldset class="fieldset">
            <legend class="fieldset-legend">Email</legend>
            <input class="input w-full {{ with .Form.Errors.Email }} input-error {{ end }}" id="login_form--email"
                name="email" type="email" autocomplete="email" value="{{ .Form.Email}}" placeholder="email@example.com"
                required />
            {{ with .Form.Errors.Email }}
            <div class="label text-red-500">{{ . }}</div>
            {{ end }}
        </fieldset>
        <fieldset class="fieldset">
            <legend class="fieldset-legend">Password</legend>
            <input class="input w-full {{ with .Form.Errors.Password }} input-error {{ end }}" id="login_form--password"
                name="password" type="password" autocomplete="current-password" placeholder="••••••••" required
                hx-preserve />
            {{ with .Form.Errors.Password }}
            <div class="label text-red-500">{{ . }}</div>
            {{ end }}
        </fieldset>
    </div>
    <button type="submit" class="btn btn-neutral">
        Submit
    </button>
</form>
{{ end }}