{{ $model := . }}
<!-- Data:
type AlmanachResult struct {
	Entry          *dbmodels.Entry
	Places         []*dbmodels.Place
	Series         []*dbmodels.Series
	Contents       []*dbmodels.Content
	Agents         map[string]*dbmodels.Agent          // <- Key is agent id
	EntriesSeries  map[string]*dbmodels.REntriesSeries // <- Key is series id
	EntriesAgents  []*dbmodels.REntriesAgents
	ContentsAgents map[string][]*dbmodels.RContentsAgents // <- Key is content id
	User					 *dbmodels.User

	Types    []string
	HasScans bool
}
-->

<script type="module">
	FormLoad(document.getElementById("changealmanachform"));
</script>

<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">
		<h1 class="text-2xl w-full font-bold text-slate-900 mb-4">{{ $model.result.Entry.PreferredTitle }}</h1>
			<div class="flex flex-row gap-x-3">
				<div>
					<a
						href="/almanach/{{ $model.result.Entry.MusenalmID }}"
						class="text-gray-700
					hover:text-slate-950 block  no-underline">
						<i class="ri-eye-line"></i> Anschauen
					</a>
				</div>
				&middot;
				<div class="flex flex-row">
					{{- if $model.result.Prev -}}
						<div>
							<a href="/almanach/{{ $model.result.Prev.MusenalmID }}/edit" class="text-gray-700 hover:text-slate-950 no-underline block ">
								<i class="ri-arrow-left-s-line"></i>
							</a>
						</div>
					{{- end -}}
					<div class="px-1.5 py-0.5 rounded-xs bg-gray-200 w-fit font-bold">
					{{ $model.result.Entry.MusenalmID }}
						<tool-tip position="right" class="!inline">
							<div class="data-tip">Die Alm-Nr ist Teil der URL und wird automatisch vergeben.</div>
							<i class="ri-information-line"></i>
						</tool-tip>
					</div>
					{{- if $model.result.Next -}}
						<div>
							<a href="/almanach/{{ $model.result.Next.MusenalmID }}/edit" class="text-gray-700 hover:text-slate-950 block  no-underline"><i class="ri-arrow-right-s-line"></i></a>
						</div>
					{{- end -}}
				</div>
				&middot;
				<div>
					<a href="/almanach/{{- $model.result.Entry.MusenalmID -}}/edit" class="text-gray-700
					no-underline hover:text-slate-950 block ">
						<i class="ri-loop-left-line"></i> Reset
					</a>
				</div>
			</div>
		</div>
		<div class="flex flex-row" id="almanach-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-database-2-line"></i> Datenbank-ID
						<tool-tip position="right" class="!inline">
							<div class="data-tip">Die Datenbank-ID kann zur Fehlerdiagnose hilfreich sein.</div>
							<i class="ri-information-line"></i>
						</tool-tip>
					</div>
					<div class="">{{ $model.result.Entry.Id }}</div>
				</div>
			</div>
			<div class="flex flex-col justify-end gap-y-6 pr-4">
				<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">
							{{ GermanDate $model.result.Entry.Updated }},
							{{ GermanTime
								$model.result.Entry.Updated
							}}h
						</div>
						{{- if $model.result.User -}}
							<div class="px-1.5 py-0.5 rounded-xs mt-1.5 bg-gray-200 w-fit">
								<i class="ri-user-line mr-1"></i> {{- $model.result.User.Name -}}
							</div>
						{{- end -}}
					</div>
				</div>
			</div>
		</div>
	</div>
</div>

<div class="container-normal mx-auto mt-4 !px-0">
	{{ template "_usermessage" $model }}
	<form class="w-full grid grid-cols-12 gap-4 dbform" id="changealmanachform" x-target="changealmanachform user-message almanach-header-data" hx-boost="false" method="POST">
		<input type="hidden" name="csrf_token" value="{{ $model.csrf_token }}" />
		<input type="hidden" name="last_edited" value="{{ $model.result.Entry.Updated }}" />

		<div class="inputwrapper col-span-8">
			<div class="flex flex-row justify-between">
				<label for="preferred_title" class="inputlabel"><i class="ri-text"></i> Kurztitel</label>
			</div>
			<textarea name="preferred_title" id="preferred_title" class="inputinput no-enter" placeholder="" required autocomplete="off" rows="1">
				{{- $model.result.Entry.PreferredTitle -}}
			</textarea
			>
		</div>

		<div class="col-span-3 col-start-10">
			<div class="inputwrapper">
				<label for="type" class="inputlabel">Status <i class="ri-alarm-warning-line"></i></label>
				<select name="type" id="type" autocomplete="off" class="inputselect font-bold">
					<option value="Unknown" {{ if eq $model.result.Entry.EditState "Unknown" }}selected{{ end }}>Unbekannt</option>
					<option value="ToDo" {{ if eq $model.result.Entry.EditState "ToDo" }}selected{{ end }}>Zu erledigen</option>
					<option value="Review" {{ if eq $model.result.Entry.EditState "Review" }}selected{{ end }}>Überprüfen</option>
					<option value="Seen" {{ if eq $model.result.Entry.EditState "Seen" }}selected{{ end }}>Autopsiert</option>
					<option value="Edited" {{ if eq $model.result.Entry.EditState "Edited" }}selected{{ end }}>Vollständig Erfasst</option>
				</select>
			</div>
		</div>

		<div class="col-span-8" id="titles"></div>
		<div class="col-span-4 col-start-10 row-span-2">
			<div class="inputwrapper">
				<label for="type" class="languages inputlabel" for="languages">Sprachen <i class="ri-earth-line"></i></label>
				<multi-select-simple id="languages" show-create-button="false" placeholder="Sprachen suchen..."></multi-select-simple>
				<script type="module">
					// Initialize the multi-select with the languages
					const smlang = document.getElementById("languages");
					smlang.value = {{ $model.result.Entry.Language }};
				</script>
			</div>
		</div>

		<div-manager dm-target="titles" class="col-span-2 col-start-7">
			<button class="dm-menu-button text-right w-full cursor-pointer"><i class="ri-add-line"></i>
			Titeldaten hinzufügen</button>

			<div class="inputwrapper {{ if eq $model.result.Entry.TitleStmt "" }}hidden{{ end }}">
				<div class="flex flex-row justify-between">
					<label for="title" class="inputlabel menu-label"> <i class="ri-text"></i> Titel</label>
					<div class="pr-2">
						<button class="dm-close-button font-bold input-label">
							<i class="ri-close-line"></i>
						</button>
					</div>
				</div>

				<textarea name="title" id="title" class="inputinput" placeholder="" autocomplete="off">
				{{- $model.result.Entry.TitleStmt -}}
				</textarea>
			</div>

			<div class="mt-2 inputwrapper {{ if eq $model.result.Entry.ParallelTitle "" }}hidden{{ end }}">
				<div class="flex flex-row justify-between">
					<label for="paralleltitle" class="inputlabel menu-label"><i class="ri-text"></i> Titel
					(übersetzt)</label>
					<div class="pr-2">
						<button class="dm-close-button font-bold input-label">
							<i class="ri-close-line"></i>
						</button>
					</div>
				</div>

				<textarea name="paralleltitle" id="paralleltitle" class="inputinput" placeholder="" autocomplete="off">
					{{- $model.result.Entry.ParallelTitle -}}
				</textarea>
			</div>


			<div class="mt-3 inputwrapper {{ if eq $model.result.Entry.SubtitleStmt "" }}hidden{{ end }}">
				<div class="flex flex-row justify-between">
					<label for="subtitle" class="inputlabel menu-label"><i class="ri-text"></i> Untertitel</label>
					<div class="pr-2">
						<button class="dm-close-button font-bold input-label">
							<i class="ri-close-line"></i>
						</button>
					</div>
				</div>

				<textarea name="subtitle" id="subtitle" class="inputinput" placeholder="" autocomplete="off">
					{{- $model.result.Entry.SubtitleStmt -}}
				</textarea>
			</div>

			<div class="mt-3 inputwrapper {{ if eq $model.result.Entry.VariantTitle "" }}hidden{{ end }}">
				<div class="flex flex-row justify-between">
					<label for="varianttitle" class="inputlabel menu-label"><i class="ri-text"></i>
					Titelvarianten</label>
					<div class="pr-2">
						<button class="dm-close-button font-bold input-label">
							<i class="ri-close-line"></i>
						</button>
					</div>
				</div>

				<textarea name="varianttitle" id="varianttitle" class="inputinput" placeholder="" autocomplete="off">
					{{- $model.result.Entry.VariantTitle -}}
				</textarea>
			</div>

			<div class="mt-3 inputwrapper {{ if eq $model.result.Entry.IncipitStmt "" }}hidden{{ end }}">
				<div class="flex flex-row justify-between">
					<label for="incipit" class="inputlabel menu-label"><i class="ri-text"></i> Incipit</label>
					<div class="pr-2">
						<button class="dm-close-button font-bold input-label">
							<i class="ri-close-line"></i>
						</button>
					</div>
				</div>

				<textarea name="incipit" id="incipit" class="inputinput" placeholder="" autocomplete="off">
					{{- $model.result.Entry.IncipitStmt -}}
				</textarea>
			</div>
		</div-manager>
	</form>
</div>