{{ $model := . }}


<div class="flex max-w-md mx-auto !pt-44">
	<div class="flex-col w-full">
		<a href="/" class="text-gray-700 hover:text-slate-950">
			<i class="ri-arrow-left-s-line"></i> Startseite
		</a>
		<div class="flex justify-center mt-8 items-baseline">
			<div>
				<img class="h-20 w-20 border" src="/assets/favicon.png" />
			</div>
		</div>
		<h1 class="text-4xl self-baseline text-center w-full my-6">
			Musenalm<br class="mb-3" />
			Neuer
			{{ if eq $model.role "User" -}}
				Nutzer
			{{ else if eq $model.role "Admin" -}}
				Administrator
			{{ else -}}
				Redakteur
			{{- end -}}
		</h1>
		{{ if $model.error }}
			<div
				class="text-red-800 text-sm mt-2 rounded bg-red-200 p-2 font-bold border-red-700
				border-2 mb-3">
				{{ $model.error }}
			</div>
		{{ end }}
		{{ if not $model.user }}
			<form class="w-full grid grid-cols-3 gap-4" method="POST">
				<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">
						Name <i class="ri-text"></i>
					</label>
					<input
						type="text"
						name="name"
						id="name"
						class="mt-1 block w-full rounded-md focus:border-none focus:outline-none"
						placeholder=""
						required
						autocomplete="name"
						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="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
						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"
						minlength="10"
						name="password"
						id="password"
						class="mt-1 block w-full rounded-md focus:border-none focus:outline-none"
						placeholder=""
						required />
				</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_repeat" class="text-sm text-gray-700 font-bold">
						Passwort wiederholen <i class="ri-key-2-line"></i>
					</label>
					<input
						type="password"
						minlength="10"
						name="password_repeat"
						id="password_repeat"
						class="mt-1 block w-full rounded-md focus:border-none focus:outline-none"
						placeholder=""
						required />
				</div>
				<div class="col-span-3">
					<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 }}" />
					<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">
						Registrieren
					</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>
		{{- else -}}
			<div
				class="text-green-800 text-sm mt-2 rounded bg-green-200 p-2 font-bold border-green-700
				border-2 mb-3">
				Benutzer {{ $model.user.Name }} erfolgreich angelegt.
			</div>
			<div>
				<a
					href="/login"
					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">
					Login
				</a>
			</div>
		{{- end -}}
	</div>
</div>