<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 Play from "svelte-material-icons/Play.svelte";
    // import { Play } from "@iconify/svelte";
    // import Eye from "svelte-material-icons/Eye.svelte";
    // import { Eye } from "@iconify/svelte";
    import Icon from "@iconify/svelte";

    import {t} from "$lib/translations.js";
    import {page} from "$app/stores";
    import {cubicIn} from "svelte/easing";
    import {fade, slide, scale, fly} from 'svelte/transition'
    import { inView } from '$lib/config/inView';

    let tab = ($page.url.hash).replace(/#/g, '') ? ($page.url.hash).replace(/#/g, '') : 'latest';

    function toggleTab(name) {
        tab = name;
        console.log(tab);
    }

</script>

<section use:inView class="videos to-blue-900 from-blue-950 bg-gradient-to-b pt-20 px-4 lg:px-0 overflow-x-auto no-scrollbar"
         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.watch-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.videos')}" textColor="text-white"/>


        <div class="flex ltr:flex-row rtl:flex-row-reverse text-white  items-center justify-center -mt-2 gap-4">

            <a href="#latest" class="text-sm {tab === 'latest' ? 'border-b border-white ' : ''}"
               on:click={() => {toggleTab('latest')}}>
                {$t('common.latest')}
            </a>
            <a href="#highlights" class="text-sm {tab === 'highlights' ? 'border-b border-white ' : ''}"
               on:click={() => {toggleTab('highlights')}}
            >
                {$t('common.highlights')}
            </a>
            <a href="#interviews" class="text-sm {tab === 'interviews' ? 'border-b border-white ' : ''}"
               on:click={() => {toggleTab('interviews')}}
            >
                {$t('common.interviews')}
            </a>
            <a href="#press-conference" class="text-sm {tab === 'press-conference' ? 'border-b border-white ' : ''}"
               on:click={() => {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 overflow-y-hidden"
             in:fade={{duration: 700}}>

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

                <div class="relative h-full bg-sky-gradiant flex flex-col justify-end  space-y-4">

                    <div class="flex flex-row px-4 justify-between text-white">
                        <div class="flex ltr:flex-row rtl:flex-row-reverse gap-1 bg-red-800  items-center px-2 text-sm">
                        
                            <Icon icon="mdi:play" size="22"/>
                            <span>03:54</span>
                        </div>


                        <div class="flex  ltr:flex-row rtl:flex-row-reverse gap-1 items-center space-x-2 ">
                            <Icon icon="mdi:eye" size="22"/>
                            <span class="font-medium">81,341</span>
                        </div>

                    </div>

                    <div>
                        <p class="flex  ltr:flex-row rtl:flex-row-reverse text-white text-xl  my-4 mx-4 line-clamp-1  font-bold">
                            Asghar Afghan Announces retirement
                        </p>
                    </div>


                </div>

            </div>

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

                <div class="relative h-full bg-sky-gradiant flex flex-col justify-end  space-y-4">

                    <div class="flex ltr:flex-row rtl:flex-row-reverse px-4 justify-between text-white">
                        <div class="flex flex-row bg-red-800 gap-1 items-center px-2 text-sm">
                            <Icon icon="mdi:play" size="22"/>
                            <span>03:54</span>
                        </div>

                        <div class="flex ltr:flex-row rtl:flex-row-reverse gap-1 items-center space-x-2 ">
                            <Icon icon="mdi:eye" size="22"/>
                            <span class="font-medium">81,341</span>
                        </div>
                    </div>

                    <div>
                        <p class="flex  ltr:flex-row rtl:flex-row-reverse text-white text-xl my-4 mx-4 line-clamp-1 font-bold ">
                            Asghar Afghan Announces retirement
                        </p>
                    </div>


                </div>

            </div>

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

                <div class="relative h-full bg-sky-gradiant flex flex-col justify-end  space-y-4">

                    <div class="flex ltr:flex-row rtl:flex-row-reverse gap-1 px-4 justify-between text-white">
                        <div class="flex ltr:flex-row rtl:flex-row-reverse gap-1 bg-red-800  items-center px-2 text-sm">
                            <Icon icon="mdi:play" size="22"/>
                            <span>03:54</span>
                        </div>

                        <div class="flex ltr:flex-row rtl:flex-row-reverse gap-1 items-center space-x-2 ">
                            <Icon icon="mdi:eye" size="22"/>
                            <span class="font-medium">81,341</span>
                        </div>
                    </div>

                    <div>
                        <p class="text-white flex ltr:flex-row rtl:flex-row-reverse  text-xl  my-4 mx-4 line-clamp-1  font-bold">
                            Asghar Afghan Announces retirement
                        </p>
                    </div>


                </div>

            </div>


        </div>
    {/if}

    {#if tab === 'highlights'}

        <div class="max-w-6xl m-auto grid grid-cols-1 lg:grid-cols-3 gap-4 lg:h-96"
             in:fade={{duration: 700}}>

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

                <div class="relative h-full bg-sky-gradiant flex flex-col justify-end  space-y-4">

                    <div class="flex flex-row px-4 justify-between text-white">
                        <div class="flex ltr:flex-row rtl:flex-row-reverse gap-1 bg-red-800  items-center px-2 text-sm">
                            <Icon icon="mdi:play" size="22"/>
                            <span>03:54</span>
                        </div>



                        <div class="flex  ltr:flex-row rtl:flex-row-reverse gap-1 items-center space-x-2 ">
                            <Icon icon="mdi:eye" size="22"/>
                            <span class="font-medium">81,341</span>
                        </div>

                    </div>

                    <div>
                        <p class="flex  ltr:flex-row rtl:flex-row-reverse text-white text-xl  my-4 mx-4 line-clamp-1  font-bold">
                            Asghar Afghan Announces retirement
                        </p>
                    </div>


                </div>

            </div>

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

                <div class="relative h-full bg-sky-gradiant flex flex-col justify-end  space-y-4">

                    <div class="flex ltr:flex-row rtl:flex-row-reverse px-4 justify-between text-white">
                        <div class="flex flex-row bg-red-800 gap-1 items-center px-2 text-sm">
                            <Icon icon="mdi:play" size="22"/>
                            <span>03:54</span>
                        </div>

                        <div class="flex ltr:flex-row rtl:flex-row-reverse gap-1 items-center space-x-2 ">
                            <Icon icon="mdi:eye" size="22"/>
                            <span class="font-medium">81,341</span>
                        </div>
                    </div>

                    <div>
                        <p class="flex  ltr:flex-row rtl:flex-row-reverse text-white text-xl my-4 mx-4 line-clamp-1 font-bold ">
                            Asghar Afghan Announces retirement
                        </p>
                    </div>


                </div>

            </div>

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

                <div class="relative h-full bg-sky-gradiant flex flex-col justify-end  space-y-4">

                    <div class="flex ltr:flex-row rtl:flex-row-reverse gap-1 px-4 justify-between text-white">
                        <div class="flex ltr:flex-row rtl:flex-row-reverse gap-1 bg-red-800  items-center px-2 text-sm">
                            <Icon icon="mdi:play" size="22"/>
                            <span>03:54</span>
                        </div>

                        <div class="flex ltr:flex-row rtl:flex-row-reverse gap-1 items-center space-x-2 ">
                            <Icon icon="mdi:eye" size="22"/>
                            <span class="font-medium">81,341</span>
                        </div>
                    </div>

                    <div>
                        <p class="text-white flex ltr:flex-row rtl:flex-row-reverse  text-xl  my-4 mx-4 line-clamp-1  font-bold">
                            Asghar Afghan Announces retirement
                        </p>
                    </div>


                </div>

            </div>


        </div>
    {/if}

    {#if tab === 'interviews'}

        <div class="max-w-6xl m-auto grid grid-cols-1 lg:grid-cols-3 gap-4 lg:h-96"
             in:fade={{duration: 700}} >

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

                <div class="relative h-full bg-sky-gradiant flex flex-col justify-end  space-y-4">

                    <div class="flex flex-row px-4 justify-between text-white">
                        <div class="flex ltr:flex-row rtl:flex-row-reverse gap-1 bg-red-800  items-center px-2 text-sm">
                            <Icon icon="mdi:play" size="22"/>
                            <span>03:54</span>
                        </div>


                        <div class="flex  ltr:flex-row rtl:flex-row-reverse gap-1 items-center space-x-2 ">
                            <Icon icon="mdi:eye" size="22"/>
                            <span class="font-medium">81,341</span>
                        </div>

                    </div>

                    <div>
                        <p class="flex  ltr:flex-row rtl:flex-row-reverse text-white text-xl  my-4 mx-4 line-clamp-1  font-bold">
                            Asghar Afghan Announces retirement
                        </p>
                    </div>


                </div>

            </div>

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

                <div class="relative h-full bg-sky-gradiant flex flex-col justify-end  space-y-4">

                    <div class="flex ltr:flex-row rtl:flex-row-reverse px-4 justify-between text-white">
                        <div class="flex flex-row bg-red-800 gap-1 items-center px-2 text-sm">
                            <Icon icon="mdi:play" size="22"/>
                            <span>03:54</span>
                        </div>

                        <div class="flex ltr:flex-row rtl:flex-row-reverse gap-1 items-center space-x-2 ">
                            <Icon icon="mdi:eye" size="22"/>
                            <span class="font-medium">81,341</span>
                        </div>
                    </div>

                    <div>
                        <p class="flex  ltr:flex-row rtl:flex-row-reverse text-white text-xl my-4 mx-4 line-clamp-1 font-bold ">
                            Asghar Afghan Announces retirement
                        </p>
                    </div>


                </div>

            </div>

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

                <div class="relative h-full bg-sky-gradiant flex flex-col justify-end  space-y-4">

                    <div class="flex ltr:flex-row rtl:flex-row-reverse gap-1 px-4 justify-between text-white">
                        <div class="flex ltr:flex-row rtl:flex-row-reverse gap-1 bg-red-800  items-center px-2 text-sm">
                            <Icon icon="mdi:play" size="22"/>
                            <span>03:54</span>
                        </div>

                        <div class="flex ltr:flex-row rtl:flex-row-reverse gap-1 items-center space-x-2 ">
                            <Icon icon="mdi:eye" size="22"/>
                            <span class="font-medium">81,341</span>
                        </div>
                    </div>

                    <div>
                        <p class="text-white flex ltr:flex-row rtl:flex-row-reverse  text-xl  my-4 mx-4 line-clamp-1  font-bold">
                            Asghar Afghan Announces retirement
                        </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"
             in:fade={{duration: 700}} >

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

                <div class="relative h-full bg-sky-gradiant flex flex-col justify-end  space-y-4">

                    <div class="flex flex-row px-4 justify-between text-white">
                        <div class="flex ltr:flex-row rtl:flex-row-reverse gap-1 bg-red-800  items-center px-2 text-sm">
                            <Icon icon="mdi:play" size="22"/>
                            <span>03:54</span>
                        </div>


                        <div class="flex  ltr:flex-row rtl:flex-row-reverse gap-1 items-center space-x-2 ">
                            <Icon icon="mdi:eye" size="22"/>
                            <span class="font-medium">81,341</span>
                        </div>

                    </div>

                    <div>
                        <p class="flex  ltr:flex-row rtl:flex-row-reverse text-white text-xl  my-4 mx-4 line-clamp-1  font-bold">
                            Asghar Afghan Announces retirement
                        </p>
                    </div>


                </div>

            </div>

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

                <div class="relative h-full bg-sky-gradiant flex flex-col justify-end  space-y-4">

                    <div class="flex ltr:flex-row rtl:flex-row-reverse px-4 justify-between text-white">
                        <div class="flex flex-row bg-red-800 gap-1 items-center px-2 text-sm">
                            <Icon icon="mdi:play" size="22"/>
                            <span>03:54</span>
                        </div>

                        <div class="flex ltr:flex-row rtl:flex-row-reverse gap-1 items-center space-x-2 ">
                            <Icon icon="mdi:eye" size="22"/>
                            <span class="font-medium">81,341</span>
                        </div>
                    </div>

                    <div>
                        <p class="flex  ltr:flex-row rtl:flex-row-reverse text-white text-xl my-4 mx-4 line-clamp-1 font-bold ">
                            Asghar Afghan Announces retirement
                        </p>
                    </div>


                </div>

            </div>

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

                <div class="relative h-full bg-sky-gradiant flex flex-col justify-end  space-y-4">

                    <div class="flex ltr:flex-row rtl:flex-row-reverse gap-1 px-4 justify-between text-white">
                        <div class="flex ltr:flex-row rtl:flex-row-reverse gap-1 bg-red-800  items-center px-2 text-sm">
                            <Icon icon="mdi:play" size="22"/>
                            <span>03:54</span>
                        </div>

                        <div class="flex ltr:flex-row rtl:flex-row-reverse gap-1 items-center space-x-2 ">
                            <Icon icon="mdi:eye" size="22"/>
                            <span class="font-medium">81,341</span>
                        </div>
                    </div>

                    <div>
                        <p class="text-white flex ltr:flex-row rtl:flex-row-reverse  text-xl  my-4 mx-4 line-clamp-1  font-bold">
                            Asghar Afghan Announces retirement
                        </p>
                    </div>


                </div>

            </div>


        </div>
    {/if}


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

</section>