<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> -->
        <Header></Header>

        <!-- menu wrapper -->
        <div class="startup-wrp">

          <!-- <div class="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="compare-c">

            <div class="logo-2"><img :src="currentSlideData.payload.metaData.logoURL" /></div>
          </div>
            <!-- compare -->

  <img src="../assets/images/spot-light.svg" class="epi-bg" />
      <div class="bottom-startup">
          <div class="logo-wrp">

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

              <span>Product Growth</span> 
              </a>
              </div><!-- logo wrp -->

              <div class="title">{{currentSlideData.payload.metaData.name}}</div><!-- title -->

              <div class="author-sec">
                <div class="top">
                  <span>Author</span>

                  <span class="name">{{currentSlideData.payload.metaData.authors[0]}}</span>

                </div><!-- top section -->
                <div class="bottom">

               
                   <div class="right p-left-0">

                      <span>Last updated</span>

                    <span class="dt">{{ moment(currentSlideData.payload.metaData.date).format("DD.MM.YYYY") }}</span>

                     </div><!-- right -->
                  </div><!-- bottom -->
                </div><!-- author section-->
                     <div class="author-sec">
                <div class="top">
                  <span>App</span>

                  <span class="name">{{currentSlideData.payload.metaData.app}}</span>

                </div><!-- top section -->
              <div class="top">
                  <span>Focus</span>

                  <span class="name ellipsis">{{createString(currentSlideData.payload.metaData.focusPoint)}}</span>

                </div><!-- top section -->
                </div><!-- app section-->
                           <div class="author-sec info">
                <div class="top">
                  <span>Read</span>

                  <span class="name">{{currentSlideData.payload.metaData.readTime}} min</span>

                </div><!-- top section -->
              <div class="top bt-brd">
                  <span>Platform</span>

                  <span class="name">{{currentSlideData.payload.metaData.platForm}}</span>

                </div><!-- top section -->
                </div><!-- info section-->
                <div class="u-img-info">

                  <img src="../assets/images/retake-red.svg" v-if="currentSlideData.payload.metaData.type == 'Retake'"/>
                    <img src="../assets/images/behind-red.svg" v-if="currentSlideData.payload.metaData.type == 'Behind-the-scenes'"/>
                    <img src="../assets/images/critique-red.svg" v-if="currentSlideData.payload.metaData.type == 'Critique'"/>
                    <img src="../assets/images/jxtapose.svg" v-if="currentSlideData.payload.metaData.type == 'Juxtapose'"/>

                </div><!-- image info -->
                <div class="start">

                  <a href="javascript:void(0);" @click="goNext">

                    <img src="../assets/images/arrow-right.svg" /> 
                    <span>Start</span>
                  </a>
                  </div><!-- start -->
          </div><!-- bottom startup -->
          
        </div>
        <!-- body wrapper -->
      </div>
      <!-- main wrapper -->
    </main>
  </template>
  
  <script>
  import Vue from "vue";
  import router from "../router";

  import Header from "./Header";

  
  export default {
    name: "EpisodeIntro",

  components: {
      Header: Header,
    },

    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();

      }else{
        this.$router.push("/login");

      }

    },

    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(){
  
      },

      goToLogin() {

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

      },
      goToSignUp() {

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

      },

  
      createString(list){
        var name = "";
        list.forEach(element => {
          name = name+','+element;
        });
  
    console.log("name is",name);
        return name.substring(1);;
      }

      
    },
  };
  </script>

  <style >
  .ellipsis {
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
  }
  </style>