<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="flex justify-center">
              <div class="mt-9 inline-flex p-2">
                  
              </div>
          </div>
          <div class="flex justify-center">
              <div class="mt-9 inline-flex p-2 font-serif text-2xl italic text-red-800 font-semibold">
                <span class="text-blue-600" >Teeny Beans Curriculum </span> &nbsp; <span class=" text-yellow-900" > Blog </span>
              </div>
          </div>
          <div class="flex justify-center">
              <div class="mb-9 inline-flex p-1">
                  <form>   
                      <label for="default-search" class="mb-2 text-sm font-medium text-gray-900 sr-only ">Search</label>
                      <div class="relative w-96">
                          <div class="flex absolute inset-y-0 left-0 items-center pl-3 pointer-events-none">
                              <svg aria-hidden="true" class="w-5 h-5 text-gray-500 " fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path></svg>
                          </div>
                          <input type="search" id="default-search" class="block p-4  pl-10 w-full text-sm text-gray-900 bg-gray-50 rounded-lg border border-gray-300 focus:ring-blue-500 focus:border-blue-500 " placeholder="Search our articles" required>
                          <button type="submit" class="text-white absolute right-2.5 bottom-2.5 bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-4 py-2 ">Search</button>
                      </div>
                  </form>
              </div>
          </div>
          <div class="flex justify-center">
              <div class="mt-9 inline-flex p-2">
                  
              </div>
          </div>
      </div> -->
      <section class="container mx-auto">
        <!-- <section class="container mx-auto">
            <div class="flex justify-center pt-2 pb-2 m-5 overflow-x-auto">
          <div class="ml-12 mr-9 pl-9 pr-9 md:hidden"> &nbsp;</div>
          <div class="ml-9 mr-9 pl-9 pr-9 md:hidden"> &nbsp;</div>
          <div class="ml-9 mr-9 pl-9 pr-9 md:hidden"> &nbsp;</div>
          <div class="ml-9 mr-9 pl-9 pr-9 md:hidden"> &nbsp;</div>
          <div class="ml-9 mr-9   md:hidden"> &nbsp;</div>
          <a href="/blog/?category=classroom-solution"    class="h-12 flex-none p-3 text-blue-700 hover:text-white hover:bg-blue-700 border-2 border-blue-700 border-r-0"> Classroom Solution </a >
          <a  href="/blog/?category=preschool-solution"   class="h-12 flex-none p-3 text-blue-700 hover:text-white hover:bg-blue-700 border-2 border-blue-700 border-r-0"> Preschool Solution </a>
          <a  href="/blog/?category=technology"           class="h-12 flex-none p-3 text-blue-700 hover:text-white hover:bg-blue-700 border-2 border-blue-700 border-r-0"> Technology </a>
          <a  href="/blog/?category=curriculum"           class="h-12 flex-none p-3 text-blue-700 hover:text-white hover:bg-blue-700 border-2 border-blue-700 border-r-0"> Curriculum </a>
          <a  href="/blog/?category=marketting"           class="h-12 flex-none p-3 text-blue-700 hover:text-white hover:bg-blue-700 border-2 border-blue-700 border-r-0"> Marketing </a>
          <a  href="/blog/?category=lesson-plans"         class="h-12 flex-none p-3 text-blue-700 hover:text-white hover:bg-blue-700 border-2 border-blue-700 border-r-0"> Lesson Plans </a>
          <a  href="/blog/?category=video-articles"       class="h-12 flex-none p-3 text-blue-700 hover:text-white hover:bg-blue-700 border-2 border-blue-700 border-r-0"> Video Articles </a>
          <a  href="/blog/?category=occassion"            class="h-12 flex-none p-3 text-blue-700 hover:text-white hover:bg-blue-700 border-2 border-blue-700 "> Occassion </a>
      </div>
        </section> -->
      
      <div class="xl:px-24">
          <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" alt="" style="width:100%; height: 205px;">
                  <!-- '?width=420&amp;height=280' -->
                  <div class="flex place-items-center 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-2">{{ item.title }}</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 text-xl position-fixed line-clamp-3" 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>
          <FaqSection />
      </div>
  </section>
  </div>
      
  </template>
  <style>
      .text-color-1 {
          color: #7C4C23;
          
      }
      .text-color-2 {
          color: #333333;
      }
      .line-clamp-3 {
        display: -webkit-box;
        -webkit-line-clamp: 4;
        -webkit-box-orient: vertical;  
        overflow: hidden;
        text-align: justify;
        padding: 4px;
        }
        .line-clamp-2 {
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;  
        overflow: hidden;
        }

  </style>
  
  <script>
  export default {
      setup(){
      // const route = useRoute();
      // useHead({
      //     title: 'Teenybeans Preschool Curriculum',
      //     meta: [
      //         {
      //         name: `title`,
      //         content: `Blogs - Teeny Beans Preschool Curriculum`
      //         },
      //         {
      //         name: `description`,
      //         content: `Get detailed information about the preschool industry and the challenges it faces.`
      //         },
      //     ],
      // }) 
  },
    data() {
      return {
        isLoading: true,
        tbBlog: {},
        tbBlog_classroom_solution: [],
        tbBlog_preschool_solution: {},
        tbBlog_technology: {},
        tbBlog_curriculum: {},
        tbBlog_marketting: {},
        tbBlog_lession_plan: {},
        tbBlog_video_articles: {},
        tbBlog_occassion: {}
      }
    },
    mounted: function () {
      this.getItemByCategory()
      // console.log(this.smProducts)
      // console.log(this.$route.query.cat)
      // console.log(this.fruits)
    },
    methods: {
      getItemByCategory() {
        fetch('https://curriculum-app-api.beanstalkedu.com/items/blog?filter[status][_eq]=published&filter[property][_eq]=teenybeans_curriculum&sort=sort,-date_created')
          .then(response => response.json())
          .then(data => {
            this.tbBlog = data.data
          //   console.log(data)
            this.tbBlog_classroom_solution = data.data.filter(item => { if (item.category == "classroom-solution ") return item });
            this.tbBlog_preschool_solution = data.data.filter(item => { if (item.category == "preschool-solution") return item });
            this.tbBlog_technology = data.data.filter(item => { if (item.category == "technology") return item });
            this.tbBlog_curriculum = data.data.filter(item => { if (item.category == "curriculum") return item });
            this.tbBlog_marketting = data.data.filter(item => { if (item.category == "marketting") return item });
            this.tbBlog_lession_plan = data.data.filter(item => { if (item.category == "lession-plan") return item });
            this.tbBlog_video_articles = data.data.filter(item => { if (item.category == "video-articles") return item });
            this.tbBlog_occassion = data.data.filter(item => { if (item.category == "occassion") return item });
            
            this.isLoading = false
          })
        
      }
    }
  }
  </script>