<template>
    <div class="container bg-white mx-auto mt-3  p-4 text-blue-700 leading-loose">
        <h2 class="text-3xl font-bold italic text-center text-black pb-4 underline decoration-blue-600 ">All Notice</h2>
        <div v-if="isLoading" class="">
            <div class="bg-gray-200 h-screen border-2 border-gray-300 shadow-2xl rounded-md opacity-500"></div>
        </div>
        <div v-else class=" flex flex-col border-2 border-gray-300 px-4 rounded-lg shadow-2xl">
            <div  v-for="(item, index) in page" >
                <a :href="'/notice/'+item.slug"> <h3> {{item.title}}</h3> </a>

           
                

            </div>
            <!-- <div v-html="page[0].content" class="container mx-auto">
    
            </div> -->
        </div>
    </div>
    </template>
    
    <script>
    export default {
        data() {
            return {
                page: null,
                isLoading: true
            }
        },
        mounted: function () {
            fetch('https://api8.siliconpin.com/items/scc22?filter[type][_eq]=notice&limit=-1&filter[status][_eq]=published')
            // fetch('https://api8.siliconpin.com/items/scc22?slug=about-us')
                .then(response => response.json())
                .then(data => {
              this.page = data.data.reverse()
            //   console.log(data)
              this.isLoading = false
            })
        }
    }
    </script>