<script>
    import BottomBorder from "$lib/components/shared/BottomBorder.svelte";
    import ViewAllButton from "$lib/components/shared/ViewAllButton.svelte";
    import TopBorder from "$lib/components/shared/TopBorder.svelte";
    import {t, locale} from '$lib/translations.js';

    import {page} from "$app/stores";
    import {fade} from 'svelte/transition'
    import { inView } from '$lib/config/inView';

    let tab =  $state('latest');

    function toggleTab(name) {
        tab = name;
    }

</script>
<section use:inView class="news from-blue-900 to-blue-950  bg-gradient-to-b pt-20 px-4 -mt-1" style="direction: ltr;">

    <div>
        
    <div class="max-w-6xl flex ltr:flex-row rtl:flex-row-reverse items-right justify-end m-auto h-2 ">

        <ViewAllButton label={$t('common.read-all')} link="/media/latest-news" bgColor="bg-white"
                       iconColor="bg-sky-400"/>


    </div>
    <div class="max-w-6xl flex flex-col  m-auto h-16 ">

        <TopBorder title={$t('common.news')} textColor="text-white"/>

        <div class="flex ltr:flex-row rtl:flex-row-reverse text-white gap-4 items-center justify-center -mt-2">
            <!--            <a href="/" class="text-sm border-b border-white">{$t('common.latest')}</a>-->
            <!--            <a href="/" class="text-sm">{$t('common.press-release')}</a>-->
            <!--            <a href="/" class="text-sm">{$t('common.press-conference')}</a>-->

            <a href="#latest" class="text-sm {tab === 'latest' ? 'border-b border-white ' : ''}"
               onclick={() => {toggleTab('latest')}}>
                {$t('common.latest')}
            </a>

            <a href="#press-release" class="text-sm {tab === 'press-release' ? 'border-b border-white ' : ''}"
               onclick={() => {toggleTab('press-release')}}
            >
                {$t('common.press-release')}
            </a>

            <a href="#press-conference" class="text-sm {tab === 'press-conference' ? 'border-b border-white ' : ''}"
               onclick={() => {toggleTab('press-conference')}}
            >
                {$t('common.press-conference')}
            </a>
        </div>

    </div>

    {#if tab === 'latest'}
        <div class="max-w-6xl m-auto grid grid-cols-1 lg:grid-cols-3 gap-4 lg:h-96 {$locale !== 'en-US' ? 'direction-rtl' : ''}" in:fade={{duration: 700}}>
            <div class="h-96 lg:h-full  bg-[url('/img/news/1.jpg')]  bg-cover bg-center ">

                <div class="relative h-full bg-blue-gradiant bg-cover flex flex-col justify-end">

                    <div class="flex  flex-row  px-4 justify-between text-white text-[12px]">
                        <div class="flex ltr:flex-row rtl:flex-row-reverse rounded items-center px-2">

                            <span class="uppercase text-sm">INTERNATIONAL</span>
                        </div>

                        <div class="flex ltr:flex-row rtl:flex-row-reverse items-center space-x-2 ">

                            <span class="">15 JUL 2023</span>
                        </div>
                    </div>

                    <div>
                        <p class="flex ltr:flex-row rtl:flex-row-reverse text-white text-xl my-4 mx-4 line-clamp-2 ">
                            Abdalyan Beat Sri Lanka A to register 2nd Successive Win
                        </p>
                    </div>


                </div>

            </div>
            <div class="h-96 lg:h-full  bg-[url('/img/news/2.jpg')]  bg-cover bg-center">

                <div class="relative h-full bg-blue-gradiant bg-cover flex flex-col justify-end  ">

                    <div class="flex flex-row px-4 justify-between text-white text-[12px]">
                        <div class="flex flex-row rounded items-center px-2">

                            <span class="uppercase text-sm">INTERNATIONAL</span>
                        </div>

                        <div class="flex flex-row items-center space-x-2 ">

                            <span class="">17 JUL 2023</span>
                        </div>
                    </div>

                    <div>
                        <p class="text-white text-xl my-4 mx-4 line-clamp-2">
                            Afghanistan to Host Pakistan for a three-match ODI Series in August

                        </p>
                    </div>


                </div>

            </div>
            <div class="h-96 lg:h-full  bg-[url('/img/news/3.jpg')]  bg-cover bg-center">

                <div class="relative h-full bg-blue-gradiant bg-cover flex flex-col justify-end  ">

                    <div class="flex flex-row px-4 justify-between text-white text-[12px]">
                        <div class="flex flex-row rounded items-center px-2">

                            <span class="uppercase text-sm">Domestic</span>
                        </div>

                        <div class="flex flex-row items-center space-x-2 ">

                            <span class="">19 JUL 2023</span>
                        </div>
                    </div>

                    <div>
                        <p class="text-white text-xl my-4 mx-4 line-clamp-2 ">
                            ACB, Super Cola Extend Long-Term Commercial Partnership

                        </p>
                    </div>


                </div>

            </div>


        </div>
    {/if}
    {#if tab === 'press-release'}
        <div class="max-w-6xl m-auto grid grid-cols-1 lg:grid-cols-3 gap-4 lg:h-96 {$locale !== 'en-US' ? 'direction-rtl' : ''}" in:fade={{duration: 700}}>
            <div class="h-96 lg:h-full  bg-[url('/img/news/1.jpg')]  bg-cover bg-center ">

                <div class="relative h-full bg-blue-gradiant bg-cover flex flex-col justify-end">

                    <div class="flex  flex-row  px-4 justify-between text-white text-[12px]">
                        <div class="flex ltr:flex-row rtl:flex-row-reverse rounded items-center px-2">

                            <span class="uppercase text-sm">INTERNATIONAL</span>
                        </div>

                        <div class="flex ltr:flex-row rtl:flex-row-reverse items-center space-x-2 ">

                            <span class="">15 JUL 2023</span>
                        </div>
                    </div>

                    <div>
                        <p class="flex ltr:flex-row rtl:flex-row-reverse text-white text-xl my-4 mx-4 line-clamp-2 ">
                            Abdalyan Beat Sri Lanka A to register 2nd Successive Win
                        </p>
                    </div>


                </div>

            </div>
            <div class="h-96 lg:h-full  bg-[url('/img/news/2.jpg')]  bg-cover bg-center">

                <div class="relative h-full bg-blue-gradiant bg-cover flex flex-col justify-end  ">

                    <div class="flex flex-row px-4 justify-between text-white text-[12px]">
                        <div class="flex flex-row rounded items-center px-2">

                            <span class="uppercase text-sm">INTERNATIONAL</span>
                        </div>

                        <div class="flex flex-row items-center space-x-2 ">

                            <span class="">17 JUL 2023</span>
                        </div>
                    </div>

                    <div>
                        <p class="text-white text-xl my-4 mx-4 line-clamp-2">
                            Afghanistan to Host Pakistan for a three-match ODI Series in August

                        </p>
                    </div>


                </div>

            </div>
            <div class="h-96 lg:h-full  bg-[url('/img/news/3.jpg')]  bg-cover bg-center">

                <div class="relative h-full bg-blue-gradiant bg-cover flex flex-col justify-end  ">

                    <div class="flex flex-row px-4 justify-between text-white text-[12px]">
                        <div class="flex flex-row rounded items-center px-2">

                            <span class="uppercase text-sm">Domestic</span>
                        </div>

                        <div class="flex flex-row items-center space-x-2 ">

                            <span class="">19 JUL 2023</span>
                        </div>
                    </div>

                    <div>
                        <p class="text-white text-xl my-4 mx-4 line-clamp-2 ">
                            ACB, Super Cola Extend Long-Term Commercial Partnership

                        </p>
                    </div>


                </div>

            </div>


        </div>
    {/if}
    {#if tab === 'press-conference'}
        <div class="max-w-6xl m-auto grid grid-cols-1 lg:grid-cols-3 gap-4 lg:h-96 {$locale !== 'en-US' ? 'direction-rtl' : ''}"in:fade={{duration: 700}}>
            <div class="h-96 lg:h-full  bg-[url('/img/news/1.jpg')]  bg-cover bg-center ">

                <div class="relative h-full bg-blue-gradiant bg-cover flex flex-col justify-end">

                    <div class="flex  flex-row  px-4 justify-between text-white text-[12px]">
                        <div class="flex ltr:flex-row rtl:flex-row-reverse rounded items-center px-2">

                            <span class="uppercase text-sm">INTERNATIONAL</span>
                        </div>

                        <div class="flex ltr:flex-row rtl:flex-row-reverse items-center space-x-2 ">

                            <span class="">15 JUL 2023</span>
                        </div>
                    </div>

                    <div>
                        <p class="flex ltr:flex-row rtl:flex-row-reverse text-white text-xl my-4 mx-4 line-clamp-2 ">
                            Abdalyan Beat Sri Lanka A to register 2nd Successive Win
                        </p>
                    </div>


                </div>

            </div>
            <div class="h-96 lg:h-full  bg-[url('/img/news/2.jpg')]  bg-cover bg-center">

                <div class="relative h-full bg-blue-gradiant bg-cover flex flex-col justify-end  ">

                    <div class="flex flex-row px-4 justify-between text-white text-[12px]">
                        <div class="flex flex-row rounded items-center px-2">

                            <span class="uppercase text-sm">INTERNATIONAL</span>
                        </div>

                        <div class="flex flex-row items-center space-x-2 ">

                            <span class="">17 JUL 2023</span>
                        </div>
                    </div>

                    <div>
                        <p class="text-white text-xl my-4 mx-4 line-clamp-2">
                            Afghanistan to Host Pakistan for a three-match ODI Series in August

                        </p>
                    </div>


                </div>

            </div>
            <div class="h-96 lg:h-full  bg-[url('/img/news/3.jpg')]  bg-cover bg-center">

                <div class="relative h-full bg-blue-gradiant bg-cover flex flex-col justify-end  ">

                    <div class="flex flex-row px-4 justify-between text-white text-[12px]">
                        <div class="flex flex-row rounded items-center px-2">

                            <span class="uppercase text-sm">Domestic</span>
                        </div>

                        <div class="flex flex-row items-center space-x-2 ">

                            <span class="">19 JUL 2023</span>
                        </div>
                    </div>

                    <div>
                        <p class="text-white text-xl my-4 mx-4 line-clamp-2 ">
                            ACB, Super Cola Extend Long-Term Commercial Partnership

                        </p>
                    </div>


                </div>

            </div>


        </div>
    {/if}


    <BottomBorder bgColor="bg-blue-950"/>
    </div>

</section>