<template>
  <div
    class="flex w100 justify-center items-center relative-position overflow-hidden"
    style="
      background-size: cover;
      height: 100vh;
    "
    >
      <video
        loop
        autoplay 
        muted
        src="/img/samolet.mp4"
        class="absolute-full"
        style="
          z-index: 0; 
          object-fit: cover; 
          object-position: center center;
          width: 100%; 
          height: 100%;
          filter: blur(2px) brightness(0.75);
        "
        @canplay="$event.target.playbackRate = 0.5"
      />
      <div
        class="column items-center no-wrap"
        style="max-width: 75%; height: 100%; z-index: 10;" >
        <div
          class="column justify-end text-grey-4 text-center edge-block"
          :class="$q.screen.lt.sm ? 'text-h5' : 'text-h4'"
          >
          {{ $t('banner__slogan_prepend') }}
        </div>
  
        <div
          class="text-white text-center q-py-lg center-block"
          :class="$q.screen.lt.sm ? 'text-h4' : 'text-h3'"
          >
          {{ $t('banner__slogan_body') }}
          <span class="text-no-wrap" color="primary">
            <q-icon dense name="telegram"/>
            <span>Telegram</span>
          </span>
        </div>

        <div class="column items-center edge-block">
          <div class="edge-block"/>
          <q-btn
            size="xl"
            color="primary"
            class="q-mt-lg"
            rounded
            href="https://t.me/tgCrewBot"
            >
            <div class="flex items-center no-wrap center-block">
              <div
                class="q-pl-md"
                :class="$q.screen.lt.sm ? 'text-h5' : 'text-h4'"
                >
                {{ $t('banner__main_btn')}}
              </div> 
              <q-icon name="keyboard_arrow_right"/>
            </div>
          </q-btn>
          <div class="text-white q-pt-md edge-block justify-start text-grey-2">
            {{ $t('banner__main_btn_description')}}
          </div>
        </div>
      </div>
      </div>
</template>

<script setup>
</script>

<style scoped lang="scss">
 .vert-height {
   min-height: calc(100vh * 0.75);
 }

 .fix-align:first-child {
    text-align: center;
  }

  svg {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 100%;
    z-index:-1;
  }

  .center-block {
    flex: 0 0 auto;
  }

  .edge-block {
    flex: 1
  }
</style>
