<script lang="ts">
	import { page } from '$app/stores';
	import GuardianList from '$lib/components/organisms/GuardianList/GuardianList.svelte';

	let studentId = $derived($page.params.id ?? '');
</script>

<svelte:head>
	<title>Fiche élève - Classeo</title>
</svelte:head>

<div class="student-detail">
	<header class="page-header">
		<a href="/admin/students" class="back-link">&larr; Retour</a>
		<h1>Fiche élève</h1>
	</header>

	<GuardianList {studentId} />
</div>

<style>
	.student-detail {
		max-width: 48rem;
		margin: 0 auto;
		padding: 1.5rem;
		display: flex;
		flex-direction: column;
		gap: 1.5rem;
	}

	.page-header {
		display: flex;
		flex-direction: column;
		gap: 0.5rem;
	}

	.back-link {
		font-size: 0.875rem;
		color: #6b7280;
		text-decoration: none;
		width: fit-content;
	}

	.back-link:hover {
		color: #3b82f6;
	}

	.page-header h1 {
		margin: 0;
		font-size: 1.5rem;
		font-weight: 700;
		color: #1f2937;
	}
</style>
