<template>
    <div>
      <div class="container-fluid">
        <div class="row">
          <div class="col-12 px-0 mx-0">
            <audio ref="audio" src="/sounds/Lagoon.aac" loop></audio>
            <video-background
                preload="auto"
                src="/video/bg-video.mp4"
                poster="/images/posters/poster1.png"
                style=" height: 100vh;"
            >


              <home-bar v-on:play="playPause" :title="title" />



              <div class="container-fluid">
                <div class="row justify-content-center">
                  <div class="adaptive pb-2">


                  <div class="col-12 ">
                    <div class="d-none d-md-block mx-auto  pb-1" style="width: 225px" >
                      <div class="progress " style="height: 10px">
                        <div class="progress-bar" role="progressbar"  aria-label="Basic example" style="width: 88%;background-color: #e9c046" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
                      </div>
                    </div>
                    <div class="d-flex justify-content-center  mb-1">
                      <nuxt-link to="#adaptive-modal" data-bs-target="#adaptive-modal" data-bs-toggle="modal" class="text-muted text-decoration-none fw-bold fs-6 ">{{t('adaptive_soundscap')}} : <span class="" style="color: #e9c046">On</span> </nuxt-link><span class="ps-3"><i style="padding: 5px 0px;" class="fa-solid text-muted d-flex  fa-chevron-right"></i></span>
                    </div>
                    <div class="d-block d-md-none mx-auto  pb-1" style="width: 225px" >
                    <div class="progress " style="height: 10px">
                      <div class="progress-bar" role="progressbar"  aria-label="Basic example" style="width: 88%;background-color: #e9c046" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
                    </div>
                    </div>
                  </div>
               <BootomBar/>
                </div>
                </div>
              </div>
            </video-background>
<!--            <video  muted id="myVideo" autoplay loop>-->
<!--              <source src="~/assets/video/bg-video.mp4" type="video/mp4">-->
<!--              <source src="~/assets/video/bg-video.ogg" type="video/ogg">-->
<!--              Your browser does not support HTML5 video.-->
<!--            </video>-->

          </div>
        </div>
      </div>

    </div>
</template>
<script>

import HomeBar from "../components/homebar";
import BootomBar from "~/components/BootomBar.vue";
export default {
  setup() {
    const { t } = useI18n()
    const localePath = useLocalePath()

    return {
      t,
      localePath,
    }
  },

  components: {BootomBar, HomeBar},
  data(){
    return{
      title:'Lagoon soundscape',
    }
  },
  methods:{
    handleAnimation: function (anim) {
      this.anim = anim;
    },
    playPause(play){
      console.log("Play Pause");
      if (play){
        this.$refs['audio'].play();
      }else {
        this.$refs['audio'].pause();

      }
    }
  }

}
</script>

<style>
#myVideo{
  position: fixed;
  right: 0;
  bottom: 0;
  min-width: 100%;

  padding: 0;
  margin: 0;
  z-index: -99;
}
.adaptive{
  position: fixed;
  bottom: 0;
  text-align: center;
  width: 100%;
}

</style>