{{ $model := . }}


<div class="flex container-normal bg-slate-100 mx-auto !pt-36 px-8">
	<div class="flex-col w-full">
		{{ if $model.redirect_url }}
			<a href="{{ $model.redirect_url }}" class="text-gray-700 hover:text-slate-950">
				<i class="ri-arrow-left-s-line"></i> Zurück
			</a>
		{{ else }}
			<a href="/" class="text-gray-700 hover:text-slate-950">
				<i class="ri-arrow-left-s-line"></i> Startseite
			</a>
		{{ end }}
		<h1 class="text-2xl self-baseline w-full my-6 font-bold text-slate-900">Profil bearbeiten</h1>
	</div>
</div>
<div class="flex container-normal mx-auto px-8 mt-4">
	<div class="flex-col max-w-2xl w-full">
		<form
			class="w-full grid grid-cols-3 gap-4"
			id="changeuserform"
			x-target="changeuserform footer"
			hx-boost="false"
			method="POST"
			x-data="{ openpw: false }">
			<div class="col-span-3">
				{{ template "_usermessage" $model }}
			</div>
			<div
				class="rounded-xs col-span-3 border-2 border-transparent px-3
				py-1 pb-1.5 border-l-2 focus-within:border-l-slate-600
				bg-slate-200 focus-within:bg-slate-100 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 focus:border-none focus:outline-none"
					placeholder=""
					required
					autocomplete="off"
					value="{{ $model.user.Name }}"
					autofocus />
			</div>
			<div
				class="rounded-xs col-span-3 border-2 border-transparent px-3
				py-1 pb-1.5 border-l-2 focus-within:border-l-slate-600
				bg-slate-200 focus-within:bg-slate-100 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"
					autocomplete="off"
					class="mt-1 block w-full rounded-md focus:border-none focus:outline-none"
					placeholder=""
					required
					value="{{ $model.user.Email }}" />
			</div>
			<div
				class="rounded-xs col-span-3 border-2 border-transparent px-3
				py-1 pb-1.5 border-l-2 focus-within:border-l-slate-600
				bg-slate-200 focus-within:bg-slate-100 transition-all duration-100">
				<label for="role" class="text-sm text-gray-700 font-bold">
					Rolle <i class="ri-user-3-line"></i>
				</label>
				<select
					{{ if not (eq $model.request.user.Role "Admin") -}}
						disabled
					{{- end }}
					name="role"
					id="role"
					autocomplete="off"
					class="mt-1 block w-full rounded-md focus:border-none focus:outline-none
					disabled:opacity-50">
					<option value="User" {{ if eq $model.user.Role "User" }}selected{{ end }}>
						Benutzer
					</option>
					<option value="Editor" {{ if eq $model.user.Role "Editor" }}selected{{ end }}>
						Redakteur
					</option>
					<option value="Admin" {{ if eq $model.user.Role "Admin" }}selected{{ end }}>
						Administrator
					</option>
				</select>
			</div>
			{{- if and
				(eq $model.request.user.Role "Admin")
				(eq $model.request.user.Id
				$model.user.Id)
			-}}
				<div class="flex flex-row col-span-3">
					<div class="align-top">
						<i class="ri-information-line text-gray-700 mt-2 mr-2 align-top"></i>
					</div>
					<p class="text-sm text-gray-700 max-w-[80ch]">
						Achtung! Wenn Sie Ihre eigenen Berechtigungen ändern, verlieren Sie die Möglichkeit,
						diese Änderungen rückgängig zu machen. Weiter werden Sie von allen laufenden Sitzungen
						abgemeldet und müssen sich erneut anmelden.
					</p>
				</div>
			{{- else if (eq $model.request.user.Role "Admin") -}}
				<div class="flex flex-row col-span-3">
					<div class="align-top">
						<i class="ri-information-line text-gray-700 mt-2 mr-2 align-top"></i>
					</div>
					<p class="text-sm text-gray-700 max-w-[80ch]">
						Achtung! Wenn Sie die Rolle eines Benutzers ändern, wird dieser unter Umständen von
						laufenden Sitzungen abgemeldet und muss sich erneut anmelden.
					</p>
				</div>
			{{- end -}}
			<div class="col-span-3">
				<div class="flex items-center">
					<input type="checkbox" name="openpw" id="openpw" x-model="openpw" class="mr-2" />
					<label for="openpw" class="text-sm text-gray-700 font-bold">
						Passwort ändern <i class="ri-key-2-line"></i>
					</label>
				</div>
			</div>
			{{- if not (eq $model.request.user.Role "Admin") -}}
				<div
					x-bind:style="!openpw ? 'display:none' : ''"
					class="rounded-xs col-span-3 border-2 border-transparent px-3
				py-1 pb-1.5 border-l-2 focus-within:border-l-slate-600
				bg-slate-200 focus-within:bg-slate-100 transition-all duration-100">
					<label for="password_old" class="text-sm text-gray-700 font-bold"> Altes Passwort </label>
					<input
						x-bind:type="openpw ? 'password' : 'hidden'"
						name="password_old"
						id="password_old"
						class="mt-1 block w-full rounded-md focus:border-none focus:outline-none"
						placeholder=""
						required />
				</div>
			{{- end -}}
			<div
				x-bind:style="!openpw ? 'display:none' : ''"
				class="rounded-xs col-span-3 border-2 border-transparent px-3
				py-1 pb-1.5 border-l-2 focus-within:border-l-slate-600
				bg-slate-200 focus-within:bg-slate-100 transition-all duration-100">
				<label for="password" class="text-sm text-gray-700 font-bold"> Neues Passwort </label>
				<input
					x-bind:type="openpw ? 'password' : 'hidden'"
					minlength="10"
					name="password"
					id="password"
					class="mt-1 block w-full rounded-md focus:border-none focus:outline-none"
					placeholder=""
					required />
			</div>
			<div
				x-bind:style="!openpw ? 'display:none' : ''"
				class="rounded-xs col-span-3 border-2 border-transparent px-3
				py-1 pb-1.5 border-l-2 focus-within:border-l-slate-600
				bg-slate-200 focus-within:bg-slate-100 transition-all duration-100">
				<label for="password_repeat" class="text-sm text-gray-700 font-bold">
					Passwort wiederholen
				</label>
				<input
					x-bind:type="openpw ? 'password' : 'hidden'"
					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 flex justify-end" x-bind:style="!openpw ? 'display:none' : ''">
				<input
					type="checkbox"
					name="logout"
					id="logout"
					class="mr-2"
					x-bind:style="!openpw ? 'display:none' : ''" />
				<label for="logout" class="text-sm text-gray-700 font-bold">
					überall ausloggen <i class="ri-logout-box-line"></i>
				</label>
			</div>
			<div class="col-span-1 col-start-2">
				<a
					href="/user/{{ $model.user.Id }}/edit?redirectTo={{ $model.redirect_url }}"
					type="cancel"
					class="w-full inline-flex justify-center py-2 px-4 border border-transparent rounded-md text-sm font-medium text-gray-800 bg-stone-200 hover:bg-stone-300 cursor-pointer focus:outline-none
					focus:ring-2 focus:ring-offset-2 focus:ring-slate-500 no-underline">
					Zurücksetzen
				</a>
			</div>
			<div class="col-span-1 col-start-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">
					Speichern
				</button>
			</div>
		</form>

		<div class="col-span-1 mt-12 justify-self-end self-end items-end flex flex-row justify-end">
			{{ if not $model.user.Deactivated }}
				<form action="/user/{{ $model.user.Id }}/deactivate/" method="POST">
					<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"
						type="button"
						class="cursor-pointer text-red-700 hover:text-red-900 pr-4 mt-6">
						<i class="ri-prohibited-2-line"></i>
						Deaktivieren
					</button>
				</form>
			{{ else }}
				<form action="/user/{{ $model.user.Id }}/activate/" method="POST">
					<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"
						type="button"
						class="cursor-pointer text-green-700 hover:text-green-900 pr-4 mt-6">
						<i class="ri-restart-line"></i> Aktivieren
					</button>
				</form>
			{{ end }}
		</div>
	</div>
</div>