<script lang="ts">
	import Seo from '$lib/components/Seo.svelte';
	import Breadcrumb from '$lib/components/Breadcrumb.svelte';
	import Icon from '$lib/components/Icon.svelte';
	import { personNode } from '$lib/seo';

	let { data } = $props();
	const m = $derived(data.membre);

	const crumbs = $derived([
		{ name: 'Accueil', path: '/' },
		{ name: 'Militants', path: '/militants/' },
		{ name: m.nom, path: `/militants/${m.slug}/` }
	]);

	const graph = $derived([
		personNode(`/militants/${m.slug}/`, m.nom, `${m.role} — ${m.profession}. ${m.biographie}`, {
			jobTitle: m.profession,
			...(m.dateDeces ? { deathDate: m.dateDeces } : {})
		})
	]);
</script>

<Seo
	title={m.nom}
	description={`${m.nom} — ${m.role}. ${m.biographie.slice(0, 155)}`}
	path={`/militants/${m.slug}/`}
	type="profile"
	graph={graph}
	breadcrumb={crumbs}
/>

<main id="contenu" class="section">
	<div class="container">
		<Breadcrumb items={crumbs} />

		<article class="fiche">
			<header class="fiche__head">
				<Icon name="users" size="2.4rem" />
				<div>
					<h1>{m.nom}</h1>
					<p class="fiche__role">{m.role}</p>
					<p class="fiche__prof">{m.profession}</p>
				</div>
			</header>

			<div class="lecture prose">
				<h2 class="sr-only">Biographie</h2>
				<p>{m.biographie}</p>

				{#if m.citation}
					<blockquote>{m.citation}</blockquote>
				{/if}
				{#if m.citations}
					{#each m.citations as c (c)}
						<blockquote>{c}</blockquote>
					{/each}
				{/if}

				{#if m.dateDeces || m.lieuDeces || m.circonstances}
					<h2>Circonstances</h2>
					{#if m.dateDeces}<p><strong>Date :</strong> {m.dateDeces}</p>{/if}
					{#if m.lieuDeces}<p><strong>Lieu :</strong> {m.lieuDeces}</p>{/if}
					{#if m.circonstances}<p>{m.circonstances}</p>{/if}
				{/if}

				{#if m.oeuvre}
					<h2>Œuvre</h2>
					<p class="tag"><Icon name="book" size="1em" /> {m.oeuvre}</p>
				{/if}
			</div>

			<footer class="fiche__src">Sources : {m.source}.</footer>
		</article>

		<p><a class="btn btn--ghost" href="/militants/">← Tous les militants</a></p>
	</div>
</main>

<style>
	.fiche__head {
		display: flex;
		gap: var(--space-2);
		align-items: flex-start;
		padding-bottom: var(--space-3);
		border-bottom: 1px solid var(--line);
		margin-bottom: var(--space-3);
	}
	.fiche__head h1 {
		margin: 0;
		text-transform: none;
	}
	.fiche__role {
		color: var(--accent);
		font-weight: 600;
		margin: 0.3rem 0 0.2rem;
	}
	.fiche__prof {
		color: var(--muted);
		margin: 0;
	}
	.fiche__src {
		margin-top: var(--space-3);
		color: var(--muted-fort);
		font-size: 0.85rem;
	}
	.prose .tag {
		display: inline-flex;
	}
</style>
