<script>

    import TopBorder from "$lib/components/shared/TopBorder.svelte";
    import BottomBorder from "$lib/components/shared/BottomBorder.svelte";
    import ViewAllButton from "$lib/components/shared/ViewAllButton.svelte";
    import {t} from '$lib/translations.js';
    import { inView } from '$lib/config/inView';


</script>

<section  use:inView class="matches h-96 from-blue-900 to-blue-950 bg-gradient-to-b pt-20 px-4 lg:px-0" 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.view-all')}" link="/" bgColor="bg-white" iconColor="bg-sky-400"/>


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

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

        <div class="flex flex-row text-white space-x-4 items-center justify-center -mt-2">
            <a href="/" class="text-sm border-b border-white">{$t('common.fixtures')}</a>
            <a href="/" class="text-sm">{$t('common.results')}</a>
        </div>

    </div>


    <div class="fixture-container container h-36 flex flex-row items-center max-w-8xl ">

        <div class="absolute flex flex-col border-t border-r border-b border-gray-700 rounded-tr-lg rounded-br-lg h-36 w-96 overflow-hidden">

            <div class="relative h-full w-full">
                <div class="absolute h-56 w-56 bg-gray-900 rounded-full left-14  filter blur-2xl"></div>
                <!--                <div class="absolute h-56 w-56 bg-red-700 rounded-full left-[6rem] bottom-1 filter blur-3xl"></div>-->
                <!--                <div class="absolute h-56 w-56 bg-green-700 rounded-full left-[12rem] top-0 filter blur-3xl"></div>-->
            </div>

            <div class="absolute w-[80%] top-0 text-white flex flex-col  items-center pt-3 px-4 right-0">
                <p class="title text-[16px] line-clamp-1">
                    Afghanistan Tour of Sri lanka 2022-23
                </p>
                <p class="sub-title text-[14px] text-gray-300">
                    Fri 25 Nov 2022 10:30 am AFT
                </p>

                <div class="flex flex-row mt-2 space-x-8 items-center justify-end border-t border-b border-gray-600 py-1">
                    <div class="flex flex-col items-center">
                        <img src="/favicon.png" class="h-8" alt="">
                        <p class="text-[10px] uppercase">Afghanistan</p>
                    </div>

                    <p class="text-sm">VS</p>

                    <div class="flex flex-col items-center">
                        <img src="/favicon.png" class="h-8" alt="">
                        <p class="text-[10px] uppercase">Sri Lanka</p>
                    </div>

                </div>
                <p class="text-[12px]">
                    1st ODI, Pallekele
                </p>
            </div>
        </div>

        <div class=" relative  left-[23.8rem] border-t border-r border-b border-gray-700 rounded-tr-lg rounded-br-lg h-36 w-80 overflow-hidden">

            <div class="absolute h-full w-full   flex flex-col">
                <div class="relative h-full w-full">
                    <!--                    <div class="absolute h-56 w-56 bg-gray-900 rounded-full left-14  filter blur-2xl"></div>-->
                    <!--                    <div class="absolute h-56 w-56 bg-red-700 rounded-full left-[6rem] bottom-1 filter blur-3xl"></div>-->
                    <div class="absolute h-56 w-56 bg-sky-700 rounded-full left-0 top-0 filter blur-3xl"></div>
                </div>

                <div class="absolute w-full top-0 text-white flex flex-col  items-center pt-3 px-4 right-0">
                    <p class="title text-[16px] line-clamp-1">
                        Afghanistan Tour of Sri lanka 2022-23
                    </p>
                    <p class="sub-title text-[14px] text-gray-300">
                        Fri 25 Nov 2022 10:30 am AFT
                    </p>

                    <div class="flex flex-row mt-2 space-x-8 items-center justify-end border-t border-b border-gray-600 py-1">
                        <div class="flex flex-col items-center ">
                            <img src="/favicon.png" class="h-8" alt="">
                            <p class="text-[10px] uppercase">Afghanistan</p>
                        </div>

                        <p class="text-sm">VS</p>

                        <div class="flex flex-col items-center">
                            <img src="/favicon.png" class="h-8" alt="">
                            <p class="text-[10px] uppercase">India</p>
                        </div>

                    </div>
                    <p class="text-[12px]">
                        1st ODI, Pallekele
                    </p>
                </div>
            </div>

        </div>
        <div class=" relative  left-[23.6rem] border-t border-r border-b border-gray-700 rounded-tr-lg rounded-br-lg h-36 w-80 overflow-hidden">

            <div class="absolute h-full w-full   flex flex-col">
                <div class="relative h-full w-full">
                    <!--                    <div class="absolute h-56 w-56 bg-gray-900 rounded-full left-14  filter blur-2xl"></div>-->
                    <!--                    <div class="absolute h-56 w-56 bg-red-700 rounded-full left-[6rem] bottom-1 filter blur-3xl"></div>-->
                    <div class="absolute h-56 w-56 bg-sky-700 rounded-full left-[12rem] top-0 filter blur-3xl"></div>
                </div>

                <div class="absolute w-full top-0 text-white flex flex-col  items-center pt-3 px-4 right-0">
                    <p class="title text-[16px] line-clamp-1">
                        Afghanistan Tour of Sri lanka 2022-23
                    </p>
                    <p class="sub-title text-[14px] text-gray-300">
                        Fri 25 Nov 2022 10:30 am AFT
                    </p>

                    <div class="flex flex-row mt-2 space-x-8 items-center justify-end border-t border-b border-gray-600 py-1">
                        <div class="flex flex-col items-center">
                            <img src="/favicon.png" class="h-8" alt="">
                            <p class="text-[10px] uppercase">Afghanistan</p>
                        </div>

                        <p class="text-sm">VS</p>

                        <div class="flex flex-col items-center">
                            <img src="/favicon.png" class="h-8" alt="">
                            <p class="text-[10px] uppercase">Sri Lanka</p>
                        </div>

                    </div>
                    <p class="text-[12px]">
                        1st ODI, Pallekele
                    </p>
                </div>
            </div>

        </div>
        <div class=" relative  left-[23.5rem] border-t border-r border-b border-gray-700 rounded-tr-lg rounded-br-lg h-36 w-80 overflow-hidden">

            <div class="absolute h-full w-full   flex flex-col">
                <div class="relative h-full w-full">
                    <div class="absolute h-56 w-56 bg-gray-900 rounded-full left-14  filter blur-2xl"></div>
                    <!--                    <div class="absolute h-56 w-56 bg-red-700 rounded-full left-[6rem] bottom-1 filter blur-3xl"></div>-->
                    <!--                    <div class="absolute h-56 w-56 bg-green-700 rounded-full left-[12rem] top-0 filter blur-3xl"></div>-->
                </div>

                <div class="absolute w-full top-0 text-white flex flex-col  items-center pt-3 px-4 right-0">
                    <p class="title text-[16px] line-clamp-1">
                        Afghanistan Tour of Sri lanka 2022-23
                    </p>
                    <p class="sub-title text-[14px] text-gray-300">
                        Fri 25 Nov 2022 10:30 am AFT
                    </p>

                    <div class="flex flex-row mt-2 space-x-8 items-center justify-end border-t border-b border-gray-600 py-1">
                        <div class="flex flex-col items-center">
                            <img src="/favicon.png" class="h-8" alt="">
                            <p class="text-[10px] uppercase">Afghanistan</p>
                        </div>

                        <p class="text-sm">VS</p>

                        <div class="flex flex-col items-center">
                            <img src="/favicon.png" class="h-8" alt="">
                            <p class="text-[10px] uppercase">Sri Lanka</p>
                        </div>

                    </div>
                    <p class="text-[12px]">
                        1st ODI, Pallekele
                    </p>
                </div>
            </div>

        </div>


    </div>

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

    

</section>