<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 { webPage } from '$lib/seo';
	import { sources, metadata } from '$lib/data/gong';

	const crumbs = [
		{ name: 'Accueil', path: '/' },
		{ name: 'Sources', path: '/sources/' }
	];
</script>

<Seo
	title="Sources & bibliographie"
	description="Les 15 sources académiques, journalistiques et archivistiques du dossier documentaire sur le GONG : Sylvain Mary, Contretemps, LDH, Lutte Ouvrière, Archives nationales, Wikipédia, etc."
	path="/sources/"
	graph={[webPage('/sources/', 'Sources et bibliographie', 'Sources du dossier documentaire sur le GONG.')]}
	breadcrumb={crumbs}
/>

<main id="contenu" class="section">
	<div class="container">
		<Breadcrumb items={crumbs} />
		<h1>Sources & bibliographie</h1>
		<p class="lecture intro">{metadata.avertissement}</p>

		<ol class="biblio">
			{#each sources as s, i (s.titre)}
				<li class="ref">
					<Icon name="book" size="1.2rem" />
					<div>
						<p class="ref__titre">
							{#if s.url}
								<a href={s.url} rel="external noopener noreferrer" target="_blank">{s.titre}</a>
								<Icon name="external" size="0.85em" />
							{:else}
								{s.titre}
							{/if}
						</p>
						<p class="ref__meta">
							<strong>{s.auteur}</strong> · {s.editeur}{s.annee !== 'Non daté' ? `, ${s.annee}` : ''} · <span class="ref__type">{s.type}</span>
						</p>
					</div>
				</li>
			{/each}
		</ol>

		<h2 class="credits-titre">Crédits iconographiques</h2>
		<ul class="credits lecture">
			<li>
				<strong>Proclamation de Louis Delgrès</strong> (« À l'univers entier », 1802) —
				Ambre Troizat, <a href="https://commons.wikimedia.org/wiki/File:Delgres_Monnereau_Vivre_libres_ou_mourir.png" rel="external noopener noreferrer" target="_blank">Wikimedia Commons</a>, licence CC BY-SA 3.0.
			</li>
			<li>
				<strong>Drapeau de l'UPLG</strong> (proposition de drapeau national) —
				<a href="https://commons.wikimedia.org/wiki/File:Flag_of_Guadeloupe_(UPLG).svg" rel="external noopener noreferrer" target="_blank">Wikimedia Commons</a>, domaine public.
			</li>
			<li><strong>Logo et drapeau du GONG</strong> — Organisation Ka Internationale.</li>
		</ul>

		<p class="lecture note">
			Ce site est un travail de documentation à but non lucratif et pédagogique. Les extraits de
			textes historiques sont reproduits à des fins de mémoire et de recherche, avec mention de leur
			provenance.
		</p>
	</div>
</main>

<style>
	.intro {
		color: var(--muted);
		margin-bottom: var(--space-4);
	}
	.biblio {
		list-style: none;
		margin: 0;
		padding: 0;
		display: grid;
		gap: var(--space-2);
		counter-reset: ref;
	}
	.ref {
		display: flex;
		gap: var(--space-2);
		background: var(--card-bg);
		border: 1px solid var(--line);
		border-left: 4px solid var(--accent);
		border-radius: var(--radius-md);
		padding: var(--space-2) var(--space-3);
	}
	.ref__titre {
		margin: 0 0 0.2rem;
		font-weight: 600;
		color: var(--creme);
	}
	.ref__titre a {
		color: var(--creme);
	}
	.ref__titre a:hover {
		color: var(--accent);
	}
	.ref__meta {
		margin: 0;
		color: var(--muted);
		font-size: 0.9rem;
	}
	.ref__type {
		font-style: italic;
	}
	.credits-titre {
		margin-top: var(--space-5);
		font-size: 1.3rem;
	}
	.credits {
		display: grid;
		gap: 0.5rem;
		padding-left: 1.1rem;
		color: var(--muted);
		font-size: 0.92rem;
	}
	.note {
		margin-top: var(--space-4);
		color: var(--muted-fort);
		font-size: 0.88rem;
	}
</style>
