{{ $model := . }}


<!-- INFO: 1. Container -->
<div class="container-normal mt-4" x-data="{ search : '{{ $model.search }}'}">
	{{ template "menu" . }}


	<!-- INFO: 2. Spalten-Layout -->
	<div class="flex flex-row items-stretch">
		{{ template "alphabet" . }}


		<!-- INFO: 3. rechte Spalte -->
		<div class="w-full self-stretch {{ if not .search -}}border-b border-zinc-300{{- end -}}">
			<!-- INFO: 4. Header -->
			<div id="personheader" class="border-t border-r border-zinc-300 relative w-full">
				{{ template "heading" . }}
				<div class="flex flex-row justify-end mt-12 items-end">
					{{ template "notifier" . }}
					{{ template "professionselectbox" . }}
					{{ template "searchbox" . }}
				</div>
			</div>

			<!-- INFO: 4. Personenliste -->
			<div class="mt-7 pl-9 pr-5 font-serif font-lg pb-7" id="searchresults">
				{{ if or .agents .altagents }}
					{{ if .agents }}
						<div class="w-full flex flex-col">
							{{ range $count, $agent := .agents }}
								<div
									class="flex flex-row odd:bg-stone-100 even:bg-stone-50 px-3 py-0.5"
									id="personlist">
									<div class="grow" id="{{- $agent.Id -}}">
										<a href="/person/{{ $agent.Id }}" class="search-result font-bold">
											{{ $agent.Name }}
										</a>
										<span
											class="inline-block font-sans text-sm
											{{ if $model.FTS -}}
												search-result
											{{- end -}}">
											{{ if not $agent.CorporateBody }}
												{{ $agent.BiographicalData }}
											{{ end }}
										</span>

										{{ if $agent.Pseudonyms }}
											<p class="italic indent-3">
												auch:
												<span class="search-result">
													{{ $agent.Pseudonyms }}
												</span>
											</p>
										{{ end }}
									</div>

									<div class="w-48 text-right shrink-0">
										{{- if $agent.CorporateBody -}}
											<span class="text-sm font-sans text-gray-500">Körperschaft</span>
										{{ else }}
											{{- $parr := $agent.ProfessionArray -}}
											{{- if $parr -}}
												{{- range $i, $p := $parr -}}
													<a
														href="/personen/?letter={{- Upper (First $agent.Name) -}}&filter={{ Lower $p }}"
														class="inline-block px-2 py-0.5 text-sm font-sans no-underline
														hover:text-slate-950 bg-slate-200 rounded ml-2">
														{{ $p }}
													</a>
												{{- end -}}
											{{- end -}}
										{{- end -}}
									</div>

									<div class="w-28 ml-4 shrink-0 font-sans text-sm text-right flex flex-row mt-1">
										{{- if (index $model.bcount $agent.Id) -}}
											<div class="mr-2">
												<tool-tip position="top">
													<i class="ri-book-line"></i> {{ index $model.bcount $agent.Id }}
													<div class="data-tip">Bände</div>
												</tool-tip>
											</div>
										{{- end -}}
										{{- if index $model.ccount $agent.Id -}}
											<div class="">
												<tool-tip position="top">
													<i class="ri-article-line"></i> {{ index $model.ccount $agent.Id }}
													<div class="data-tip">Beiträge</div>
												</tool-tip>
											</div>
										{{- end -}}
									</div>

									<div class="w-64 ml-4 shrink-0 {{ if $model.FTS -}}search-result{{- end -}}">
										{{ $agent.References }}
									</div>
								</div>
							{{ end }}

						</div>
					{{ end }}
				{{ else }}
					<p>Keine Personen gefunden.</p>
				{{ end }}

				{{ if .search }}
					<script type="module">
					let elements = document.querySelectorAll('.search-result');
					let mark_instance = new Mark(elements);
					// INFO: we wait a little bit before marking, to settle everything
						setTimeout(() => {
							mark_instance.mark('{{ $model.search }}', {
								"seperateWordSearch": true,
							});
						}, 200);
					</script>
				{{ end }}
				<!-- INFO: Ende Personenliste -->
			</div>
			<!-- INFO: Ende rechte Spalte -->
		</div>
		<!-- INFO: Ende Spalten-Layout -->
	</div>
	<!-- INFO: Ende Container -->
</div>