<script lang="ts">
	import ImageFrame from '$lib/components/ImageFrame.svelte';
	import Confetti from '$lib/components/confetti.svelte';
	import { onMount } from 'svelte';

	export let data;

	let last_name: string | null = '';

	const items = data.data
		.map((item) => {
			return {
				...item,
				marginTop: 20 + Math.random() * 50
			};
		})
		.reverse();
	onMount(() => {
		last_name = localStorage.getItem('last-name');
	});
</script>

<div>
	<h1>Gallerie</h1>
	<div class="grid">
		{#each items as item}
			<div style="margin-top: {item.marginTop}px" class:active={item.noble_name === last_name}>
				<ImageFrame src={item.portrait} />
				<p>{item.noble_name}</p>
			</div>
		{/each}
	</div>
</div>

<Confetti />

<style>
	.grid {
		display: grid;
		grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
		padding-bottom: 100px;
	}
	h1 {
		font-size: 4rem;
		font-family: Parisienne, cursive;
		color: white;
		margin-left: 50px;
	}
	p {
		color: white;
		font-family: Parisienne, cursive;
		font-size: 1.2em;
		margin-left: 40px;
		width: 80%;
		margin-top: 10px;
	}
	.active {
		filter: drop-shadow(0px 0px 40px #be8630aa) drop-shadow(0px 0px 5px black)
			drop-shadow(0px 0px 5px black) drop-shadow(0px 0px 5px black);
	}
	div {
		max-width: 1300px;
		width: 80%;
		margin: 0 auto;
	}
</style>
