{{ $model := . }}


<div class="flex max-w-md mx-auto !pt-44">
	<div class="flex-col w-full">
		{{- if not $model.redirect_url -}}
			<a href="/" class="text-gray-700 hover:text-slate-950">
				<i class="ri-arrow-left-s-line"></i> Startseite
			</a>
		{{- else -}}
			<a href="{{ $model.redirect_url }}" class="text-gray-700 hover:text-slate-950">
				<i class="ri-arrow-left-s-line"></i> Zurück
			</a>
		{{- end -}}
		<div class="flex justify-center mt-8 items-baseline">
			<div>
				<img class="h-18 w-18 border" src="/assets/favicon.png" />
			</div>
		</div>
		<h1 class="text-2xl self-baseline text-center w-full my-6 text-slate-900">Musenalm | Login</h1>
		<form
			class="w-full grid grid-cols-3 gap-4"
			method="POST"
			hx-boost="false"
			x-target.4xx="ajax-replace"
			x-target.away="_top"
			x-target="body"
			aria-label="Login-Formular">
			<div id="ajax-replace" class="col-span-3">
				{{ template "_usermessage" $model }}
				<input
					type="hidden"
					name="csrf_nonce"
					id="csrf_nonce"
					required
					value="{{ $model.csrf_nonce }}" />
				<input
					type="hidden"
					name="csrf_token"
					id="csrf_token"
					required
					value="{{ $model.csrf_token }}" />
			</div>
			<div
				class="col-span-3 border-2 border-transparent focus-within:border-slate-600 px-2 py-1 pb-1.5
				bg-slate-200 focus-within:bg-slate-50 rounded-md transition-all duration-100">
				<label for="username" class="text-sm text-gray-700 font-bold">
					E-Mail <i class="ri-at-line"></i>
				</label>
				<input
					type="email"
					name="username"
					id="username"
					class="mt-1 block w-full rounded-md focus:border-none focus:outline-none"
					placeholder=""
					required
					autocomplete="username"
					value=""
					autofocus />
			</div>
			<div
				class="col-span-3 border-2 border-transparent focus-within:border-slate-600 px-2 py-1 pb-1.5
				bg-slate-200 focus-within:bg-slate-50 rounded-md transition-all duration-100">
				<label for="password" class="text-sm text-gray-700 font-bold">
					Passwort <i class="ri-key-2-line"></i>
				</label>
				<input
					type="password"
					name="password"
					id="password"
					class="mt-1 block w-full rounded-md focus:border-none focus:outline-none"
					placeholder=""
					required
					autocomplete="current-password" />
			</div>
			<div class="col-start-2 col-span-2">
				<div class="flex justify-end items-center">
					<input
						type="checkbox"
						name="persist"
						id="persist"
						class="h-4 w-4 text-slate-600 focus:ring-slate-500 border-gray-300 rounded" />
					<label for="persist" class="ml-2 block text-sm text-gray-900"> Angemeldet bleiben </label>
				</div>
			</div>
			<div class="col-span-3">
				<button
					type="submit"
					class="w-full inline-flex justify-center py-2 px-4 border border-transparent rounded-md
					shadow-sm text-sm font-medium text-white bg-slate-700 hover:bg-slate-800 cursor-pointer focus:outline-none
					focus:ring-2 focus:ring-offset-2 focus:ring-slate-500">
					Einloggen
				</button>
			</div>
			<!--
			<div class="col-span-3">
				<a href="/forgot-password" class="text-sm text-slate-600 hover:text-slate-900">
					Passwort vergessen?
				</a>
			</div>
			-->
		</form>
	</div>
</div>