<template>
    <section class="container mx-auto px-4 my-6">
    <div class="grid grid-cols-1 lg:grid-cols-2 gap-x-10 gap-y-4">
        <div class="grid border-4 border-blue-700 rounded-xl ">
            <p class="bg-blue-700 text-white px-6 py-2 text-2xl font-bold"><span class="underline decoration-4 decoration-[#7c4c23]">Latest Notice</span><span class="shape text-2xl font-bold p-1 rounded-full h-fit">*</span></p>
            <div  class="flex flex-col h-[250px] overflow-y-scroll w-full bg-blue-50 rounded-b-lg">
                <a v-for="data in notice" :key="notice.id" target="_blank" :href="'/notice/'+data.slug" class="px-6 text-xl text-blue-700 hover:underline">{{data.title}}</a>
            </div>
            <a href="/notice" class="flex justify-end bg-blue-50 pt-2"> <span class="bg-blue-700 text-white px-4 py-2 rounded-tl-md font-bold">View All</span> </a>
        </div>
        <div class="grid border-4 border-blue-700 rounded-xl h-fit">
            <p class="shape bg-blue-700 text-white px-6 py-2 text-2xl font-bold underline decoration-4 decoration-[#7c4c23]">Important Links</p>
            <div class="flex flex-col h-[300px] overflow-y-scroll w-full bg-blue-50 rounded-b-lg">
                <a v-for="data in important" :key="important.id" target="_blank" :href="'/'+data.slug" class="px-6 text-xl text-blue-700 hover:underline">{{data.title}}</a>
            </div>
        </div>
    </div>
</section>
<div class="container-fluid bg-stone-600">
    <div class="">
        <div class="container mx-auto px-4 grid grid-cols-1 md:grid-cols-3 bg-stone-600">
            <div class="bg-stone-800 rounded-md  h-44 m-6 text-gray-100 text-left text-xl p-3">Other's Links<hr class="blue-400">
                <div class="grid grid-rows-3 text-blue-600 p-3 gap-4">    
                    <a href="/gallery">Gallery <hr class="border-slate-900"></a>
                    <a href="/notice">Notice <hr class="border-slate-900"></a>
                    <a href="/documents">Documents</a>
                </div>
            </div>
            <div class="bg-stone-800 rounded-md  h-44 m-6 text-gray-100 text-left text-xl p-3">Related Sites<hr>
                <div class="grid grid-rows-3 text-blue-600 p-3 gap-4">    
                    <a href="https://www.wbsubregistration.org/">W.B.S.U<hr class="border-slate-900"></a>
                    <a href="https://www.ugc.ac.in/">U.G.C.<hr class="border-slate-900"></a>
                    <a href="https://banglaruchchashiksha.wb.gov.in/">W.B.H.E.D.</a>
                </div>
            </div>
            <div class="bg-stone-800 rounded-md h-44 m-6 text-gray-100 text-left text-xl p-3">Document Links <hr>
                <div class="grid grid-rows-3 text-blue-600 p-3 gap-4">    
                    <a href="/documents/aqar">AQAR<hr class="border-slate-900"></a>
                    <a href="/documents/iqac">IQAC<hr class="border-slate-900"></a>
                    <a href="/documents/academic-calendar">Academic Calendar</a>
                </div>
            </div>
        </div>
        <div class="container mx-auto px-4 flex flex-col md:flex-row place-items-center md:place-content-between bg-stone-600 text-gray-100 -mt-4 ">
            <a href=""><span class="">© sreechaitanyacollege.in <hr> </span></a>
            <a href="https://dwd.siliconpin.com"><span class="">Powered by DWD Consultancy Services  <hr></span></a>
            <a href=""><span class=""> Count 112964  | Site Performance  <hr> </span></a>
        </div>
    </div>
</div>
</template>
<script>
export default {
    data() {
        return {
            page: null,
            notice: null,
            important: null,
            isLoading: true,
            lpModal:false,


        }
    },
    methods: {   
    },
    mounted: function () {
        fetch('https://api8.siliconpin.com/items/scc22?filter[status][_eq]=published&filter[type][_eq]=notice')
            .then(resp => resp.json())
            .then(data => {
                this.notice=data.data.reverse();
                // console.log(this.dailyplan)
            }),
            fetch('https://api8.siliconpin.com/items/scc22?filter[status][_eq]=published&filter[position][_eq]=important')
            .then(resp => resp.json())
            .then(data => {
                this.important=data.data.reverse()
                // console.log(this.dailyplan)
            })
            
            }
       
        }
    
</script>
<style>
    .shape {
        -webkit-animation: shape 3ss forwards;
        animation: shape 2s infinite;
        color: rgb(255, 0, 0);
    }
    @keyframes shape {
        50%{color: red(187, 224, 85); }
        50%{color: rgb(255, 255, 255); }
        /* 50%{color: rgb(0, 255, 34);} */
    }
</style>
