<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>

<section>
    <div class="p-one parallax-inner">
      <h2>การสอบคัดเลือก</h2>
    </div>
</section>
<section class="pb-40 relative bg-blueGray-100">
	<div class="p-3">{@html data.content}</div>
	<div class="container mx-auto justify-center flex flex-wrap">
		<div class=" bg-blueGray-100 -mt-6 px-5 top-0 bottom-auto absolute z-40 rounded-md" >
			<div class="text-sm breadcrumbs">
				<ul>
				  <li class="text-pink-500 hover:text-pink-700 ">
					<a href="/" >
						<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6" /></svg>
					</a>
				  </li> 
				  <li>
					<span class="breadTaxt">การสอบคัดเลือก</span>
				  </li>
				</ul>
			</div>
		</div>
	</div>
	<div class="container mx-auto items-start flex flex-wrap px-4 pt-11">
		<div class="w-full lg:w-7/12 cardxl">
			<div class="card  bg-white shadow-xl w-full">
				<ActivityCalendar {events} />
			</div>
		</div>
		<div class="w-full lg:w-5/12">
			<div
			class=" card bg-white shadow-xl flex flex-col min-w-0 break-words w-full auto-rows-max">
				<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="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={"/qualifying/"+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"><a href={"/qualifying/"+exam.id}>{exam.title}</a></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>
	</div>
</section>
<style>
</style>

