<script>
    import {fade} from 'svelte/transition';
    import TopBorder from "$lib/components/shared/TopBorder.svelte";
    import ViewAllButton from "$lib/components/shared/ViewAllButton.svelte";
    import Search from "svelte-material-icons/SearchWeb.svelte";
    import Play from "svelte-material-icons/Play.svelte";
    import Eye from 'svelte-material-icons/Eye.svelte'
    import ShareButton from "$lib/components/shared/ShareButton.svelte";


    let items = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12];
</script>
<div in:fade={{ duration: 300, delay: 0 }}>


    <section class=" w-full     from-blue-950 to-blue-800 bg-gradient-to-l py-10">
        <div class=" max-w-6xl m-auto">

            <div class="flex flex-row justify-between space-x-8 items-center">

                <ShareButton text="Share this Video"/>


                <div class="flex flex-row space-x-8 items-center">
                    <h1 class="uppercase text-4xl  text-white font-bold">Videos</h1>

                    <div class="relative">
                        <button class="border-r border-gray-500 absolute top-1 px-3">
                            <Search color='white'/>
                        </button>
                        <input type="text"
                               class="bg-transparent border border-white rounded-full text-white pl-12 -mt-2 focus:outline-0"
                               placeholder="Search">
                    </div>

                </div>


            </div>

            <div class="grid grid-cols-3 mt-8 h-100 gap-2 ">
                <div class="col-span-2  h-full  bg-[url('/img/media/video/thumb1.jpg')] bg-cover bg-center flex flex-row items-center justify-center">

                    <span class="relative flex h-12 w-12 ">
                        <span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-red-400 opacity-75"></span>
                        <span class="relative flex flex-row items-center justify-center rounded-full h-12 w-12 bg-white">
                             <Play size="24" color="red"/>
                        </span>
                    </span>


                </div>
                <div class="col-span-1   h-full overflow-auto">
                    <ul class="text-white flex flex-col space-y-1  ">
                        {#each items as i }
                            <li class="h-24 w-full bg-blue-950 grid grid-cols-3">
                                <div class="col-span-1 bg-[url('/img/media/news3.jpg')] bg-cover bg-center h-24 flex flex-row items-center justify-center">

                                  <span class="relative flex h-8 w-8 ">
                                    <span class="relative flex flex-row items-center justify-center rounded-full h-8 w-8 bg-white">
                                         <Play size="18" color="red"/>
                                    </span>
                                    </span>

                                </div>

                                <div class="col-span-2 p-2 flex flex-col justify-between">
                                    <span class="text-sm text-sky-400">03:44</span>
                                    <h1 class="text-sm font-bold line-clamp-2">
                                        Yamin Ahmadzai receives first
                                        Test Cap from Rashid
                                    </h1>

                                    <span class="text-sm">23 DECEMBER 2023</span>
                                </div>
                            </li>
                        {/each}


                    </ul>
                </div>
            </div>
            <div class="flex flex-col  bg-blue-950 p-2">
                <div class="flex flex-row space-x-4 ">

                    <span class=" text-sm text-sky-100 flex flex-row space-x-1  ">
                        <span>
                            <Eye/>
                        </span>
                        <span>2436</span>
                    </span>
                    <span class="text-sm text-sky-100">03:33</span>
                    <span class="text-sm text-sky-100">23 DECEMBER 2023</span>
                </div>
                <p class="text-2xl text-white font-bold">
                    Yamin Ahmadzai receives first Test Cap from Mohammad Nabi
                </p>
                <p class="text-lg text-white">
                    Leicestershire all-rounder becomes the youngest Afghan Test player in UAE
                </p>

            </div>


        </div>
        <div class="max-w-6xl mx-auto mt-16">
            <TopBorder title="Latest Videos" textColor="text-white"/>
            <div class="grid grid-cols-4 gap-2 mt-4">

                {#each items as i}

                    <div class="b h-80 bg-[url('/img/media/video/thumb2.jpg')] bg-cover bg-center mt-4">
                        <div class=" bg-[url('/img/media/video/gradiant2.png')] bg-cover bg-center h-full w-full flex-col  flex justify-end px-2 space-y-4">

                            <div class="flex flex-row justify-between  ">
                            <span class="bg-red-500 text-white px-2 flex flex-row items-center justify-center">

                                    <Play class="-mt-1"/>
                                <span>02:11</span>
                            </span>
                                <span class="text-white flex flex-row space-x-1 items-center">
                                <Eye class="-mt-1"/> <span>8732</span>
                            </span>
                            </div>

                            <p class="text-white text-2xl font-bold line-clamp-2">
                                Asghar Afghan Announces retirement
                            </p>

                        </div>

                    </div>

                {/each}
            </div>
        </div>


        <div class="max-w-6xl mx-auto mt-16">
            <TopBorder title="Most Popular Videos" textColor="text-white"/>
            <div class="grid grid-cols-4 gap-2 mt-4">

                {#each items as i}

                    <div class="b h-80 bg-[url('/img/media/video/thumb2.jpg')] bg-cover bg-center mt-4">
                        <div class=" bg-[url('/img/media/video/gradiant2.png')] bg-cover bg-center h-full w-full flex-col  flex justify-end px-2 space-y-4">

                            <div class="flex flex-row justify-between  ">
                            <span class="bg-red-500 text-white px-2 flex flex-row items-center justify-center">

                                    <Play class="-mt-1"/>
                                <span>02:11</span>
                            </span>
                                <span class="text-white flex flex-row space-x-1 items-center">
                                <Eye class="-mt-1"/> <span>8732</span>
                            </span>
                            </div>

                            <p class="text-white text-2xl font-bold line-clamp-2">
                                Asghar Afghan Announces retirement
                            </p>

                        </div>

                    </div>

                {/each}
            </div>
        </div>

    </section>

</div>