<template>
    <div>
        <div class="container-fluid z-0 " style="background: linear-gradient(360deg, rgba(18, 75, 189, 0.08) 0%, rgba(18, 75, 189, 0) 100%);">
          <div class="astronaut flex place-items-center justify-center pt-8">
              <img src="https://images.vexels.com/media/users/3/152639/isolated/preview/506b575739e90613428cdb399175e2c8-space-astronaut-cartoon-by-vexels.png" alt="" class="src">
          </div>
            <div class="flex justify-center place-items-center">
                  <div class="text-color-1 text-4xl pb-28 font-bold star"> <p class="text-center">ERROR: 404 - Page Not Found</p> </div>
            </div>
        </div>
        <section class="container mx-auto">
            <h1 class="text-4xl text-color-1 font-semibold text-center p-6">Curriculum Blog</h1>
        <div class="p-5">
            <div class="grid grid-cols-1 lg:grid-cols-2 xl:grid-cols-3">
                
                <div v-for="(item, index) in tbBlog"  class="shadow-md rounded p-2 m-2">
                    <figure class=" p-4 ">
                    <img class="w-full" v-if="item.img" :src="'https://curriculum-app-api.beanstalkedu.com/assets/'+item.img+'?width=420&amp;height=280'" alt="" >
                    <div class="flex bg-yellow-200 absolute -mt-12 ml-4 text-lg leading-tight w-14 h-14 font-semibold text-blue-700 rounded-full text-center p-1">{{ item.date}}</div>
                    <div class="pt-6 space-y-4">
                        <blockquote>
                        <p class="text-3xl font-medium text-color-1 line-clamp-1 line-clamp-2">{{ item.meta }}</p>
                        </blockquote>
                        <figcaption class="font-medium">
                        <!-- <div class="text-color-2 text-justify line-clamp-3">{{ item.preview_text }}</div> -->
                        <div class="text-color-2 line-clamp-3 text-xl line-clamp-4 text-justify" v-html="item.meta_description"></div>
                        <div class="text-slate-700 p-2 shadow-md rounded text-center">
                            <a :href="'/blog/' + item.slug" class="text-blue-600 "> Read More >> </a>
                        </div>
                        </figcaption>
                    </div>
                    </figure>
                </div>
            </div>
        </div>
    </section>
    </div>
    </template>
    <style>
  .line-clamp-4 {
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;  
    overflow: hidden;
}
.line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;  
    overflow: hidden;
}

.astronaut img{
  width:200px;
  /* position:absolute; */
  top:55%;
  animation:astronautFly 4s infinite linear;
}
@keyframes astronautFly{
  0%{
    left:-100px;
  }
  25%{
    top:20%;
    transform:rotate(60deg);
  }
  50%{
    transform:rotate(45deg);
    top:55%;
  }
  75%{
    top:60%;
    transform:rotate(-30deg);
  }
  100%{
    left:110%;
    transform:rotate(30deg);
  }
}
@keyframes starTwinkle{
  0%{
     background:rgba(255,255,255,0.4);
  }
  25%{
    background:rgba(255,255,255,0.8);
  }
  50%{
   background:rgba(255,255,255,1);
  }
  75%{
    background:rgba(255,255,255,0.8);
  }
  100%{
    background:rgba(255,255,255,0.4);
  }
}
        .text-color-1 {
            color: #7C4C23;
        }
        .text-color-2 {
            color: #333333;
        }
    </style>
    
    <script>
    export default {
        setup(){
        // const route = useRoute();
    },
      data() {
        return {
          isLoading: true,
          tbBlog: {},
          tbBlog_curriculum: {},
        }
      },
      mounted: function () {
        this.getItemByCategory()
        // console.log(this.smProducts)
        // console.log(this.$route.query.cat)
        // console.log(this.fruits)
      },
      methods: {
        getItemByCategory() {
          fetch('https://management.beanstalkedu.com/items/blog?filter[status][_eq]=published&filter[category][_eq]=curriculum&limit=3&sort=sort,-date_created&filter[property][_eq]=teenybeans_curriculum')
            .then(response => response.json())
            .then(data => {
              this.tbBlog = data.data
              // console.log(data)
              this.tbBlog_curriculum = data.data.filter(item => { if (item.category == "curriculum") return item });
              
              this.isLoading = false
            })
          
        }
      }
    }
    </script>