<script lang="ts">
	import type { PageData } from './$types';
	export let data: PageData;
	const {qualify_exams,competitive_exams,image,title,subtitle} = data

</script>
<section class="reative flex bg-gradient pt-10 pb-44 md:pb-38">
    <div class="container mx-auto items-start flex flex-wrap">
        <div class="w-full md:w-6/12 lg:w-6/12 xl:w-6/12 px-6">
            <div class="pt-16 sm:pt-18">
                <h2 class="font-semibold text-3xl text-blueGray-600">
                    {title}
                </h2>
                <h2 class="pt-1 text-2xl text-red-400">
                    {subtitle}
                </h2>
                <p class="mt-4 text-lg leading-relaxed text-blueGray-500">
					{@html data.content}
                </p>
                <div class="mt-12">
                    <a
                      href="/qualifying"
                      class=" text-white font-bold px-6 py-4 rounded outline-none focus:outline-none mr-1 mb-1 bg-red-400 active:bg-red-500 uppercase text-sm shadow hover:shadow-lg ease-linear transition-all duration-150"
                    >
                      การคัดเลือก
                    </a>
                    <a
                      href="/competitive"
                      class=" ml-1 text-white font-bold px-6 py-4 rounded outline-none focus:outline-none mr-1 mb-1 bg-blueGray-700 active:bg-blueGray-600 uppercase text-sm shadow hover:shadow-lg ease-linear transition-all duration-150"
                    >
                        การสอบแข่งขัน
                    </a>
                  </div>
            </div>
        </div>
    </div>
    <img
		class="absolute top-0 b-auto right-0  sm:w-5/12 sm:mt-32 pr-10 hidden md:flex"
		src={image?image:'/images/pattern.png'}
		alt="..."
    />
</section>
<section class="pb-40 relative bg-blueGray-100"><!-- mt-48 md:mt-40  -->
    <div
      class="-mt-20 top-0 bottom-auto left-0 right-0 w-full absolute h-20"
      style="transform: translateZ(0);"
    >
      <svg
        class="absolute bottom-0 overflow-hidden"
        xmlns="http://www.w3.org/2000/svg"
        preserveAspectRatio="none"
        version="1.1"
        viewBox="0 0 2560 100"
        x="0"
        y="0"
      >
        <polygon
          class="text-blueGray-100 fill-current"
          points="2560 0 2560 100 0 100"
        ></polygon>
      </svg>
    </div>

	<!-- ประกาศเกี่ยวกับการคัดเลือกบุคลากรกทม. -->
    <div class="container mx-auto">
			<div class="flex flex-wrap px-6">
				<div
					class="w-full pt-20 mb-8 flex flex-wrap justify-between">
					<h6 class="text-2xl font-semibold pb-2">
						ประกาศเกี่ยวกับ<span class="text-red-400">การคัดเลือกบุคลากรกทม.</span>
					</h6>
					<a
						href="/qualifying"
						class="font-semibold text-gray-500 hover:text-gray-400 ease-linear transition-all duration-150"
					>
						ประกาศทั้งหมด
						<i class="fa fa-angle-double-right ml-1 leading-relaxed"></i>
					</a>
				</div>
				
				<div
					class="w-full lg:w-6/12 cardxl"
				>
					<div class="card  bg-white shadow-xl w-full ">
						<figure style="height: 250px;" class="img-hover-zoom--brightness">
							<img src={qualify_exams[0].image} alt="1" class="h-full fit" />
						</figure>
						<div class="card-body">
							<div class="text-sm font-medium text-gray-500">
								ข่าววันที่ : {qualify_exams[0].date}
								<div class="badge bg-blue-100 text-blue-500 border-none ml-4">NEW</div>
							</div>
							<div class="card-title font-medium">
								<a class="hover:text-gray-500" href="/qualifying/{qualify_exams[0].id}">{qualify_exams[0].title}</a>
							</div>
							<div class="text-sm flex flex-wrap justify-end">
								<!-- <div>
									<i class="fab fa-twitter text-blue-500"></i>
									<span class="pl-1 pr-3 text-gray-400">0</span>

									<i class="fab fa-facebook-f text-blue-700"></i>
									<span class="pl-1 pr-3 text-gray-400">0</span>
								
									<i class="fab fa-line text-green-500"></i>
									<span class="pl-1 pr-3 text-gray-400">0</span>
								</div> -->

								<a
									href="/qualifying/{qualify_exams[0].id}"
									class=" text-blue-500 hover:text-blue-300 ease-linear transition-all duration-150"
								>
									อ่านต่อ
									<i class="fa fa-angle-double-right ml-1 text-xs"></i>
								</a>
							</div>						
						</div>
					</div>
				</div>
				<div class="w-full lg:w-6/12">
					<div class="flex flex-wrap space-y-8">
						<div class="flex flex-col w-full">
							<div class="card card-side bg-white shadow-xl w-full">
								<figure class="w-full lg:w-5/12 imgCard">
									<img src={qualify_exams[1].image} alt="1" class="h-full fit" />
								</figure>
								<div class="card-body w-full lg:w-7/12">
									<h2 class="text-sm font-medium text-gray-500">
										{qualify_exams[1].date}
									</h2>
									<div class="card-title font-medium">
										<a class="hover:text-gray-500" href="/qualifying/{qualify_exams[1].id}">{qualify_exams[1].title}</a>
									</div>
									<div class="text-sm flex flex-wrap justify-end">
										<!-- <div>
											<i class="fab fa-twitter text-blue-500"></i>
											<span class="pl-1 pr-3 text-gray-400">0</span>
		
											<i class="fab fa-facebook-f text-blue-700"></i>
											<span class="pl-1 pr-3 text-gray-400">0</span>
										
											<i class="fab fa-line text-green-500"></i>
											<span class="pl-1 pr-3 text-gray-400">0</span>
										</div> -->
		
										<a
											href="/qualifying/{qualify_exams[1].id}"
											class="  text-blue-500 hover:text-blue-300 ease-linear transition-all duration-150"
										>
											อ่านต่อ
											<i class="fa fa-angle-double-right ml-1 text-xs"></i>
										</a>
									</div>						
								</div>
							</div>
						</div>
						<div class=" flex flex-col w-full">
							<div class="card card-side bg-white shadow-xl w-full">
								<figure class="w-full lg:w-5/12 imgCard">
									<img src={qualify_exams[2].image} alt="1"  class="h-full fit"/>
								</figure>
								<div class="card-body w-full lg:w-7/12">
									<div class="text-sm font-medium text-gray-500">
										{qualify_exams[2].date} 
									</div>
									<div class="card-title font-medium">
										<a class="hover:text-gray-500" href="/qualifying/{qualify_exams[2].id}">{qualify_exams[2].title}</a>
									</div>
									<div class="text-sm flex flex-wrap justify-end">
										<!-- <div>
											<i class="fab fa-twitter text-blue-500"></i>
											<span class="pl-1 pr-3 text-gray-400">0</span>
		
											<i class="fab fa-facebook-f text-blue-700"></i>
											<span class="pl-1 pr-3 text-gray-400">0</span>
										
											<i class="fab fa-line text-green-500"></i>
											<span class="pl-1 pr-3 text-gray-400">0</span>
										</div> -->
		
										<a
											href="/qualifying/{qualify_exams[2].id}"
											class="  text-blue-500 hover:text-blue-300 ease-linear transition-all duration-150"
										>
											อ่านต่อ
											<i class="fa fa-angle-double-right ml-1 text-xs"></i>
										</a>
									</div>					
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>

		<!-- ประกาศเกี่ยวกับการสอบแข่งขัน -->
    	<div class="container mx-auto mt-4">
			<div class="flex flex-wrap px-6">
				<div
					class="w-full pt-20 mb-8 flex flex-wrap justify-between">
					<h6 class="text-2xl font-semibold pb-2">
						ประกาศเกี่ยวกับ<span class="text-red-400">การสอบแข่งขัน</span>
					</h6>
					<a
						href="/competitive"
						class="font-semibold text-gray-500 hover:text-gray-400 ease-linear transition-all duration-150"
					>
						ประกาศทั้งหมด
						<i class="fa fa-angle-double-right ml-1 leading-relaxed"></i>
					</a>
				</div>
				
				<div class="w-full lg:w-6/12 cardxl">
					<div class="card  bg-white shadow-xl w-full ">
						<figure style="height: 250px;" class="img-hover-zoom--brightness">
							<img src={competitive_exams[0].image} alt="1" class="h-full fit" />
						</figure>
						<div class="card-body">
							<div class="text-sm font-medium text-gray-500">
								ข่าววันที่ : {competitive_exams[0].date}
								<div class="badge ml-4 bg-blue-100 text-blue-500 border-none">NEW</div>
							</div>
							<div class="card-title font-medium">
								<a class="hover:text-gray-500" href="/competitive/{competitive_exams[0].id}">{competitive_exams[0].title}</a>
							</div>
							<!-- <div class="mt-4 text-sm flex flex-wrap justify-between"> -->
							<div class="text-sm flex flex-wrap justify-end">
								<!-- <div>
									<i class="fab fa-twitter text-blue-500"></i>
									<span class="pl-1 pr-3 text-gray-400">0</span>

									<i class="fab fa-facebook-f text-blue-700"></i>
									<span class="pl-1 pr-3 text-gray-400">0</span>
								
									<i class="fab fa-line text-green-500"></i>
									<span class="pl-1 pr-3 text-gray-400">0</span>
								</div> -->

								<a
									href="/competitive/{competitive_exams[0].id}"
									class="  text-blue-500 hover:text-blue-300 ease-linear transition-all duration-150"
								>
									อ่านต่อ
									<i class="fa fa-angle-double-right ml-1 text-xs"></i>
								</a>
							</div>				
						</div>
					</div>
				</div>
				<div class="w-full lg:w-6/12">
					<div class="flex flex-wrap space-y-8">
						<div class="flex flex-col w-full">
							<div class="card card-side bg-white shadow-xl w-full">
								<figure class="w-full lg:w-5/12 imgCard">
									<img src={competitive_exams[1].image} alt="1" class="h-full fit" />
								</figure>
								<div class="card-body w-full lg:w-7/12">
									<h2 class="text-sm font-medium text-gray-500">
										{competitive_exams[1].date}
									</h2>
									<div class="card-title font-medium">
										<a class="hover:text-gray-500" href="/competitive/{competitive_exams[1].id}">{competitive_exams[1].title}</a>
									</div>
									<div class="text-sm flex flex-wrap justify-end">
										<!-- <div>
											<i class="fab fa-twitter text-blue-500"></i>
											<span class="pl-1 pr-3 text-gray-400">0</span>
		
											<i class="fab fa-facebook-f text-blue-700"></i>
											<span class="pl-1 pr-3 text-gray-400">0</span>
										
											<i class="fab fa-line text-green-500"></i>
											<span class="pl-1 pr-3 text-gray-400">0</span>
										</div> -->
		
										<a
											href="/competitive/{competitive_exams[1].id}"
											class="  text-blue-500 hover:text-blue-300 ease-linear transition-all duration-150"
										>
											อ่านต่อ
											<i class="fa fa-angle-double-right ml-1 text-xs"></i>
										</a>
									</div>					
								</div>
							</div>
						</div>
						<div class=" flex flex-col w-full">
							<div class="card card-side bg-white shadow-xl w-full">
								<figure class="w-full lg:w-5/12 imgCard">
									<img src={competitive_exams[2].image} alt="1"  class="h-full fit"/>
								</figure>
								<div class="card-body w-full lg:w-7/12">
									<div class="text-sm font-medium text-gray-500">
										{competitive_exams[2].date}
									</div>
									<div class="card-title font-medium">
										<a class="hover:text-gray-500" href="/competitive/{competitive_exams[2].id}">{competitive_exams[2].title}</a>
									</div>
									<div class="text-sm flex flex-wrap justify-end">
										<!-- <div>
											<i class="fab fa-twitter text-blue-500"></i>
											<span class="pl-1 pr-3 text-gray-400">0</span>
		
											<i class="fab fa-facebook-f text-blue-700"></i>
											<span class="pl-1 pr-3 text-gray-400">0</span>
										
											<i class="fab fa-line text-green-500"></i>
											<span class="pl-1 pr-3 text-gray-400">0</span>
										</div> -->
		
										<a
											href="/competitive/{competitive_exams[2].id}"
											class="  text-blue-500 hover:text-blue-300 ease-linear transition-all duration-150"
										>
											อ่านต่อ
											<i class="fa fa-angle-double-right ml-1 text-xs"></i>
										</a>
									</div>				
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
</section>
<style>
@media only screen and (max-width: 1024px) {
	.card-side{
		flex-direction: column !important;
		
	}
	.card-side :where(figure:first-child){
		border-start-end-radius: 1rem !important;
		border-end-start-radius: 0rem !important;
	}
	.imgCard{
		height: 250px;
	}
	
}
@media only screen and (max-width: 640px) {
	.bg-gradient{
		background-image: linear-gradient(300deg, rgba(255,0,0,0), #faecf0b4);
	}
}
.card-side{
	flex-direction: row;
}
.card-title{
	height: 80px;
	align-items: start;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
	text-overflow: ellipsis;

}
.imgCard{
	height: 210px;
}
.fit{
	display: block;
    height: 100%;
    width: 100%;
	object-fit: cover;
    object-position: top;
}
</style>