{{- $content := index . "content" -}}
{{- $entry := index . "entry" -}}
{{- $csrf := index . "csrf_token" -}}
{{- $agents := index . "agents" -}}
{{- $contentAgents := index . "content_agents" -}}
{{- $overrideID := index . "content_id" -}}
{{- $contentID := $content.Id -}}
{{- if and $overrideID (ne $overrideID "") -}}
	{{- $contentID = $overrideID -}}
{{- end -}}

<div data-role="content-item" class="relative odd:bg-stone-100" data-content-id="{{ $contentID }}">
	<div data-role="content-view">
		<div class="bg-transparent overflow-visible">
			<div class="flex items-center justify-between gap-2 bg-transparent px-2 py-0.5 flex-nowrap whitespace-nowrap" data-content-header="true">
				<div class="flex items-center gap-1.5 text-sm font-bold text-gray-800 flex-1 min-w-0 flex-nowrap whitespace-nowrap">
					<div class="flex items-center gap-1">
						<button
							type="button"
							class="text-slate-600 rounded-sm px-1 py-0.5 text-xs cursor-grab"
							data-role="content-drag-handle"
							draggable="true"
							aria-label="Beitrag verschieben">
							<i class="ri-draggable text-xs"></i>
						</button>
						<button type="button" class="text-slate-600 rounded-sm px-1 py-0.5 text-xs transition-colors hover:bg-stone-300" data-role="content-move-up" aria-label="Beitrag nach oben">
							<i class="ri-arrow-up-line text-xs"></i>
						</button>
						<button type="button" class="text-slate-600 rounded-sm px-1 py-0.5 text-xs transition-colors hover:bg-stone-300" data-role="content-move-down" aria-label="Beitrag nach unten">
							<i class="ri-arrow-down-line text-xs"></i>
						</button>
					</div>
					{{- if $content.MusenalmType -}}
						<span class="flex flex-nowrap gap-1 text-gray-700 font-normal overflow-hidden">
							{{- range $i, $t := $content.MusenalmType -}}
								<span class="content-search-text bg-slate-200 text-slate-900 px-1.5 py-0.5 rounded text-xs font-semibold shadow-sm" data-role="content-type-pill">{{- $t -}}</span>
							{{- end -}}
						</span>
					{{- end -}}
					<div class="flex items-baseline gap-2 text-gray-800 min-w-0 flex-1 overflow-hidden flex-nowrap whitespace-nowrap" data-role="content-header-title">
						<a
							href="/almanach/{{ $entry.MusenalmID }}/contents/{{ $content.MusenalmID }}/edit/"
							class="no-underline hover:text-slate-900 cursor-pointer">
							{{- if $content.PreferredTitle -}}
								<span class="content-search-text text-lg font-normal truncate min-w-0 overflow-hidden" data-role="content-header-title-text">{{- $content.PreferredTitle -}}</span>
							{{- else if $content.TitleStmt -}}
								<span class="content-search-text text-lg font-normal italic truncate min-w-0 overflow-hidden" data-role="content-header-title-text">{{- $content.TitleStmt -}}</span>
							{{- end -}}
						</a>
					</div>
				</div>
				<div class="flex items-center gap-1.5 flex-nowrap whitespace-nowrap shrink-0">
					{{- $scans := $content.ImagePaths -}}
					{{- if $scans -}}
						<span class="inline-flex items-center gap-1 mr-2.5">
							{{- range $i, $scan := $scans -}}
								{{- if lt $i 3 -}}
									<popup-image data-image-url="{{- $scan -}}" class="inline-flex items-center">
										<img
											src="{{- $scan -}}"
											alt="Scan Vorschau"
											class="h-5 w-5 rounded-full object-cover border border-slate-500 shadow-sm" />
									</popup-image>
								{{- end -}}
							{{- end -}}
						</span>
					{{- end -}}
					{{- if or $content.Extent (not $scans) -}}
						<span class="content-search-text {{ if $content.Extent }}bg-blue-900 text-white shadow-sm{{ else }}bg-transparent text-transparent shadow-none{{ end }} px-1.5 py-0.5 rounded-xs text-xs font-semibold shrink-0 inline-flex items-center justify-end min-w-[5ch]" data-role="content-page-pill">
							{{- if $content.Extent -}}S.&thinsp;{{- $content.Extent -}}{{- else -}}&nbsp;&nbsp;&nbsp;{{- end -}}
						</span>
					{{- end -}}
					<span class="status-badge text-xs shadow-sm ml-2" data-status="{{ $content.EditState }}">
						<i class="status-icon text-xs {{- 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>
					</span>
					<a
						href="/almanach/{{ $entry.MusenalmID }}/contents/{{ $content.MusenalmID }}/edit/"
						class="resetbutton w-8 h-8 flex items-center justify-center rounded-sm cursor-pointer hover:bg-stone-300"
						aria-label="Beitrag bearbeiten">
						<i class="ri-edit-2-line text-sm"></i>
					</a>
					<button
						type="button"
						class="resetbutton w-8 h-8 flex items-center justify-center text-red-700 hover:text-red-900 hover:bg-red-100 rounded-sm"
						data-role="content-delete-view"
						aria-label="Beitrag löschen">
						<i class="ri-delete-bin-line text-sm"></i>
					</button>
				</div>
			</div>
			<div data-role="content-match-display" class="content-search-text hidden px-2 py-1 text-sm text-gray-600 bg-amber-50 border-l-2 border-amber-400"></div>
		</div>
	</div>
</div>