package main

// fieldNoteComponent renders an article-style dispatch from the field.
templ fieldNoteComponent(data FieldNoteData) {
	<article
		data-block="earthen:field_note"
		data-empty?={ data.Empty }
		class="earthen-field-note earthen-paper-frame mx-auto my-12 max-w-3xl p-8 rounded-lg"
		style="background-color: hsl(var(--card)); color: hsl(var(--card-foreground)); border: 1px solid hsl(var(--border));"
	>
		<header class="mb-6">
			<div
				class="earthen-byline flex flex-wrap gap-x-3 gap-y-1 uppercase tracking-wider text-xs mb-2"
				style="color: hsl(var(--muted-foreground));"
			>
				if data.Author != "" {
					<span class="earthen-byline-author">By { data.Author }</span>
				}
				if data.Location != "" {
					<span class="earthen-byline-location">{ data.Location }</span>
				}
				if data.Dateline != "" {
					<span class="earthen-byline-date">{ data.Dateline }</span>
				}
			</div>
			<div class="botanical-rule" aria-hidden="true">
				@botanicalGlyph("seed", 28)
			</div>
		</header>
		if data.Image != "" {
			<figure class="my-6 earthen-paper-frame-inner">
				<img
					src={ resolveMedia(data.Image) }
					alt=""
					class="w-full h-auto rounded"
				/>
			</figure>
		}
		if data.Body != "" {
			<div
				class="earthen-body drop-cap prose-base"
				style={ "font-family: var(--font-body, \"Spectral\", Georgia, serif); color: hsl(var(--foreground));" }
			>
				@templ.Raw(data.Body)
			</div>
		} else {
			<p class="earthen-empty" style="color: hsl(var(--muted-foreground));">
				No dispatch yet — add a body to share what you saw in the field.
			</p>
		}
	</article>
}