<template>
<slide-template
  title="how_it_works__title"
  >
  <q-tabs
    v-model="tab"
    dense
    class="text-grey"
    active-color="primary"
    indicator-color="primary"
    align="justify"
    narrow-indicator
    outside-arrows
    mobile-arrows
    >
    <q-tab
      v-for="tab in tabs"
      :key="tab.name"
      :name="tab.name"
      :label="$t(tab.label)"
    />
  </q-tabs>

  <q-tab-panels
    v-model="tab"
    animated
    class="w60 bg-transparent"
    >
    <q-tab-panel
      v-for="tab in tabs"
      :key="tab.name"
      :name="tab.name"
      >
      <div
        class="relative-position w100">
      <div
        class="abolute-position w100"
        style="height: 60vh;"
        >
        <iframe 
          src="https://kinescope.io/embed/5yesvjfi6XAYRuxzbsYGHZ" 
          allow="autoplay; fullscreen; picture-in-picture; encrypted-media; gyroscope; accelerometer; clipboard-write; screen-wake-lock; fullscreen;" frameborder="0" style="position: absolute; width: 100%; height: 100%; top: 0; left: 0;"
          >
        </iframe>
      </div>
      </div>
        
      <!-- <q-skeleton
        style="height: calc(100vw * 0.5 / 16 * 9)"
        square
      /> -->
    </q-tab-panel>
  </q-tab-panels>
</slide-template>

</template>

<script setup lang="ts">
  import { ref } from 'vue'
  import SlideTemplate from 'components/SlideTemplate.vue'
  const tabs = [
    { name: 'intro', label: 'how_it_works__intro'},
    { name: 'admin', label: 'how_it_works__admin'},
    { name: 'user', label: 'how_it_works__user'}
  ]
  const tab = ref(tabs[0].name)
</script>

<style scoped>

</style>
