<template>
  <slide-template
    title="how_it_works__title"
    class="overflow-hidden w100"
    >
    <custom-tabs
      v-bind="$attrs"
      :tabItems
      :useTabsNoCaps
      >
      <template #default="{ item }">
        <div class="relative-position w60 q-pt-md">
          <div style="height: 60vh; position: relative;">
            <iframe
              :key="item.name"
              :src="item.url" 
              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;"
            />
          </div>
        </div>
      </template>
    </custom-tabs>
  </slide-template>
</template>

<script setup>
  import SlideTemplate from 'components/SlideTemplate.vue'
  import CustomTabs from 'components/CustomTabs.vue'

  defineProps({
    useTabsNoCaps: Boolean
  })

  const tabItems = [
    {
      name: 'intro',
      label: 'how_it_works__intro',
      url: 'https://kinescope.io/embed/5yesvjfi6XAYRuxzbsYGHZ'
    },
    {
      name: 'admin',
      label: 'how_it_works__admin',
      url: 'https://kinescope.io/embed/5yesvjfi6XAYRuxzbsYGHZ'
    },
    {
      name: 'user',
      label: 'how_it_works__user',
      url: 'https://kinescope.io/embed/5yesvjfi6XAYRuxzbsYGHZ'
    }
  ]
</script>

<style scoped lang="scss">
</style>
