{{- $entries := index . 0 -}}
{{- $contents := index . 1 -}}
{{- $entryTypes := index . 2 -}}
{{- $contentTypes := index . 3 -}}
{{- $contentEntries := index . 4 -}}

<tab-list
	data-default-index="{{ if gt (len $entries) 0 }}0{{ else if $contents }}{{ if gt (len $contents) 0 }}1{{ end }}{{ end }}"
	data-disabled-indices="{{ if and (eq (len $entries) 0) (or (not $contents) (eq (len $contents) 0)) }}0,1{{ else if eq (len $entries) 0 }}0{{ else if or (not $contents) (eq (len $contents) 0) }}1{{ end }}">
	<div class="flex items-center gap-3 text-sm font-bold text-gray-700">
		<div class="tab-list-head flex items-center gap-2">
			<i class="ri-book-2-line"></i>
			<span>Verknüpfte Bände</span>
			<span class="text-xs bg-stone-200 text-gray-800 px-2 py-0.5 rounded-sm">{{ len $entries }}</span>
		</div>
		{{- if $contents -}}
		<div class="tab-list-head flex items-center gap-2">
			<i class="ri-article-line"></i>
			<span>Verknüpfte Inhalte</span>
			<span class="text-xs bg-stone-200 text-gray-800 px-2 py-0.5 rounded-sm">{{ len $contents }}</span>
		</div>
		{{- end -}}
	</div>
	<hr class="border-slate-400 mt-2 mb-3" />
	<div class="tab-list-panel text-sm text-gray-800 max-h-96 overflow-auto pr-1 pl-0 ml-0">
		{{- if $entries -}}
			<ul class="flex flex-col pl-0 pr-0 m-0 ml-0 list-none">
				{{- range $entry := $entries -}}
					{{- $types := "" -}}
					{{- if $entryTypes -}}
						{{- $types = index $entryTypes $entry.Id -}}
					{{- end -}}
					<li class="flex items-baseline justify-between ml-0 p-1 odd:bg-stone-100">
						<div class="flex flex-col gap-1">
							<a href="/almanach/{{ $entry.MusenalmID }}" class="font-bold no-underline hover:text-slate-900">
								{{- $entry.PreferredTitle -}}
							</a>
							{{- if $types -}}
								<div class="text-xs text-gray-800">
									{{- range $i, $t := $types -}}
										{{- if $i }}, {{ end -}}{{ $t -}}
									{{- end -}}
								</div>
							{{- end -}}
						</div>
						<span class="text-xs text-gray-500 whitespace-nowrap">Alm {{ $entry.MusenalmID }}</span>
					</li>
				{{- end -}}
			</ul>
		{{- else -}}
			<div class="italic text-gray-500">Keine Bände verknüpft.</div>
		{{- end -}}
	</div>
	{{- if $contents -}}
	<div class="tab-list-panel text-sm text-gray-800 max-h-96 overflow-auto pr-1 pl-0 ml-0 self-stretch">
		{{- if $contents -}}
			<ul class="flex flex-col pl-0 pr-0 m-0 ml-0 list-none">
				{{- range $content := $contents -}}
					{{- $entry := "" -}}
					{{- if $contentEntries -}}
						{{- $entry = index $contentEntries $content.Entry -}}
					{{- end -}}
					{{- $types := "" -}}
					{{- if $contentTypes -}}
						{{- $types = index $contentTypes $content.Id -}}
					{{- end -}}
					<li class="flex flex-col gap-1 ml-0 p-1 odd:bg-stone-100 px-1">
						<a href="/beitrag/{{ $content.MusenalmID }}" class="no-underline hover:text-slate-900 font-semibold">
							{{- if $content.PreferredTitle -}}{{ $content.PreferredTitle }}{{- else -}}Inhalt #{{ $content.MusenalmID }}{{- end -}}
						</a>
						<div class="text-xs text-gray-800 ">
							{{- if $types -}}
							<span>
							{{- range $i, $t := $types -}}
							{{- if $i }}, {{ end -}}{{ $t -}}
							{{- end -}}
							</span>
							{{- end -}}
							{{- if $entry -}}, in:
								<span><a href="/almanach/{{ $entry.MusenalmID }}" class="no-underline hover:text-slate-900">{{ $entry.PreferredTitle }}</a></span>
							{{- end -}}
							{{- if $content.MusenalmPagination -}}
								<span>Seite: {{ $content.MusenalmPagination }}</span>
							{{- end -}}
						</div>
					</li>
				{{- end -}}
			</ul>
		{{- else -}}
			<div class="italic text-gray-500">Keine Inhalte verknüpft.</div>
		{{- end -}}
	</div>
	{{- end -}}
</tab-list>