{{ $model := .model }}


<div class="w-full bg-white border border-slate-200 px-4 py-4 hyphens-auto rounded-lg">
	{{- if $model.Pieces.Pages -}}
		<div class="space-y-4">
			<div class="flex items-center gap-2 mb-4">
				<i class="ri-file-list-3-line text-slate-600"></i>
				<h3 class="text-base font-semibold text-slate-800">Inhalt</h3>
			</div>
			{{ range  $page := $model.Pieces.Pages }}
				<div class="mb-4 first:mb-0">
					<div class="flex items-center gap-2 mb-3 pb-2 border-b border-slate-200">
						<i class="ri-file-text-line text-blue-600 text-sm"></i>
						<span class="font-medium text-slate-700 bg-blue-50 px-2 py-1 rounded text-xs">{{ $page }}</span>
					</div>
					<div class="space-y-3">
						{{ range $piece := (index $model.Pieces.Items $page) }}
						<div class="py-2 px-3 bg-slate-50 rounded hover:bg-slate-100 transition-colors duration-200">
							{{ template "_inhaltsverzeichnis_eintrag" $piece }}


								<!-- Links zu anderen Teilen: -->
								{{ if gt (len $piece.IssueRefs) 1 }}
									<div class="mt-3 pt-3 border-t border-slate-100">
										<div class="flex items-center gap-2 mb-2">
											<i class="ri-links-line text-blue-500 text-sm"></i>
											<span class="text-sm font-medium text-slate-600">{{ len $piece.IssueRefs }} Teile:</span>
										</div>
										<div class="flex flex-wrap gap-2">
											{{ range $issue := $piece.IssueRefs }}
												<a
													href="/{{- $issue.When -}}/{{- $issue.Nr -}}"
													class="inline-flex items-center gap-1 px-2 py-1 bg-blue-50 text-blue-700 rounded-md text-xs font-medium hover:bg-blue-100 transition-colors duration-150"
													{{- if and (eq $issue.Nr $model.Number.No) (eq $issue.When.Year
														$model.Datum.When.Year)
													-}}
														aria-current="page"
													{{ end }}>
													<i class="ri-calendar-line text-xs"></i>
													{{- $issue.When.Year }} Nr. {{ $issue.Nr -}}
												</a>
											{{ end }}
										</div>
									</div>
								{{ end }}
						</div>
						{{ end }}


						<!-- Pages end -->
				</div>
				</div>
			{{- end -}}
		</div>
	{{- end -}}


	<!-- Beilagen -->
	{{- if $model.AdditionalPieces.Pages -}}
		<div class="mt-6 pt-6 border-t border-slate-300">
			<div class="flex items-center gap-2 mb-4">
				<i class="ri-attachment-line text-amber-600"></i>
				<h3 class="text-base font-semibold text-slate-800">Beilage</h3>
			</div>
			{{ range  $page := $model.AdditionalPieces.Pages }}
				<div class="mb-4 first:mb-0">
					<div class="flex items-center gap-2 mb-3 pb-2 border-b border-slate-200">
						<i class="ri-file-text-line text-amber-600 text-sm"></i>
						<span class="font-medium text-slate-700 bg-amber-50 px-2 py-1 rounded text-xs">{{ $page }}</span>
					</div>
					<div class="space-y-3">
						{{ range $piece := (index $model.AdditionalPieces.Items $page) }}
						<div class="py-2 px-3 bg-slate-50 rounded hover:bg-slate-100 transition-colors duration-200">
							{{ template "_inhaltsverzeichnis_eintrag" $piece }}


								<!-- Links zu anderen Teilen: -->
								{{ if gt (len $piece.IssueRefs) 1 }}
									<div class="mt-3 pt-3 border-t border-slate-100">
										<div class="flex items-center gap-2 mb-2">
											<i class="ri-links-line text-blue-500 text-sm"></i>
											<span class="text-sm font-medium text-slate-600">{{ len $piece.IssueRefs }} Teile:</span>
										</div>
										<div class="flex flex-wrap gap-2">
											{{ range $issue := $piece.IssueRefs }}
												<a
													href="/{{- $issue.When -}}/{{- $issue.Nr -}}"
													class="inline-flex items-center gap-1 px-2 py-1 bg-blue-50 text-blue-700 rounded-md text-xs font-medium hover:bg-blue-100 transition-colors duration-150"
													{{- if and (eq $issue.Nr $model.Number.No) (eq $issue.When.Year
														$model.Datum.When.Year)
													-}}
														aria-current="page"
													{{ end }}>
													<i class="ri-calendar-line text-xs"></i>
													{{- $issue.When.Year }} Nr. {{ $issue.Nr -}}
												</a>
											{{ end }}
										</div>
									</div>
								{{ end }}
						</div>
						{{ end }}


						<!-- Pages end -->
				</div>
				</div>
			{{- end -}}
		</div>
	{{- end -}}

</div>