{{ $model := . }}


<div class="flex flex-row w-full border-b pb-2 mb-3">
	{{- template "_letterhead" .meta -}}


	<div class="self-end justify-self-end grow-0 print:hidden">
		{{ if .prev }}
			<a href="/brief/{{ .prev.Letter }}" class="stdlink"
				><i class="ri-arrow-left-long-line"></i
			></a>
		{{ end }}
		<span class="mx-1 font-variant-small-caps">LKB</span>
		{{ if .next }}
			<a href="/brief/{{ .next.Letter }}" class="stdlink"
				><i class="ri-arrow-right-long-line"></i
			></a>
		{{ end }}
	</div>
	<div class="self-end justify-self-end grow-0 print:hidden ml-4">
		<a
			href="?print=true"
			class="text-gray-700 hover:text-slate-900 cursor-pointer"
			hx-boost="false"
			target="_blank">
			<i class="ri-printer-line"></i>
		</a>
	</div>
</div>

<div class="text flex flex-row print:flex-col">
	<div class="count">
		{{- Safe $model.text.count -}}
	</div>
		<div class="fulltext">
			{{- if $model.text.pages }}
				{{- range $page := $model.text.pages }}
					<div
						class="page"
						data-page-index="{{ $page.Index }}"
						data-starts-inline="{{ if $page.StartsInline }}true{{ else }}false{{ end }}">
						{{- $page.HTML | Safe -}}
					</div>
				{{- end -}}
			{{- else }}
				{{- Safe $model.text.html -}}
			{{- end -}}
		</div>
	<div class="notes">
		{{- Safe $model.text.notes -}}
	</div>
</div>

<div class="traditions mt-12 pt-3 border-t-gray-200 border-t-1 max-w-[90ch] print:border-none">
	{{ template "_lettertrad" $model.meta -}}
</div>

<script type="module">
	// WARNING: We need to wait for the fonts to settle before rendering anything
	document.fonts.ready.then(() => {
		if (window.alignSidenotes) {
			window.alignSidenotes();
		}
	});
</script>