<script>
    import {fade} from 'svelte/transition'
    import TopBorder from "$lib/components/shared/TopBorder.svelte";

    const docs = [
        // {
        //     id: 1,
        //     title: 'MCC Laws <br /> of Cricket',
        //     bg: '/img/about/documents/mcc-laws-of-cricket.png',
        //     file: '',
        //
        // },
        // {
        //     id: 2,
        //     title: 'ICC <br /> Anti-Corruption Code',
        //     bg: '/img/about/documents/icc-anti.png',
        //     file: '',
        //
        // },
        
        {
            id: 3,
            title: 'ACB <br /> Anti-Corruption Code',
            bg: '/img/about/documents/acb-anti-corruption-code.png',
            file: '/img/about/documents/pdf/Anti-Corruption-Code-Afghanistan-Cricket-Board.pdf',

        },
        {
            id: 4,
            title: 'Anti Doping Code <br /> Wada Prohibited List',
            bg: '/img/about/documents/anti-doping.png',
            file: '/img/about/documents/pdf/anti-doping-code.pdf',

        },
        {
            id: 5,
            title: 'ICC <br /> ANTI-DISCRIMINATION CODE',
            bg: '/img/about/documents/icc-anti-discrimination.png',
            file: '/img/about/documents/pdf/anti-discrimination-code.pdf',

        },
        // {
        //     id: 6,
        //     title: 'ACB CODE OF CONDUCT / <br /> DISCIPLINE COMMITTEE',
        //     bg: '/img/about/documents/mcc-laws-of-cricket.png',
        //     file: '',
        //
        // },
    ]
</script>
<div in:fade={{ duration: 300, delay: 0 }}>
    <section
            class=" w-full  from-blue-950 to-blue-800 bg-gradient-to-l h-104">

        <div class="w-full h-full  bg-[url('/img/about/documents/laws-bg.png')] bg-cover bg-center ">
            <div class=" max-w-6xl m-auto flex flex-row items-baseline  h-92 space-y-20 ">
                <h2 class="text-white text-center text-5xl font-bold uppercase mt-56">Laws and <br> code of conducts
                </h2>


            </div>
        </div>


    </section>

    <section class="w-full  from-blue-950 to-blue-800 bg-gradient-to-l">


        <div class=" max-w-6xl m-auto flex flex-col   h-92 py-14 ">

            <TopBorder title="Documents" textColor="text-white"/>

            <div class="grid grid-cols-3 my-10 gap-4">

                {#each docs as doc (doc.id)}
                    <a href="{doc.file}" >


                        <div class="bg-blue-950 ">

                            <div class="  h-80 flex flex-col " style="background-image: url('{doc.bg}')">
                                <div class="label relative bg-white  text-sky-500 font-bold  text-center w-[90px] rounded-br-lg rounded-tr-lg text-sm pl-5 pr-2 mt-2">
                                    10 Pages
                                </div>
                                <p class="text-white text-center text-2xl font-bold uppercase mt-24">
                                    { @html doc.title}
                                </p>
                                <div class="h-full  grid  place-content-end">
                                    <div class="label-2 relative bg-sky-500  text-white font-bold  text-left w-[60px] h-5 rounded-bl-lg rounded-tl-lg text-sm pl-5 pr-2 mb-2 ">
                                        PDF
                                    </div>
                                </div>


                            </div>

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

            </div>

        </div>
    </section>
</div>

<style>
    .label::before {
        border-color: rgba(66, 214, 151, 0);
        border-bottom-color: #6DBAFA;
    }

    .label::before {
        position: absolute;

        left: -15px;
        top: -15px;

        height: 0;
        width: 0;
        transform: rotate(-45deg);
        content: " ";
        pointer-events: none;
        border-width: 0.9rem;
    }

    .label-2::before {
        border-color: rgba(66, 214, 151, 0);
        border-bottom-color: #fff;
    }

    .label-2::before {
        position: absolute;

        right: -15px;
        top: -14px;

        height: 0;
        width: 0;
        transform: rotate(45deg);
        content: " ";
        pointer-events: none;
        border-width: 0.9rem;
    }
</style>