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

<section>
    <div class="p-one parallax-inner">
      <h2>การคัดเลือก</h2>
    </div>
</section>
<section class="pb-40 relative bg-blueGray-100">
	
	<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 class="w-full row pt-8 justify-start px-7">
			<div class="full-width text-left">{@html data.content}</div>
		</div> -->
	</div>
	<div class="container mx-auto items-start flex flex-wrap px-4 pt-11">
		<div class="w-full lg:w-8/12 cardxl">
			<div class="card  bg-white shadow-lg w-full">
				<ActivityCalendar {events} />
			</div>
		</div>
		<div class="w-full lg:w-4/12">
			<div
			class="flex flex-col min-w-0 break-words w-full shadow-lg auto-rows-max card bg-white">
				<div class="rounded-t mb-0 p-3 border-0 ">
					<div class="flex flex-wrap items-center justify-between">
						<h3 class="text-lg text-blueGray-700 font-semibold">
							รายการคัดเลือก
						</h3>
						<div class="text-xs font-light">จำนวน {exams.length} รายการ</div>
					</div>
				</div>
				<div class="w-full">
					<div class="flex flex-wrap space-y-3 card-list px-3">
						{#each exams as exam}
							<div class="flex flex-col w-full">
								<a href={"/qualifying/"+exam.id}>
									<div class="card card-side card-outline w-full">
										<figure class="w-full lg:w-3/12 imgCard2">
											<img src={exam.image} alt="1" class="h-full fit2" />
										</figure>
										<div class="px-5 py-3 w-full lg:w-9/12">
											<h2 class="text-xs font-light text-gray-500">
												{exam.date??""}
											</h2>
											<div class="pt-1 text-sub">
												{exam.title}
											</div>
										</div>
									</div>
								</a>
							</div>
						{/each}
					</div>
				<!-- <div class="block w-full overflow-x-auto">
					<table class="items-center w-full bg-transparent border-collapse tableScroll">
						<thead>
						<tr>
						<th class="px-6 align-middle border border-solid py-3 text-sm 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-sm 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-sm 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-sm 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-sm 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-sm whitespace-nowrap p-4 text-left">{exam.category??""}</td> 
						{/each}
					</tbody> 
					</table>
				</div> -->
			</div>
		</div>
	</div>
</section>
<style>
</style>

