<script lang="ts">
	import type { PageData } from './$types';
	export let data: PageData;
	const qualify_exams = data.qualify_exams;
    const competitive_exams = data.competitive_exams;
	const patternVue = "/images/pattern.png";
	const sel1 = "/images/sel1.png";
	const sel2 = "/images/sel2.png";
	const sel3 = "/images/sel3.png";
	const c1 = "/images/c1.jpg";
	const c2 = "/images/c2.jpg";
	const c3 = "/images/c3.jpg";

</script>
<section class="reative flex bg-gradient pt-10 pb-48 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">
                    กองสรรหาบุคคล
                </h2>
                <h2 class="pt-1 text-2xl text-red-400">
                    Recruitment Division
                </h2>
                <p class="mt-4 text-lg leading-relaxed text-blueGray-500">
					{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="{patternVue}"
		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 ">
<<<<<<< HEAD
						<figure style="height: 250px;" class="img-hover-zoom--brightness">
							<img src={qualify_exams[0].img} alt="1" />
						</figure>
						<div class="card-body">
							<div class="text-sm font-medium text-gray-500">
								ข่าววันที่ : {qualify_exams[0].date}
								<div class="badge badge-secondary text-white ml-4">NEW</div>
=======
						<figure style="height: 250px;" class="img-drop">
							<img src="{sel1}" alt="1" />
						</figure>
						<div class="card-body">
							<div class="text-sm font-medium text-gray-500">
								ข่าววันที่ : 24  มี.ค. 2566  
								<div class="badge bg-blue-100 text-blue-500 ml-4 border-0">NEW</div>
>>>>>>> 9fc92cfbcdd0223b44545f835b02bf845116d14b
							</div>
							<div class="card-title font-medium">
								{qualify_exams[0].title}
							</div>
							<div class="mt-4 text-sm flex flex-wrap justify-between">
								<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="/"
									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">
<<<<<<< HEAD
								<figure class="w-full lg:w-5/12 imgCard">
									<img src={qualify_exams[1].img} alt="1" class="h-full" />
=======
								<figure class="w-full lg:w-5/12 img-drop">
									<img src="{sel2}" alt="1" class="h-full" />
>>>>>>> 9fc92cfbcdd0223b44545f835b02bf845116d14b
								</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">
										{qualify_exams[1].title}
									</div>
									<div class="mt-4 text-sm flex flex-wrap justify-between">
										<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="/"
											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">
<<<<<<< HEAD
								<figure class="w-full lg:w-5/12 imgCard">
									<img src={qualify_exams[2].img} alt="1"  class="h-full"/>
=======
								<figure class="w-full lg:w-5/12 img-drop">
									<img src="{sel3}" alt="1"  class="h-full"/>
>>>>>>> 9fc92cfbcdd0223b44545f835b02bf845116d14b
								</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">
										{qualify_exams[2].title}
									</div>
									<div class="mt-4 text-sm flex flex-wrap justify-between">
										<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="/"
											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 ">
<<<<<<< HEAD
						<figure style="height: 250px;" class="img-hover-zoom--brightness">
							<img src={competitive_exams[0].img} alt="1" />
						</figure>
						<div class="card-body">
							<div class="text-sm font-medium text-gray-500">
								ข่าววันที่ : {competitive_exams[0].date}
								<div class="badge badge-secondary text-white ml-4">NEW</div>
=======
						<figure style="height: 250px;" class="img-drop">
							<img src="{c1}" alt="1" />
						</figure>
						<div class="card-body">
							<div class="text-sm font-medium text-gray-500">
								ข่าววันที่ : 24  มี.ค. 2566
								<div class="badge bg-blue-100 text-blue-500 ml-4 border-0">NEW</div>
>>>>>>> 9fc92cfbcdd0223b44545f835b02bf845116d14b
							</div>
							<div class="card-title font-medium">
								{competitive_exams[0].title}
							</div>
							<div class="mt-4 text-sm flex flex-wrap justify-between">
								<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="/"
									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">
<<<<<<< HEAD
								<figure class="w-full lg:w-5/12 imgCard">
									<img src={competitive_exams[1].img} alt="1" class="h-full" />
=======
								<figure class="w-full lg:w-5/12 imgCard img-drop">
									<img src="{c2}" alt="1" class="h-full" />
>>>>>>> 9fc92cfbcdd0223b44545f835b02bf845116d14b
								</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">
										{competitive_exams[1].title}
									</div>
									<div class="mt-4 text-sm flex flex-wrap justify-between">
										<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="/"
											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">
<<<<<<< HEAD
								<figure class="w-full lg:w-5/12 imgCard">
									<img src={competitive_exams[2].img} alt="1"  class="h-full"/>
=======
								<figure class="w-full lg:w-5/12 imgCard img-drop">
									<img src="{c3}" alt="1"  class="h-full"/>
>>>>>>> 9fc92cfbcdd0223b44545f835b02bf845116d14b
								</figure>
								<div class="card-body w-full lg:w-7/12">
									<div class="text-sm font-medium text-gray-500">
										{competitive_exams[2].title}
									</div>
									<div class="card-title font-medium">
										{competitive_exams[2].title}
									</div>
									<div class="mt-4 text-sm flex flex-wrap justify-between">
										<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="/"
											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{
	max-height: 220px;
}
.img-drop {
	filter: brightness(0.98);
}
</style>