<template>
    <main class="landing-page">
     
      <div class="container-fluid episode-intro">
      <nav class="navbar navbar-expand-sm spotLight-nav">

          <a class="navbar-brand" href="javascript:void(0);"><img src="../assets/images/logo.png"></a>

          <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExample03" aria-controls="navbarsExample03" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
            <span class="navbar-toggler-icon"></span>
            <span class="navbar-toggler-icon"></span>
          </button>
          <div class="user-profile-photo insights-profile">

            <a href="javascript:void(0);"><img src="../assets/images/lock.svg"></a>

          </div>
        </nav>
        <!-- menu wrapper -->
      <div class="intro-startup">
        <div class="smasung-g-10wrp">
             <div class="samsung-compare-c">

            <div class="logo-1"><img :src="currentSlideData.payload.metaData.mobileImage" /></div>
             
            </div>
             <!-- <div class="samsung-compare-c">
            <div class="logo-1"><img src="../assets/images/logo-1.png" /></div>
             <div class="vs">vs</div>
              <div class="logo-2"><img src="../assets/images/logo-2.png" /></div>
            </div> -->

                <div class="comment-box">
            <div class="comment-box-s-1">

            <!-- <p>👋 Hi there! My name is <strong> Rashmi</strong>, and these are a few observations on the user workflows that I had while using the WhiteHat Jr. app.</p> -->
            <p>{{currentSlideData.payload.metaData.textBox}}</p>

           <div class="footer">

             <img src="../assets/images/comment-user.svg" />  <a href="javascript:void(0);" @click="goToProfile">View My Profile</a>

             </div><!-- footer -->
            </div><!-- comment box 1 -->

                <!-- <div class="comment-box-s-1 comment-w-397">

            <p>
              Use arrow keys to navigate <br/>
  <img src="../assets/images/key-arrow.jpg" class="key-arrow" />
            </p>

            </div> -->
            <!-- comment box 1 -->

            <div class="user-photo">

              <!-- <img src="../assets/images/comment-photo.png" /> -->
              <img :src="currentSlideData.payload.metaData.authorImage" />

            </div>
            </div><!-- comment box -->
          </div><!-- samsung g 10 -->
        <div class="footer-nav">
          <div class="footer-top">

                <ul class="top-intro-bt ps_right">
              <li><a href="javascript:void(0);" @click="goBack"><img src="../assets/images/skip-prev.svg" > Prev</a></li>
               <li><a href="javascript:void(0);" @click="goNext"><img src="../assets/images/skip-next.svg" > Skip to next slide</a></li>

            </ul>
            </div><!-- footer top -->
          <div class="footer-bottom">
            <ul>
              <li></li>
               <li></li>
            </ul>
            </div><!-- footer top -->
          </div><!-- footer -->
      
      </div>
        <!-- body wrapper -->
      </div>
      <!-- main wrapper -->
    </main>
  </template>
  
  <script>
  import Vue from "vue";
  import router from "../router";
  
  export default {
    name: "AuthorIntro",
  
    data() {

      
      return {
        allSlide:[],
        currentSlideIndex:null,
        currentSlideData:null,
      };
    },
    mounted() {
      var allSlideData = localStorage.getItem("spotlight_slide"+this.$route.params.caseStudyId);
      if (allSlideData) {
        this.allSlide = JSON.parse(allSlideData);
        this.getCurrentSlideData();
      }

    },

    methods: {

      getCurrentSlideData(){
        var i = this.allSlide.findIndex((slide_) => slide_.slideId == this.$route.params.slideId);
        this.currentSlideIndex = i; 
        this.currentSlideData = this.allSlide[i]
        console.log("currentSlideData",this.currentSlideData)
  
      },
      goNext(){
        this.currentSlideIndex++
        this.$router.push({
          name: this.allSlide[this.currentSlideIndex].ur,
          params: {
            caseStudyId: this.allSlide[this.currentSlideIndex].caseStudyId,
            slideId: this.allSlide[this.currentSlideIndex].slideId,
          },
        });
  
      },
      goBack(){
         this.currentSlideIndex--
        this.$router.push({
          name: this.allSlide[this.currentSlideIndex].ur,
          params: {
            caseStudyId: this.allSlide[this.currentSlideIndex].caseStudyId,
            slideId: this.allSlide[this.currentSlideIndex].slideId,
          },
        });
  
      },

      goToLogin() {

        this.$router.push("/login");

      },
      goToSignUp() {

        this.$router.push("/");

      },

      goToProfile() {
        this.$router.push("/profile");
      },

      
    },
  };
  </script>