{{ $model := . }}
{{ $series := $model.result.Series }}

<edit-page>
<duplicate-warning-checker></duplicate-warning-checker>
<div class="flex container-normal bg-slate-100 mx-auto px-8">
	<div class="flex flex-row w-full justify-between">
		<div class="flex flex-col justify-end-safe flex-2/5">
		<div class="mb-1">
			<i class="ri-book-shelf-fill"></i> Reihe
		</div>
			<h1 class="text-2xl w-full font-bold text-slate-900 mb-1">
				{{- if $model.is_new -}}
					Neue Reihe anlegen
				{{- else -}}
					{{- $series.Title -}}
				{{- end -}}
			</h1>
			{{- if not $model.is_new -}}
				<div class="flex flex-row gap-x-3">
					<div>
						<a
							href="/reihe/{{ $series.MusenalmID }}"
							class="text-gray-700 hover:text-slate-950 block no-underline">
							<i class="ri-eye-line"></i> Anschauen
						</a>
					</div>
					&middot;
				</div>
			{{- end -}}
		</div>
		{{- if not $model.is_new -}}
		<div class="flex flex-row" id="series-header-data">
			<div class="flex flex-col justify-end gap-y-6 pr-20">
				<div class="">
					<div class="font-bold text-sm">
						<i class="ri-navigation-line"></i> Navigation
					</div>
					<div class="flex items-center gap-2">
						{{- if $model.result.Prev -}}
							<tool-tip position="top" class="!inline">
								<div class="data-tip">{{ $model.result.Prev.Title }}</div>
								<a
									href="/reihe/{{ $model.result.Prev.MusenalmID }}/edit"
									class="text-gray-700 hover:text-slate-950 no-underline">
									<i class="ri-arrow-left-s-line"></i>
								</a>
							</tool-tip>
						{{- else -}}
							<span class="text-gray-700 opacity-0 pointer-events-none">
								<i class="ri-arrow-left-s-line"></i>
							</span>
						{{- end -}}
						<span class="text-gray-800 font-bold no-underline">
						A&thinsp;-&thinsp;Z
						</span>
						{{- if $model.result.Next -}}
							<tool-tip position="top" class="!inline">
								<div class="data-tip">{{ $model.result.Next.Title }}</div>
								<a
									href="/reihe/{{ $model.result.Next.MusenalmID }}/edit"
									class="text-gray-700 hover:text-slate-950 no-underline">
									<i class="ri-arrow-right-s-line"></i>
								</a>
							</tool-tip>
						{{- else -}}
							<span class="text-gray-700 opacity-0 pointer-events-none">
								<i class="ri-arrow-right-s-line"></i>
							</span>
						{{- end -}}
					</div>
				</div>
			</div>
			<div class="flex flex-col justify-end gap-y-6 pr-10 w-40 shrink-0">
				<div class="">
					<div class="font-bold text-sm">
						<i class="ri-database-2-line"></i> Datenbank-ID
					</div>
					<div class="whitespace-nowrap tabular-nums">{{ $series.Id }}</div>
				</div>
			</div>
			<div class="flex flex-col justify-end gap-y-6 pr-4 w-48 shrink-0">
				<div class="">
					<div class="font-bold text-sm mb-1"><i class="ri-calendar-line"></i> Zuletzt bearbeitet</div>
					<div>
						<div class="px-1.5 py-0.5 rounded-xs bg-gray-200 w-fit whitespace-nowrap tabular-nums" id="series-updated-stamp">
							<span id="series-updated-date">{{ GermanDate $series.Updated }}</span>,
							<span id="series-updated-time">{{ GermanTime $series.Updated }}</span>h
						</div>
						<div
							class="px-1.5 py-0.5 rounded-xs mt-1.5 bg-gray-200 w-fit {{ if not $model.result.User }}hidden{{ end }}"
							id="series-updated-user">
							<i class="ri-user-line mr-1"></i>
							<span id="series-updated-user-name">{{- if $model.result.User -}}{{ $model.result.User.Name }}{{- end -}}</span>
						</div>
					</div>
				</div>
			</div>
		</div>
		{{- end -}}
	</div>
</div>

<div class="container-normal mx-auto mt-4 !px-0">
	{{/* usermessage moved into action bar */}}
	<form
		autocomplete="off"
		class="w-full dbform form-with-action-bar"
		id="changeseriesform"
		method="POST"
		action="{{ if $model.is_new }}/reihen/new/{{ else }}/reihe/{{ $series.MusenalmID }}/edit{{ end }}"
		{{- if not $model.is_new -}}
			data-delete-endpoint="/reihe/{{ $series.MusenalmID }}/edit/delete"
		{{- end -}}>
		<input type="hidden" name="csrf_token" value="{{ $model.csrf_token }}" />
		<input type="hidden" name="last_edited" value="{{ if not $model.is_new }}{{ $series.Updated }}{{ end }}" />

		<div class="flex gap-8">
			<div class="flex-1 flex flex-col gap-4">
				<div class="inputwrapper">
					<div class="inputlabelrow">
						<div class="flex items-center gap-1">
							<label for="title" class="inputlabel">Reihentitel</label>
							<tool-tip position="top" class="!inline">
								<div class="data-tip">{{ help "series" "title" }}</div>
								<i class="ri-question-line"></i>
							</tool-tip>
						</div>
					</div>
					<lookup-field
						id="series-title-field"
						name="title"
						data-multiline="true"
						data-no-enter="true"
						data-required="true"
						data-autocomplete="false"
						data-valid-fn="lookupRequiredText"
						data-dup-endpoint="/api/series/search"
						data-dup-result-key="series"
						data-dup-current-id="{{ if not $model.is_new }}{{ $series.Id }}{{ end }}"
						value="{{- $series.Title -}}">
					</lookup-field>
				</div>
				<div class="flex flex-row gap-3">
					<div class="inputwrapper grow">
						<div class="inputlabelrow">
							<div class="flex items-center gap-1">
								<label for="references" class="inputlabel">Nachweise</label>
								<tool-tip position="top" class="!inline">
									<div class="data-tip">{{ help "series" "refs" }}</div>
									<i class="ri-question-line"></i>
								</tool-tip>
							</div>
						</div>
						<textarea name="references" id="references" class="inputinput no-enter" autocomplete="off" rows="1">{{- $series.References -}}</textarea>
					</div>
					<div class="inputwrapper w-1/4 grow-0">
						<div class="inputlabelrow">
							<div class="flex items-center gap-1">
								<label for="frequency" class="inputlabel">Erscheinungsfrequenz</label>
								<tool-tip position="top" class="!inline">
									<div class="data-tip">{{ help "series" "frequency" }}</div>
									<i class="ri-question-line"></i>
								</tool-tip>
							</div>
						</div>
						<input name="frequency" id="frequency" class="inputinput" autocomplete="off" value="{{ $series.Frequency }}" />
					</div>
				</div>
				{{ template "_annotation_field" (Arr $series.Annotation "Annotation") }}
			</div>

			<div class="w-[28rem] shrink-0 flex flex-col gap-3">
				{{ template "_status_edit" (Arr $series "status" "status" "series") }}
				<div class="mt-2">
					{{ template "_linked_items" (Arr $model.result.Entries $model.result.Contents nil $model.result.ContentTypes $model.result.ContentEntries) }}
				</div>
			</div>
		</div>

		<div class="form-action-bar">
			<div class="form-action-bar-inner">
				<p
					id="series-save-feedback"
					class="form-action-bar-message save-feedback {{ if $model.error }}save-feedback-error text-red-700{{ else if $model.success }}save-feedback-success text-green-700{{ else }}hidden{{ end }}"
					{{ if $model.success }}data-autohide="true"{{ end }}
					aria-live="polite">
					{{- if $model.error -}}
						{{ $model.error }}
					{{- else if $model.success -}}
						{{ $model.success }}
					{{- end -}}
				</p>
				<div class="form-action-bar-actions">
					<a href="{{ if $model.is_new }}/reihen/{{ else }}/reihe/{{ $series.MusenalmID }}{{ end }}" class="resetbutton w-40 flex items-center gap-2 justify-center">
						<i class="ri-close-line"></i>
						<span>Abbrechen</span>
					</a>
					{{- if not $model.is_new -}}
						<button
							type="button"
							class="resetbutton w-40 flex items-center gap-2 justify-center bg-red-50 text-red-800 hover:bg-red-100 hover:text-red-900"
							data-role="edit-delete">
							<i class="ri-delete-bin-line"></i>
							<span>Reihe löschen</span>
						</button>
					{{- end -}}
					{{- if not $model.is_new -}}
						<button type="submit" name="save_action" value="stay" class="submitbutton flex items-center gap-2 justify-center">
							<i class="ri-save-line"></i>
							<span>Speichern</span>
						</button>
						<button
							type="submit"
							name="save_action"
							value="view"
							class="submitbutton flex items-center gap-2 justify-center"
							>
							<i class="ri-eye-line"></i>
							<span>Speichern &amp; Anzeigen</span>
						</button>
					{{- end -}}
					{{- if $model.is_new -}}
						<button type="submit" name="save_action" value="stay" class="submitbutton flex items-center gap-2 justify-center">
							<i class="ri-save-line"></i>
							<span>Speichern</span>
						</button>
					{{- end -}}
				</div>
			</div>
		</div>
		{{- if not $model.is_new -}}
		<dialog data-role="edit-delete-dialog" class="fixed inset-0 m-auto rounded-md border border-slate-200 p-0 shadow-xl backdrop:bg-black/40">
			<div class="p-5 w-[22rem]">
				<div class="text-base font-bold text-gray-900">Reihe löschen?</div>
				<div class="text-sm font-bold text-gray-900 mt-1">{{ $series.Title }}</div>
				<p class="text-sm text-gray-700 mt-2">
					Alle Bände, Beiträge und Verknüpfungen der bevorzugten Reihentitel werden gelöscht.
				</p>
				<div class="mt-3">
					<div class="text-sm font-semibold text-gray-700">Betroffene Bände</div>
					<div class="mt-2 max-h-40 overflow-auto pr-1">
						{{- if $model.result.PreferredEntries -}}
							<ul class="flex flex-col gap-2 pl-0 pr-0 m-0 list-none">
								{{- range $entry := $model.result.PreferredEntries -}}
									<li class="flex items-baseline justify-between gap-3 ml-0 pl-0 text-sm text-gray-700">
										<span>{{ $entry.PreferredTitle }}</span>
										<span class="text-xs text-gray-500">{{ $entry.Year }}</span>
									</li>
								{{- end -}}
							</ul>
						{{- else -}}
							<div class="italic text-gray-500">Keine Bände betroffen.</div>
						{{- end -}}
					</div>
				</div>
				<div class="flex items-center justify-end gap-3 mt-4">
					<button type="button" class="resetbutton w-auto px-3 py-1 text-sm" data-role="edit-delete-cancel">Abbrechen</button>
					<button
						type="button"
						class="submitbutton w-auto bg-red-700 hover:bg-red-800 px-3 py-1 text-sm"
						data-role="edit-delete-confirm">
						Löschen
					</button>
				</div>
			</div>
		</dialog>
		{{- end -}}
	</form>
</div>
</edit-page>