---
import Layout from '../layouts/Layout.astro';
import { fetchEvenementsPassés } from "../lib/contentful";
import GrilleSpectaclesPassés from "../components/GrilleSpectaclesPassés.astro";

export const prerender = false

const evenementsPassés = await fetchEvenementsPassés()
---

<Layout title="Nos spectacles passés - Les Particules">
	<main>
		<a href="../" style="text-decoration: none; color: black; display: inline">
			<img alt="Logo" src="/les-particules-bleu-sur-noir-pastille.svg" style="width:80px; vertical-align: middle; display: inline" />
		</a>
		<h1 style="display: inline; margin-left: 0.2em">
			Nos spectacles passés
		</h1>
		
		{evenementsPassés.length > 0 ? (
			<div class="dates">
				<p class="intro">
					Découvrez les spectacles que nous avons eu le plaisir de jouer !
				</p>
				<GrilleSpectaclesPassés evenements={evenementsPassés} afficherLienVoirTout={false} limite={999} />
			</div>
		) : (
			<div class="dates">
				<p class="intro">
					Aucun spectacle passé pour le moment. Revenez bientôt !
				</p>
			</div>
		)}
		
		<div class="albums-link">
			<a href="https://www.flickr.com/photos/les-particules/albums/" target="_blank" class="voir-tous-albums">
				Voir tous nos albums photos →
			</a>
		</div>
	</main>
</Layout>

<style>
	main {
		margin: auto;
		padding: 1.5rem;
		max-width: none;
	}
	
	h1 {
		font-size: 2rem;
		font-weight: 700;
		margin: 0.5em 0;
	}
	
	.dates {
		line-height: 1.6;
		margin: 1rem 0;
		border: 1px solid rgba(var(--accent), 25%);
		background-color: white;
		padding: 1rem;
		border-radius: 0.4rem;
		box-shadow: 0.2em 0.2em 1em black;
	}
	
	.intro {
		font-size: 1.1em;
		margin-bottom: 1.5em;
		color: rgb(68,68,68);
		font-weight: 500;
	}
	
	.albums-link {
		text-align: center;
		margin: 3rem 0 2rem;
	}
	
	.voir-tous-albums {
		display: inline-block;
		padding: 0.75rem 1.5rem;
		background-color: orange;
		color: white;
		text-decoration: none;
		border: black solid 2px;
		border-radius: 0.4rem;
		font-weight: bold;
		box-shadow: 0.2em 0.2em 0.5em rgba(0,0,0,0.3);
		transition: all 0.3s ease;
	}
	
	.voir-tous-albums:hover {
		background-color: darkorange;
		transform: translateY(-2px);
		box-shadow: 0.3em 0.3em 0.7em rgba(0,0,0,0.4);
	}
	
</style>