<template>
  <div>
      <div class="grid place-items-center pb-8 px-6 w-fit h-fit">
          <img draggable="false" src="/img/event.png" alt="Videos">
          <h1 class="text-3xl text-color-1 font-semibold py-2">Videos</h1>
          <p class="font-20px text-justify text-color-2 line-clamp-3 xl:px-24">Educational videos aligned with the Early Years Foundation Stage (EYFS) curriculum, supporting the development of young children's knowledge and skills.</p>
          <!-- <span class="text-blue-700 cursor-pointer font-bold text-left" @click="showAbModal('abModal')">Read More &gt;&gt;</span> -->
          <a class="pt-2" href="/videos"><button class="bg-blue-700 text-white px-6 py-2 text-xl rounded-tl-md rounded-br-md">Discover Now</button></a>
      </div>
      <!-- <div v-if="abModal" id="ytModal" class="flex justify-center abModal">
          <div class="modal-content" @click="doNothing()">
              <span  @click="hideAbModal" class="close">&times;</span>
              <div class="grid place-items-center pb-8 px-6 w-fit h-fit">
                  <img draggable="false" src="/img/event.png" alt="">
                  <h1 class="text-3xl text-color-1 font-semibold py-2">Videos</h1>
                  <p class="text-xl text-justify text-color-2 w-64">Educational videos aligned with the Early Years Foundation Stage (EYFS) curriculum, supporting the development of young children's knowledge and skills.</p>
              </div>
          </div>
      </div> -->
  </div>
</template>

<!-- <template>
    <div>
      <div @click="showAbModal('abModal')"> Show Modal</div>
        <div v-if="abModal" id="ytModal" class="flex justify-center abModal">
            <div class="modal-content" @click="doNothing()">
                <span  @click="hideAbModal" class="close">&times;</span>
                <div>
                  Modal text    Modal text    Modal text<br>  Modal text    Modal text    Modal text 
                </div>
            </div>
        </div>
    </div>
  </template> -->
  
  <script>
  
  export default {
  
    data() {
        return {
          abModal:false,
            abID:''
  
        }
    },
    methods: {
        showAbModal(abID){
            this.abModal=true
            this.abID=abID
        },
        hideAbModal(){
            this.abModal=false
        //     // this.abID=abID
        },
        doNothing(){
          // alert();
        }
   
    },
        mounted: function () {
          //   this.getVideos()
        }   
  }
  </script>
  
  <style scoped>
  .line-clamp-3 {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;  
  overflow: hidden;
  }
  .abModal {
  /* display: none;  */
  position: fixed;
  width: 80%;
  z-index: 999991;
  padding-top: 100px;
  left: 0;
  top: 0;
  width: 100%;
  padding-left: 10px;
  padding-right: 10px;
  height: 100%;
  overflow: auto;
  background-color: rgb(0,0,0);
  background-color: rgba(0,0,0,0.4);
  }
  .modal-content{
    background-color: rgb(255, 255, 255);
    padding: 20px;
    border: 1px solid #888;
    width: fit-content;
    height: fit-content;
    margin: 0 auto;
    border-radius: 16px;
    border-width: 5px;
    border-color: rgb(40, 99, 226);
  }
  .close {
  color: rgb(40, 99, 226);
  float: right;
  font-size: 28px;
  padding: 10px;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: rgb(40, 99, 226);
  text-decoration: none;
  padding: 10px;
  cursor: pointer;
  font-size: 28px;
  background-color: rgb(237, 240, 239);
  border-radius: 100%;
}
  </style>