{{ $model := .model }}


<inhaltsverzeichnis-scrollspy class="hyphens-auto mx-3">
	{{- if $model.Pieces.Pages -}}
		<div class="space-y-4">
			<div class="mb-2"></div>
			{{ range $page := $model.Pieces.Pages }}
				{{ $pageItems := (index $model.Pieces.Items $page) }}
				{{ $firstItem := "" }}
				{{ if $pageItems }}{{ $firstItem = index $pageItems 0 }}{{ end }}


				<!-- Individual page entry -->
				<div
					class="mb-4 first:mb-0 pl-2 3xl:pl-4 border-l-4 border-slate-300 page-entry"
					data-page-container="{{ $page }}">
					<div class="flex items-center justify-between gap-2 mb-2">
						<div class="flex items-center gap-2">
							<span class="icon-container"
								>{{ if $firstItem }}
									{{ PageIcon $firstItem.PageIcon }}
								{{ else }}
									{{ PageIcon "first" }}
								{{ end }}</span
							>
							<a
								href="#page-{{ $page }}"
								class="page-number-inhalts font-bold text-slate-700 bg-slate-100 px-2 py-1 rounded text-sm transition-colors duration-200 hover:bg-slate-200 no-underline relative"
								data-page-number="{{ $page }}">
								<span class="page-label">{{ $page }}</span>
								{{ template "_page_link_indicator" (dict "pageNumber" $page "targetPage" $.targetPage) }}
							</a>
						</div>
						<button
							class="page-permalink-btn text-slate-400 hover:text-slate-700 text-xs p-1 rounded hover:bg-slate-100 transition-colors duration-200"
							title="Link zu dieser Seite kopieren"
							onclick="copyPagePermalink('{{ $page }}', this)"
							data-page="{{ $page }}">
							<i class="ri-link text-sm"></i>
						</button>
					</div>

					<!-- Content area -->
					<div class="space-y-0">
						{{ if $pageItems }}
							{{ range $individualPiece := $pageItems }}
								<div
									class="inhalts-entry py-1 px-0 rounded {{ if $individualPiece.PieceByIssue.IsContinuation }}
										continuation-entry
									{{ end }}"
									data-page="{{ $page }}"
									{{ if $individualPiece.PieceByIssue.IsContinuation }}
										data-is-continuation="true"
									{{ end }}
									{{ if $individualPiece.PieceByIssue.ID }}
										data-multipart-id="{{ $individualPiece.PieceByIssue.ID }}"
									{{ end }}
									style="{{ if $individualPiece.PieceByIssue.IsContinuation }}
										display: none;
									{{ end }}">
									{{ template "_unified_piece_entry" (dict "Piece" $individualPiece.PieceByIssue "DisplayMode" "issue" "ShowPlaceTags" true "UseColonFormat" false "ShowContinuation" true) }}


									<!-- Links zu anderen Teilen: -->
									{{ if and (not $individualPiece.PieceByIssue.IsContinuation) (gt (len $individualPiece.IssueRefs) 1) }}
										<div class="multipart-parts mt-1 pt-1 border-t border-slate-100">
											<div class="flex items-center flex-wrap gap-1">
												<i class="ri-links-line text-slate-600 text-sm mr-1"></i>
												{{ range $index, $issue := $individualPiece.IssueRefs }}
													<div
														class="inline-flex items-center gap-1 px-2 py-1 bg-slate-100 rounded-md text-xs font-medium hover:bg-slate-200 transition-colors duration-150 {{- if and (eq $issue.Nr $model.Number.No) (eq $issue.When.Year $model.Datum.When.Year) -}}
															bg-red-100 text-red-700
														{{ end }}">
														<span class="text-black text-xs font-bold">{{ add $index 1 }}</span>
														<span class="w-px h-3 bg-slate-300 mx-1"></span>
														<span
															class="{{- if and (eq $issue.Nr $model.Number.No) (eq $issue.When.Year $model.Datum.When.Year) -}}
																text-red-700 pointer-events-none
															{{ end }}"
															{{- if and (eq $issue.Nr $model.Number.No) (eq $issue.When.Year
																$model.Datum.When.Year)
															-}}
																aria-current="page"
															{{ end }}>
															{{ template "_citation" $issue }}
														</span>
													</div>
												{{ end }}
												<!-- Link zum gesamten Beitrag anzeigen -->
												{{ if and (not $individualPiece.PieceByIssue.IsContinuation) (gt (len $individualPiece.IssueRefs) 1) }}
													<div
														class="inline-flex items-center gap-1 px-2 py-1 bg-blue-50
												hover:bg-blue-100 text-blue-700 hover:text-blue-800 border border-blue-200
												hover:border-blue-300 rounded text-xs font-medium transition-colors
												duration-200">
														<i class="ri-file-copy-2-line text-xs"></i>
														<a
															href="{{ GetPieceURL $individualPiece.PieceByIssue.ID }}"
															class="">
															Ganzer Beitrag
														</a>
													</div>
												{{ end }}
											</div>
										</div>
									{{ end }}

								</div>
							{{ end }}
						{{ else }}
							<!-- Empty page indicator -->
							<div class="inhalts-entry py-1 px-0">
								<div class="entry-description leading-snug mb-1">
									<span class="italic text-slate-500">Leer</span>
								</div>
							</div>
						{{ 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 $pageIndex, $page := $model.AdditionalPieces.Pages }}
				{{ $pageItems := (index $model.AdditionalPieces.Items $page) }}
				{{ $firstItem := "" }}
				{{ if $pageItems }}{{ $firstItem = index $pageItems 0 }}{{ end }}
				{{ $allPages := $model.AdditionalPieces.Pages }}
				{{ $pageCount := len $allPages }}
				{{ $iconType := "first" }}
				{{ if eq $pageIndex 0 }}
					{{ $iconType = "first" }}
				{{ else if eq $pageIndex (sub $pageCount 1) }}
					{{ $iconType = "last" }}
				{{ else if eq (mod $pageIndex 2) 1 }}
					{{ $iconType = "even" }}
				{{ else }}
					{{ $iconType = "odd" }}
				{{ end }}


				<!-- Individual beilage page entry -->
				<div
					class="mb-4 first:mb-0 pl-2 3xl:pl-4 border-l-4 border-amber-400 page-entry"
					data-page-container="{{ $page }}"
					data-beilage="true">
					<div class="flex items-center justify-between gap-2 mb-2">
						<div class="flex items-center gap-2">
							<span class="icon-container"
								>{{ if $firstItem }}
									{{ PageIcon $firstItem.PageIcon }}
								{{ else }}
									{{ PageIcon $iconType }}
								{{ end }}</span
							>
							<a
								href="#beilage-{{ $page }}"
								class="page-number-inhalts font-bold text-slate-700 bg-amber-50 px-2 py-1 rounded text-sm transition-colors duration-200 hover:bg-amber-100 no-underline"
								data-page-number="{{ $page }}">
								<span class="page-label">{{ $page }}</span>
							</a>
						</div>
						<button
							class="page-permalink-btn text-slate-400 hover:text-amber-600 text-xs p-1 rounded hover:bg-amber-50 transition-colors duration-200"
							title="Link zu dieser Seite kopieren"
							onclick="copyPagePermalink('{{ $page }}', this, true)"
							data-page="{{ $page }}"
							data-beilage="true">
							<i class="ri-link text-sm"></i>
						</button>
					</div>

					<!-- Content area -->
					<div class="space-y-0">
						{{ if $pageItems }}
							{{ range $individualPiece := $pageItems }}
								<div
									class="inhalts-entry py-1 px-0 bg-slate-50 rounded hover:bg-slate-100 transition-colors duration-200 {{ if $individualPiece.PieceByIssue.IsContinuation }}
										continuation-entry
									{{ end }}"
									data-page="{{ $page }}"
									{{ if $individualPiece.PieceByIssue.IsContinuation }}
										data-is-continuation="true"
									{{ end }}
									{{ if $individualPiece.PieceByIssue.ID }}
										data-multipart-id="{{ $individualPiece.PieceByIssue.ID }}"
									{{ end }}
									style="{{ if $individualPiece.PieceByIssue.IsContinuation }}
										display: none;
									{{ end }}">
									{{ template "_unified_piece_entry" (dict "Piece" $individualPiece.PieceByIssue "DisplayMode" "issue" "ShowPlaceTags" true "UseColonFormat" false "ShowContinuation" true) }}


									<!-- Links zu anderen Teilen: -->
									{{ if and (not $individualPiece.PieceByIssue.IsContinuation) (gt (len $individualPiece.IssueRefs) 1) }}
										<div class="multipart-parts mt-1 pt-1 border-t border-slate-100">
											<div class="flex items-center flex-wrap gap-1">
												<i class="ri-links-line text-slate-600 text-sm mr-1"></i>
												{{ range $index, $issue := $individualPiece.IssueRefs }}
													<div
														class="inline-flex items-center gap-1 px-2 py-1 bg-slate-100 rounded-md text-xs font-medium hover:bg-slate-200 transition-colors duration-150 {{- if and (eq $issue.Nr $model.Number.No) (eq $issue.When.Year $model.Datum.When.Year) -}}
															bg-red-100 text-red-700
														{{ end }}">
														<span class="text-black text-xs font-bold">{{ add $index 1 }}</span>
														<span class="w-px h-3 bg-slate-300 mx-1"></span>
														<span
															class="{{- if and (eq $issue.Nr $model.Number.No) (eq $issue.When.Year $model.Datum.When.Year) -}}
																text-red-700 pointer-events-none
															{{ end }}"
															{{- if and (eq $issue.Nr $model.Number.No) (eq $issue.When.Year
																$model.Datum.When.Year)
															-}}
																aria-current="page"
															{{ end }}>
															{{ template "_citation" $issue }}
														</span>
													</div>
												{{ end }}
												<!-- Link zum gesamten Beitrag anzeigen -->
												{{ if and (not $individualPiece.PieceByIssue.IsContinuation) (gt (len $individualPiece.IssueRefs) 1) }}
													<div
														class="inline-flex items-center gap-1 px-2 py-1 bg-blue-50
												hover:bg-blue-100 text-blue-700 hover:text-blue-800 border border-blue-200
												hover:border-blue-300 rounded text-xs font-medium transition-colors
												duration-200">
														<i class="ri-file-copy-2-line text-xs"></i>
														<a
															href="{{ GetPieceURL $individualPiece.PieceByIssue.ID }}"
															class="">
															Ganzer Beitrag
														</a>
													</div>
												{{ end }}
											</div>
										</div>
									{{ end }}

								</div>
							{{ end }}
						{{ else }}
							<!-- Empty page indicator -->
							<div class="inhalts-entry py-1 px-0">
								<div class="entry-description leading-snug mb-1">
									<span class="italic text-slate-500">Leer</span>
								</div>
							</div>
						{{ end }}
					</div>
				</div>
			{{- end -}}
		</div>
	{{- end -}}

</inhaltsverzeichnis-scrollspy>