<template>
    <div class="container-fluid bg-white mx-auto mt-3  p-0">
        <div v-if="isLoading">
            <h2 class="ml-28 text-4xl"> Page Loading ...</h2>
        </div>
        <div v-else>
            
                
         
                
        <div class="grid grid-cols-1 md:grid-cols-2">
            <div class="grid p-6"><h2 class="text-2xl font-semibold"> {{page[0].name}}</h2>
                <h2 class="text-blue-700">By. {{page[0].author}}</h2>
                    <h2 class="text-2xl font-semibold">Price. {{page[0].Price}}</h2>
                    <img    :src="'https://api8.siliconpin.com/assets/'+page[0].img" alt="">
                        <h2 class="text-red-900 font-bold text-xl mt-8">Book Details</h2>
                            <div class="text-justify text-center " v-html="page[0].details"></div>
                                <h2 class="text-xl font-semibold text-blue-700">Publishing Year {{page[0].Publishing_Year}}</h2>
                </div>
                <div>
                
            </div></div>
        
        
        
            
        </div>
    </div>
    </template>




<script>
    export default {
        data() {
            return {
                page: null,
                isLoading: true
                
            }
        },
        mounted: function (){
            fetch('https://api8.siliconpin.com/items/books?filter[slug][_in]='+this.$route.params.id)
            
            .then(response => response.json())
            .then(data => {
            this.page = data.data
            this.isLoading = false
            console.log(this.page.Publishingyear)
            })
        }
    }
</script>
