---
import Layout from "../../layouts/Layout.astro";
const postData = { key1: 'value1', key2: 'value2'};
const options = { method: 'POST', headers: { 'Content-Type': 'application/json', 'Origin': 'https://2024.dev2-cs.siliconpin.com' }, body: JSON.stringify(postData)};
const response = await fetch('https://apisp.dev2.cicdhosting.com/_dedicated/dwd/get-news/?action=news_zh', options);
const data = await response.json();
const news = data;
// console.log(news);
---
<Layout title="">
    <main>
		<section class="container mx-auto px-4">
			<div class="my-16">
				<span class="text-[#780a0a] font-bold" id="pageName"></span>
				<h1 class="text-4xl font-bold border-b-4 border-[#780A0A]">Latest News</h1>
			</div>
			<div class="flex flex-row md:justify-center my-10 overflow-x-scroll md:overflow-x-clip">
				<a href="/zh/cat/?cat=local" class="border-2 border-[#780a0a] py-2.5 px-6 text-lg text-[#780a0a] hover:bg-[#780a0a50] duration-[1s]">Local</a>
				<a href="/zh/cat/?cat=national" class="border-2 border-[#780a0a] py-2.5 px-6 text-lg text-[#780a0a] hover:bg-[#780a0a50] duration-[1s]">National</a>
				<a href="/zh/cat/?cat=world" class="border-2 border-[#780a0a] py-2.5 px-6 text-lg text-[#780a0a] hover:bg-[#780a0a50] duration-[1s]">World</a>
				<a href="/zh/cat/?cat=politics" class="border-2 border-[#780a0a] py-2.5 px-6 text-lg text-[#780a0a] hover:bg-[#780a0a50] duration-[1s]">Politics</a>
				<a href="/zh/cat/?cat=technology" class="border-2 border-[#780a0a] py-2.5 px-6 text-lg text-[#780a0a] hover:bg-[#780a0a50] duration-[1s]">Technology</a>
			</div>
			<div class="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-4">
				{news.map((items: {id: string | undefined; heading: string | undefined; img: string | undefined; title : string | undefined; content : string | undefined; slug : string | undefined; date_created : string | undefined; in_brief: string | undefined;}) =>
					<div class="flex flex-col border-2 border-[#780a0a] gap-6 p-4 place-content-between rounded-lg">
						<div class="flex flex-col">
							<div class="">
								<a class="flex flex-col" href={`/zh/${items.slug}`}>
									<img class="aspect-video rounded-t-lg" src={items.img} alt={items.title} />
									<h2 class="text-lg text-justify ">{items.title}</h2> 
								</a>
							</div>
							<div>
								<dialog id={`d-${items.id}`} class="shadow-xl rounded-xl md:w-[50%] xl:w-[30%]">
									<form method="dialog">
										<div class="flex flex-col md:flex-col">
											<a href={`/zh/${items.slug}`} class="flex flex-col md:flex-col">
												<img class="rounded-t-xl" src={items.img} alt={items.title} />
												<h1 class="text-lg font-bold">{items.heading} </h1>
												<h2 class="text-justify ">{items.in_brief}</h2>
											</a>
											<div class="flex flex-row place-content-between place-items-center">
												<div class="flex flex-row place-content-between place-items-center p-2 space-x-6 shadow-lg shadow-gray-400 rounded-2xl">
													<a class="hover:-translate-y-2 duration-[1s]" href={`whatsapp://send?text=${items.title}%20%0A%20https://barta-india.in/zh/${items.slug}`} data-action="share/whatsapp/share"><img src="/img/whatsapp.svg" alt="WhatsApp Logo"/></a>
													<a class="hover:-translate-y-2 duration-[1s]" href={`https://www.facebook.com/share.php?u=https://barta-india.in/zh/${items.slug}`} target="_blank"><img src="/img/facebook.svg" alt="Facebook Logo"/></a>                  
													<a class="hover:-translate-y-2 duration-[1s]" href={`http://www.twitter.com/share?url=https://barta-india.in/zh/${items.slug}&text=${items.title}`} target="_blank"><img src="/img/x.svg" alt="Twitter/X Logo"/></a>
													<a class="hover:-translate-y-2 duration-[1s]" href={`https://www.linkedin.com/shareArticle?mini=true&url=https://barta-india.in/zh/${items.slug}&title=${items.title}&summary=${items.title}&source=${items.title}`} onclick="window.open(this.href, 'mywin', 'left=20,top=20,width=500,height=500,toolbar=1,resizable=0'); return false;"><img src="/img/link.svg" alt="Linkdin Logo"/></a>
												</div>
												<div class="flex border-b-4 border-gray-500 border-t rounded-full  text-3xl hover:rotate-180  duration-[3s]">
													<button class="text-white font-bold py-2 px-4 bg-[#780a0a] rounded-full shadow-xl" onclick={`document.getElementById('d-${items.id}').close()`}>&#10008;</button>
												</div>
											</div>
										</div>
									</form>
								</dialog>
							</div>
						</div>
						<div class="flex flex-row place-content-between">
							<button onclick={`document.getElementById('d-${items.id}').showModal()`} class="bg-[#780A0A] text-white rounded-md font-bold py-2 px-6">In Brief</button>
							<a href={`/zh/${items.slug}`} class="bg-[#780A0A] text-white rounded-md font-bold py-2 px-6">Details</a>
						</div>
					</div>
				)}
				<!-- <a href={`/${items.slug}`} class="bg-[#780A0A] text-white rounded-md font-bold px-6 ">Read More>></a> -->
                <!-- <p class="">Publish at: <br/> {items.date_created.split(':')[0].split('T')[0]}</p> -->

			</div>
		</section>		
	</main>
</Layout>