<script lang="ts">
	import ActivityCalendar from '$lib/components/ActivityCalendar.svelte'
    import type { PageData } from './$types'
    export let data: PageData;
	const exams = data.exams
	const events = data.events
</script>

<div class="x">
	<ActivityCalendar {events} />
</div>
<section class="items-start h-screen flex max-h-1000-px pt-10  bg-blueGray-100">

	<div class="container mx-auto items-start flex flex-wrap px-4">
		<h2 class="font-semibold text-2xl text-blueGray-600 mb-4">
			การสอบคัดเลือก
		</h2>
		<div
		class=" relative flex flex-col min-w-0 break-words w-full mb-6 shadow-lg rounded bg-white"
		>
		<div class="rounded-t mb-0 px-4 py-3 border-0">
			<div class="flex flex-wrap items-center">
			<div class="relative w-full px-4 max-w-full flex-grow flex-1">
				<h3
				class="font-semibold text-lg text-blueGray-700'"
				>
					รายการสอบ
				</h3>
			</div>
			</div>
		</div>
			<div class="block w-full overflow-x-auto">
				<table class="items-center w-full bg-transparent border-collapse">
					<thead>
					<tr>
					<th class="px-6 align-middle border border-solid py-3 text-xs uppercase border-l-0 border-r-0 whitespace-nowrap font-semibold text-left bg-blueGray-50 text-blueGray-500 border-blueGray-100">วันที่</th> 
					<th class="px-6 align-middle border border-solid py-3 text-xs uppercase border-l-0 border-r-0 whitespace-nowrap font-semibold text-left bg-blueGray-50 text-blueGray-500 border-blueGray-100">การสอบ</th> 
					<th class="px-6 align-middle border border-solid py-3 text-xs uppercase border-l-0 border-r-0 whitespace-nowrap font-semibold text-left bg-blueGray-50 text-blueGray-500 border-blueGray-100">หน่วยงาน</th> 
					</tr>
				</thead> 
				<tbody>
					{#each exams as exam}
					<tr>
					<th class="border-t-0 px-6 align-middle border-l-0 border-r-0 text-xs whitespace-nowrap p-4 text-left"><a href={"/exams/"+exam.id}>{exam.date}</a></th> 
					<td class="border-t-0 px-6 align-middle border-l-0 border-r-0 text-xs whitespace-nowrap p-4 text-left">{exam.detail}</td> 
					<td class="border-t-0 px-6 align-middle border-l-0 border-r-0 text-xs whitespace-nowrap p-4 text-left">{exam.institute}</td> 
					{/each}
				</tbody> 
				</table>
			</div>
		</div>
	</div>

</section>

