{{- $content := index . "content" -}}
{{- $entry := index . "entry" -}}
{{- $csrf := index . "csrf_token" -}}
{{- $contentTypes := index . "content_types" -}}
{{- $musenalmTypes := index . "musenalm_types" -}}
{{- $paginationValues := index . "pagination_values" -}}
{{- $overrideID := index . "content_id" -}}
{{- $openEdit := index . "open_edit" -}}
{{- $isNew := index . "is_new" -}}
{{- $error := index . "error" -}}

{{- $contentID := $content.Id -}}
{{- if and $overrideID (ne $overrideID "") -}}
	{{- $contentID = $overrideID -}}
{{- end -}}

<div data-role="content-item" class="relative {{ if $isNew }}data-new-content{{ end }} {{ if $openEdit }}data-editing{{ end }}" data-open-edit="{{ if $openEdit }}true{{ end }}" data-content-temp="{{ if $isNew }}true{{ end }}">
	<div data-role="content-view" class="{{ if $openEdit }}hidden{{ end }} mt-2">
		<div class="border border-slate-200 bg-stone-100 rounded-xs overflow-hidden">
			<div class="flex items-center justify-between gap-4 border-b border-slate-200 bg-stone-200 px-3 py-2 cursor-grab" data-role="content-drag-handle" draggable="true" aria-label="Beitrag verschieben">
				<div class="flex items-center gap-2 text-sm font-bold text-gray-800">
					<button type="button" class="text-slate-600 rounded-xs px-2 py-1 text-sm transition-colors hover:bg-stone-100 {{ if $isNew }}hidden{{ end }}" data-role="content-collapse-toggle" aria-label="Beitrag einklappen" aria-expanded="true">
						<i class="ri-arrow-up-s-line" data-role="content-collapse-icon"></i>
					</button>
					<div class="flex items-center gap-1">
						<button type="button" class="text-slate-600 rounded-xs px-2 py-1 text-sm transition-colors hover:bg-stone-100" data-role="content-move-up" aria-label="Beitrag nach oben">
							<i class="ri-arrow-up-line"></i>
						</button>
						<button type="button" class="text-slate-600 rounded-xs px-2 py-1 text-sm transition-colors hover:bg-stone-100" data-role="content-move-down" aria-label="Beitrag nach unten">
							<i class="ri-arrow-down-line"></i>
						</button>
					</div>
					{{- if $content.MusenalmType -}}
						<span class="flex flex-wrap gap-1 text-gray-700 font-normal">
							{{- range $i, $t := $content.MusenalmType -}}
								<span class="bg-stone-100 px-1.5 py-0.5 rounded text-sm font-semibold">{{- $t -}}</span>
							{{- end -}}
						</span>
					{{- end -}}
					<div class="hidden flex flex-wrap items-baseline gap-2 text-gray-800" data-role="content-collapsed-summary">
						{{- if $content.Extent -}}
							<span class="text-sm font-semibold text-gray-700">S. {{- $content.Extent -}}</span>
						{{- end -}}
						{{- if $content.PreferredTitle -}}
							<span class="text-sm font-semibold">{{- $content.PreferredTitle -}}</span>
						{{- else if $content.TitleStmt -}}
							<span class="text-sm font-semibold italic">{{- $content.TitleStmt -}}</span>
						{{- end -}}
					</div>
				</div>
				<div class="flex items-center gap-2">
					<span class="status-badge text-xs" data-status="{{ $content.EditState }}">
						<i class="status-icon {{- if eq $content.EditState "Edited" }} ri-checkbox-circle-line{{- else if eq $content.EditState "Seen" }} ri-information-line{{- else if eq $content.EditState "Review" }} ri-search-line{{- else if eq $content.EditState "ToDo" }} ri-list-check{{- else }} ri-forbid-2-line{{- end }}"></i>
						{{- if eq $content.EditState "Edited" -}}Erfasst{{- else if eq $content.EditState "Review" -}}Überprüfen{{- else if eq $content.EditState "ToDo" -}}Zu erledigen{{- else if eq $content.EditState "Seen" -}}Autopsiert{{- else -}}Unbekannt{{- end -}}
					</span>
					<button type="button" class="resetbutton w-32 flex items-center gap-2 justify-center" data-role="content-edit-button">
						<i class="ri-edit-2-line"></i>
						<span>Bearbeiten</span>
					</button>
				</div>
			</div>
			<div class="grid gap-2 grid-cols-[8rem_1fr] items-baseline px-3 py-2" data-role="content-view-body">
				{{- if $content.Extent -}}
					<div class="text-sm font-bold text-gray-700">Seite</div>
					<div class="text-base">{{- $content.Extent -}}</div>
				{{- end -}}
				{{- if $content.TitleStmt -}}
					<div class="text-sm font-bold text-gray-700">Titel</div>
					<div class="text-base italic">{{- $content.TitleStmt -}}</div>
				{{- end -}}
				{{- if $content.IncipitStmt -}}
					<div class="text-sm font-bold text-gray-700">Incipit</div>
					<div class="text-base italic">{{ $content.IncipitStmt }}…</div>
				{{- end -}}
				{{- if $content.ResponsibilityStmt -}}
					<div class="text-sm font-bold text-gray-700">Autorangabe</div>
					<div class="text-base italic">{{- $content.ResponsibilityStmt -}}</div>
				{{- end -}}
				{{- if $content.Annotation -}}
					{{- $link := printf "%s%s" "/almanach/" $entry.MusenalmIDString -}}
					<div class="text-sm font-bold text-gray-700">Anmerkung</div>
					<div class="text-base">
						{{- Safe (LinksAnnotation (ReplaceSlashParen $content.Annotation) $link) -}}
					</div>
				{{- end -}}
			</div>
		</div>
	</div>
	<div data-role="content-edit" class="{{ if not $openEdit }}hidden{{ end }} mt-2">
		<form
			autocomplete="off"
			class="w-full dbform"
			method="POST"
			hx-boost="false"
			hx-post="/almanach/{{ $entry.MusenalmID }}/contents/edit"
			hx-target="closest [data-role='content-item']"
			hx-swap="outerHTML"
			action="/almanach/{{ $entry.MusenalmID }}/contents/edit">
			<input type="hidden" name="csrf_token" value="{{ $csrf }}" />
			{{- if $error -}}
				<div class="mb-3 rounded-xs border border-red-200 bg-red-50 px-3 py-2 text-sm text-red-800">
					{{ $error }}
				</div>
			{{- end -}}
			{{- template "_content_edit" (Dict
				"content" $content
				"content_id" $contentID
				"entry" $entry
				"content_types" $contentTypes
				"musenalm_types" $musenalmTypes
				"pagination_values" $paginationValues
			) -}}
			<div class="w-full flex items-center justify-end gap-3 mt-4 flex-wrap">
				<button type="button" class="resetbutton w-40 flex items-center gap-2 justify-center" data-role="content-edit-cancel">
					<i class="ri-close-line"></i>
					<span>Verwerfen</span>
				</button>
				<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="content-delete">
					<i class="ri-delete-bin-line"></i>
					<span>Eintrag löschen</span>
				</button>
				<button type="submit" class="submitbutton w-40 flex items-center gap-2 justify-center">
					<i class="ri-save-line"></i>
					<span>Speichern</span>
				</button>
			</div>
		</form>
		<dialog data-role="content-delete-dialog" class="dbform 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">Eintrag löschen?</div>
				{{- if $content.TitleStmt -}}
					<div class="text-sm font-bold text-gray-900 mt-1">{{ $content.TitleStmt }}</div>
				{{- end -}}
				<p class="text-sm text-gray-700 mt-2">
					Der Eintrag wird dauerhaft gelöscht. Verknüpfungen, Exemplare und Inhalte werden entfernt.
				</p>
				<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="content-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="content-delete-confirm">
						Löschen
					</button>
				</div>
			</div>
		</dialog>
	</div>
</div>