{{- $content := index . "content" -}}
{{- $entry := index . "entry" -}}
{{- $musenalmTypes := index . "musenalm_types" -}}
{{- $paginationValues := index . "pagination_values" -}}
{{- $agents := index . "agents" -}}
{{- $contentAgents := index . "content_agents" -}}
{{- $contentAgentsRender := index . "content_agents_render" -}}
{{- $contentAgentsNew := index . "content_agents_new" -}}
{{- $agentRelations := index . "agent_relations" -}}
{{- $overrideID := index . "content_id" -}}
{{- $contentID := $content.Id -}}
{{- if and $overrideID (ne $overrideID "") -}}
	{{- $contentID = $overrideID -}}
{{- end -}}
{{- $prefix := printf "content_%s_" $contentID -}}
{{- $baseID := printf "content-%s" $contentID -}}
{{- $annotationID := printf "%sannotation" $prefix -}}
{{- $annotationToolbar := printf "%sannotation-toolbar" $prefix -}}
{{- $agentsPrefix := printf "content_%s_agents" $contentID -}}
{{- $agentsAddToggleID := printf "content-%s-agents-add-toggle" $contentID -}}
{{- $agentsSectionID := printf "content-%s-agents-section" $contentID -}}

<div class="bg-white" data-role="content-card" data-content-id="{{ $contentID }}" data-content-order="{{ $content.Numbering }}">
	<input type="hidden" name="{{ $prefix }}numbering" class="content-numbering" value="{{- $content.Numbering -}}" />
	<input type="hidden" name="{{ $prefix }}entries" value="{{ $entry.Id }}" />
	<div class="flex flex-col gap-3">
		<div class="inputwrapper">
			<div class="inputlabelrow">
				<label for="{{ $baseID }}-extent" class="inputlabel">Seite &amp; Paginierung</label>
			</div>
			<div class="grid grid-cols-[1fr_1px_20rem] gap-2 items-stretch">
				<textarea name="{{ $prefix }}extent" id="{{ $baseID }}-extent" class="inputinput no-enter whitespace-normal" autocomplete="off" rows="1">{{- $content.Extent -}}</textarea>
				<div class="bg-slate-400"></div>
				<select name="{{ $prefix }}musenalm_pagination" id="{{ $baseID }}-pagination" class="inputselect">
					{{- range $_, $p := $paginationValues -}}
						<option value="{{- $p -}}" {{ if eq $content.MusenalmPagination $p }}selected{{ end }}>{{- $p -}}</option>
					{{- end -}}
				</select>
			</div>
		</div>

		<div class="inputwrapper">
			<div class="inputlabelrow">
				<label for="{{ $baseID }}-title" class="inputlabel">Titel</label>
			</div>
			<textarea name="{{ $prefix }}title_statement" id="{{ $baseID }}-title" class="inputinput no-enter whitespace-normal" autocomplete="off" rows="1">{{- $content.TitleStmt -}}</textarea>
		</div>

		<div class="inputwrapper">
			<div class="inputlabelrow">
				<label for="{{ $baseID }}-incipit" class="inputlabel">Incipit</label>
			</div>
			<textarea name="{{ $prefix }}incipit_statement" id="{{ $baseID }}-incipit" class="inputinput no-enter whitespace-normal" autocomplete="off" rows="1">{{- $content.IncipitStmt -}}</textarea>
		</div>

		<div class="inputwrapper">
			<div class="inputlabelrow">
				<label for="{{ $baseID }}-responsibility" class="inputlabel">Autorangabe</label>
			</div>
			<textarea name="{{ $prefix }}responsibility_statement" id="{{ $baseID }}-responsibility" class="inputinput no-enter whitespace-normal" autocomplete="off" rows="1">{{- $content.ResponsibilityStmt -}}</textarea>
		</div>

		<div id="{{ $baseID }}-edit-fields" class="mt-2 flex flex-col gap-2"></div>
		<div-manager dm-target="{{ $baseID }}-edit-fields" class="flex items-center justify-end mt-1">
			<button class="dm-menu-button text-right cursor-pointer whitespace-nowrap"><i class="ri-add-line"></i>
				Felder hinzufügen</button>

			<div class="inputwrapper {{ if eq $content.SubtitleStmt "" }}hidden{{ end }}">
				<div class="inputlabelrow">
					<label for="{{ $baseID }}-subtitle" class="inputlabel menu-label">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="{{ $prefix }}subtitle_statement" id="{{ $baseID }}-subtitle" class="inputinput no-enter whitespace-normal" autocomplete="off" rows="1">{{- $content.SubtitleStmt -}}</textarea>
			</div>

			

			<div class="inputwrapper {{ if eq $content.ParallelTitle "" }}hidden{{ end }}">
				<div class="inputlabelrow">
					<label for="{{ $baseID }}-parallel-title" class="inputlabel menu-label">Paralleltitel</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="{{ $prefix }}parallel_title" id="{{ $baseID }}-parallel-title" class="inputinput no-enter whitespace-normal" autocomplete="off" rows="1">{{- $content.ParallelTitle -}}</textarea>
			</div>

			<div class="inputwrapper {{ if eq $content.VariantTitle "" }}hidden{{ end }}">
				<div class="inputlabelrow">
					<label for="{{ $baseID }}-variant-title" class="inputlabel menu-label">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="{{ $prefix }}variant_title" id="{{ $baseID }}-variant-title" class="inputinput no-enter whitespace-normal" autocomplete="off" rows="1">{{- $content.VariantTitle -}}</textarea>
			</div>

			<div class="inputwrapper {{ if eq $content.PlaceStmt "" }}hidden{{ end }}">
				<div class="inputlabelrow">
					<label for="{{ $baseID }}-place" class="inputlabel menu-label">Ortsangabe</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="{{ $prefix }}place_statement" id="{{ $baseID }}-place" class="inputinput no-enter whitespace-normal" autocomplete="off" rows="1">{{- $content.PlaceStmt -}}</textarea>
			</div>

		</div-manager>
		{{ template "_annotation_field" (Arr $content.Annotation "Anmerkung" $annotationID) }}
	</div>
	<div class="mt-3">
		<relations-editor data-prefix="{{ $agentsPrefix }}" data-link-base="/person/" data-new-label="(Neu)" data-add-toggle-id="{{ $agentsAddToggleID }}">
			<div class="inputwrapper">
				<div class="inputlabelrow">
					<div class="flex items-center gap-1">
						<label class="inputlabel" for="{{ $agentsSectionID }}">Personen &amp; Körperschaften</label>
						<tool-tip position="top" class="!inline">
							<div class="data-tip">{{ helpOr "contents" "agents" "Beteiligte Personen oder Körperschaften." }}</div>
							<i class="ri-question-line"></i>
						</tool-tip>
					</div>
					<div class="flex items-center gap-3">
						<a href="/personen/new/" class="text-sm font-bold text-gray-700 hover:text-slate-950 no-underline" target="_blank" rel="noreferrer">
							<i class="ri-add-line"></i> Neue Person/Körperschaft anlegen
						</a>
						<button type="button" id="{{ $agentsAddToggleID }}" class="text-sm font-bold text-gray-700 hover:text-slate-950 no-underline pr-3">
							<i class="ri-link"></i> Person verlinken
						</button>
					</div>
				</div>
				<div id="{{ $agentsSectionID }}" class="rel-section-container">
						{{- if and $contentAgentsRender (gt (len $contentAgentsRender) 0) -}}
							{{- range $i, $r := $contentAgentsRender -}}
								{{- $a := index $agents $r.Agent -}}
								<div data-rel-row class="contents-agent-row rel-row">
									<div class="rel-grid">
										<div data-rel-strike class="relation-strike rel-name-col">
											{{- if $a -}}
												<a data-rel-link href="/person/{{ $a.Id }}" class="rel-link" target="_blank" rel="noreferrer">
													<span data-rel-name>{{- $a.Name -}}</span>
												</a>
												{{- if $a.BiographicalData -}}
													<div data-rel-detail-container class="rel-detail"><span data-rel-detail>{{- $a.BiographicalData -}}</span></div>
												{{- end -}}
											{{- else -}}
												<div class="text-base text-gray-800">Unbekannte Person</div>
											{{- end -}}
										</div>
										<div data-rel-strike class="relation-strike">
											<select name="{{ $agentsPrefix }}_type[{{ $r.Id }}]" id="{{ $agentsPrefix }}_type_{{ $r.Id }}" autocomplete="off" class="inputselect font-bold w-full">
												{{- range $t := $agentRelations -}}
													<option value="{{- $t -}}" {{ if eq $r.Type $t }}selected{{ end }}>{{- $t -}}</option>
												{{- end -}}
											</select>
										</div>
										<div data-rel-strike class="relation-strike rel-uncertain-container">
											<input
												type="checkbox"
												name="{{ $agentsPrefix }}_uncertain[{{ $r.Id }}]"
												id="{{ $agentsPrefix }}_uncertain_{{ $r.Id }}"
												{{ if $r.Uncertain }}checked{{ end }} />
											<label for="{{ $agentsPrefix }}_uncertain_{{ $r.Id }}" class="rel-uncertain-label">Unsicher</label>
										</div>
										<div class="rel-button-container">
											<button
												type="button"
												class="text-sm"
												data-delete-toggle="{{ $agentsPrefix }}_delete_{{ $r.Id }}">
												<i class="ri-delete-bin-line mr-1"></i>
												<span class="no-underline" data-delete-label data-delete-default="Entfernen" data-delete-active="Wird entfernt" data-delete-hover="Rückgängig">Entfernen</span>
											</button>
											<input type="checkbox" class="hidden" name="{{ $agentsPrefix }}_delete[{{ $r.Id }}]" id="{{ $agentsPrefix }}_delete_{{ $r.Id }}" />
										</div>
									</div>
									<input type="hidden" name="{{ $agentsPrefix }}_id[{{ $r.Id }}]" value="{{ $r.Id }}" />
									<input type="hidden" name="{{ $agentsPrefix }}_agent[{{ $r.Id }}]" value="{{ $r.Agent }}" />
								</div>
							{{- end -}}
						{{- else if $contentAgents -}}
							{{- range $i, $r := $contentAgents -}}
								{{- $a := index $agents $r.Agent -}}
								<div data-rel-row class="contents-agent-row rel-row">
									<div class="rel-grid">
										<div data-rel-strike class="relation-strike rel-name-col">
											{{- if $a -}}
												<a data-rel-link href="/person/{{ $a.Id }}" class="rel-link" target="_blank" rel="noreferrer">
													<span data-rel-name>{{- $a.Name -}}</span>
												</a>
												{{- if $a.BiographicalData -}}
													<div data-rel-detail-container class="rel-detail"><span data-rel-detail>{{- $a.BiographicalData -}}</span></div>
												{{- end -}}
											{{- else -}}
												<div class="text-base text-gray-800">Unbekannte Person</div>
											{{- end -}}
										</div>
										<div data-rel-strike class="relation-strike">
											<select name="{{ $agentsPrefix }}_type[{{ $r.Id }}]" id="{{ $agentsPrefix }}_type_{{ $r.Id }}" autocomplete="off" class="inputselect font-bold w-full">
												{{- range $t := $agentRelations -}}
													<option value="{{- $t -}}" {{ if eq $r.Type $t }}selected{{ end }}>{{- $t -}}</option>
												{{- end -}}
											</select>
										</div>
										<div data-rel-strike class="relation-strike rel-uncertain-container">
											<input
												type="checkbox"
												name="{{ $agentsPrefix }}_uncertain[{{ $r.Id }}]"
												id="{{ $agentsPrefix }}_uncertain_{{ $r.Id }}"
												{{ if $r.Uncertain }}checked{{ end }} />
											<label for="{{ $agentsPrefix }}_uncertain_{{ $r.Id }}" class="rel-uncertain-label">Unsicher</label>
										</div>
										<div class="rel-button-container">
											<button
												type="button"
												class="text-sm"
												data-delete-toggle="{{ $agentsPrefix }}_delete_{{ $r.Id }}">
												<i class="ri-delete-bin-line mr-1"></i>
												<span class="no-underline" data-delete-label data-delete-default="Entfernen" data-delete-active="Wird entfernt" data-delete-hover="Rückgängig">Entfernen</span>
											</button>
											<input type="checkbox" class="hidden" name="{{ $agentsPrefix }}_delete[{{ $r.Id }}]" id="{{ $agentsPrefix }}_delete_{{ $r.Id }}" />
										</div>
									</div>
									<input type="hidden" name="{{ $agentsPrefix }}_id[{{ $r.Id }}]" value="{{ $r.Id }}" />
									<input type="hidden" name="{{ $agentsPrefix }}_agent[{{ $r.Id }}]" value="{{ $r.Agent }}" />
								</div>
							{{- end -}}
						{{- else -}}
							<div class="rel-empty-text">Keine Personen verknüpft.</div>
						{{- end -}}
				</div>

				<div data-role="relation-add-row" class="flex flex-col gap-2 mt-2 px-2">
						{{- if and $contentAgentsNew (gt (len $contentAgentsNew) 0) -}}
							{{- range $i, $r := $contentAgentsNew -}}
								{{- $a := index $agents $r.Agent -}}
								<div data-rel-row class="rel-row">
									<div class="rel-grid">
										<div data-rel-strike class="relation-strike rel-name-col">
											<div class="text-base text-gray-800 truncate">
												<a data-rel-link class="no-underline hover:text-slate-900" href="/person/{{ $r.Agent }}" target="_blank" rel="noreferrer">
													<span data-rel-name>{{- if $a -}}{{ $a.Name }}{{- end -}}</span>
												</a>
												<em data-rel-new class="rel-new-badge">(Neu)</em>
											</div>
											{{- if $a -}}
												{{- if $a.BiographicalData -}}
													<div data-rel-detail-container class="rel-detail"><span data-rel-detail>{{- $a.BiographicalData -}}</span></div>
												{{- end -}}
											{{- end -}}
										</div>
										<div data-rel-strike class="relation-strike">
											<select name="{{ $agentsPrefix }}_new_type" class="inputselect font-bold w-full">
												{{- range $t := $agentRelations -}}
													<option value="{{- $t -}}" {{ if or (eq $r.Type $t) (and (eq $r.Type "") (eq $t "Autor:in")) }}selected{{ end }}>{{- $t -}}</option>
												{{- end -}}
											</select>
										</div>
										<div data-rel-strike class="relation-strike rel-uncertain-container">
											<input data-rel-input="uncertain" type="checkbox" name="{{ $agentsPrefix }}_new_uncertain" value="{{ $r.Agent }}" {{ if $r.Uncertain }}checked{{ end }} />
											<label data-rel-uncertain-label class="rel-uncertain-label">Unsicher</label>
										</div>
										<div class="rel-button-container">
											<button type="button" class="text-sm text-red-700 hover:text-red-900" data-role="relation-new-delete">
												<i class="ri-delete-bin-line mr-1"></i> Entfernen
											</button>
										</div>
									</div>
									<input type="hidden" data-rel-input="id" name="{{ $agentsPrefix }}_new_id" value="{{ $r.Agent }}" />
								</div>
							{{- end -}}
						{{- end -}}
				</div>

				<div data-role="relation-add-panel" class="mt-2 px-2 hidden">
							<div class="rel-row">
								<div class="rel-grid">
									<div class="min-w-0">
										<label for="{{ $agentsAddToggleID }}-select" class="sr-only">Akteur suchen</label>
										<single-select-remote
											id="{{ $agentsAddToggleID }}-select"
											data-role="relation-add-select"
											name="{{ $agentsPrefix }}_new_id"
											placeholder="Akteur suchen..."
											data-endpoint="/api/agents/search"
											data-result-key="agents"
											data-minchars="1"
											data-limit="15">
										</single-select-remote>
									</div>
									<div>
										<label for="{{ $agentsPrefix }}_new_type" class="sr-only">Beziehung</label>
										<select data-role="relation-type-select" name="{{ $agentsPrefix }}_new_type" id="{{ $agentsPrefix }}_new_type" autocomplete="off" class="inputselect font-bold w-full">
											{{- range $t := $agentRelations -}}
												<option value="{{- $t -}}" {{ if eq $t "Autor:in" }}selected{{ end }}>{{- $t -}}</option>
											{{- end -}}
										</select>
									</div>
									<div class="rel-uncertain-container">
										<input data-role="relation-uncertain" type="checkbox" name="{{ $agentsPrefix }}_new_uncertain" id="{{ $agentsPrefix }}_new_uncertain" />
										<label for="{{ $agentsPrefix }}_new_uncertain" class="rel-uncertain-label">Unsicher</label>
									</div>
									<div class="rel-button-container">
										<div class="flex items-center gap-3 text-lg">
											<button type="button" data-role="relation-add-apply" class="text-gray-700 hover:text-gray-900" aria-label="Person hinzufügen">
												<i class="ri-check-line"></i>
											</button>
											<button type="button" data-role="relation-add-close" class="text-gray-700 hover:text-gray-900" aria-label="Ausblenden">
												<i class="ri-close-line"></i>
											</button>
										</div>
									</div>
								</div>
								<div data-role="relation-add-error" class="text-xs text-red-700 mt-2 hidden" data-error-empty="Bitte Akteur auswählen.">Bitte Akteur auswählen.</div>
							</div>
				</div>

				<template data-role="relation-new-template">
							<div data-rel-row class="rel-row">
								<div class="rel-grid">
									<div data-rel-strike class="relation-strike rel-name-col">
										<div class="text-base text-gray-800 truncate">
											<a data-rel-link class="no-underline hover:text-slate-900">
												<span data-rel-name></span>
											</a>
											<em data-rel-new class="rel-new-badge"></em>
										</div>
										<div data-rel-detail-container class="rel-detail"><span data-rel-detail></span></div>
									</div>
									<div data-rel-strike class="relation-strike">
										<select data-rel-input="type" class="inputselect font-bold w-full"></select>
									</div>
									<div data-rel-strike class="relation-strike rel-uncertain-container">
										<input data-rel-input="uncertain" type="checkbox" />
										<label data-rel-uncertain-label class="rel-uncertain-label">Unsicher</label>
									</div>
									<div class="rel-button-container">
										<button type="button" class="text-sm text-red-700 hover:text-red-900" data-role="relation-new-delete">
											<i class="ri-delete-bin-line mr-1"></i> Entfernen
										</button>
									</div>
								</div>
								<input type="hidden" data-rel-input="id" />
							</div>
				</template>
			</div>
		</relations-editor>
	</div>
</div>