musenalm/views/routes/personen/body.gohtml

{{ $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">
					{{ 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">
									<div class="grow">
										<a href="/person/{{ $agent.Id }}" class="search-result font-bold">
											{{ $agent.Name }}
										</a>
										<span class="inline-block font-sans text-sm">
											{{ 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 -}}
													<div
														class="inline-block px-2 py-0.5 text-sm font-sans
													bg-slate-200 rounded ml-2">
														{{ $p }}
													</div>
												{{- end -}}
											{{- end -}}
										{{- end -}}
									</div>

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

						</div>
					{{ end }}
					{{ if .altagents }}
					{{ 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>