<template>
    <swiper class="width"
    :modules="modules"
    :slides-per-view="1"
    :space-between="0"
    navigation
    :autoplay=" { delay: 2500, disableOnInteraction: false}"
    @swiper="onSwiper"
    @slideChange="onSlideChange"
    >
      <swiper-slide v-for="lesson in lessonplan" :key="lesson.id"> 
        <img lesson.lesson_icon :src="'https://curriculum-app-api.beanstalkedu.com/assets/'+ lesson.lesson_icon" alt="">
      </swiper-slide>      
      </swiper>
  </template>
  <script>
    // Import Swiper Vue.js components
    import { Swiper, SwiperSlide } from 'swiper/vue';
    import 'swiper/css/navigation';
    import 'swiper/css/pagination';
    import { Navigation,Autoplay, Pagination, Scrollbar, A11y } from 'swiper';
  
    // Import Swiper styles
    import 'swiper/css';
    // const swiper = new Swiper('.swiper', {
    //       autoplay: {
    //         delay: 5000,
    //       },
    //     });
  
    export default {
      components: {
        Swiper,
        SwiperSlide,
      },
      setup() {
        const onSwiper = (swiper) => {
          // console.log(swiper);
        };
        const onSlideChange = () => {
          // console.log('slide change');
        };
        
        
        return {
          onSwiper,
          onSlideChange,
          modules: [Navigation, Autoplay, Pagination, Scrollbar, A11y],

        };
      },
      data() {
        return {
            page: null,
            faqHome: null,
            themes:null,
            lessonplan:null,
            stories: null,
            ideas: null,
            worksheets: null,
            videos: null,
            youtube: null,
            audio: null,
            isLoading: true,

        }
    },
      mounted: function () {
        fetch('https://curriculum-app-api.beanstalkedu.com/items/lesson_plan?filter[plan][_eq]=daily')
            .then(response => response.json())
            .then(data => {
                this.lessonplan = data.data
                // this.isLoading = false
                // console.log(this.lessonplan)
                // return this.page[0].id
            })
            fetch('https://management.beanstalkedu.com/items/FAQ?filter[property][_eq]=teenybeans_curriculum&filter[slug][_eq]=home')
            .then(resp => resp.json())
            .then(data => {
                this.faqHome=data.data
                // console.log(this.faqHome)
            })
        },
    };
  </script>
<style>
  .width {
    width: 400px;
    display: flex;
    justify-items: flex-end;
  }
  
</style>