<template>
  <main class="landing-page">
   
    <div class="container-fluid episode-intro">
    <nav class="navbar navbar-expand-sm spotLight-nav">
        <a class="navbar-brand" href="#"><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="#"><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("/");
    },
    goToSignUp() {
      this.$router.push("/signup");
    },
    goToProfile() {
      this.$router.push("/profile");
    },
    
  },
};
</script>
