<script lang="ts">
  import PaginationEl from '../../pagination/Pagination.svelte';

  import { onMount } from 'svelte';
  import Swiper from 'swiper';
  import 'swiper/css';
  import 'swiper/css/pagination';
  import { Pagination } from 'swiper/modules';

  onMount(() => {
    const container: HTMLElement | null = document.querySelector('.block-videos__swiper');
    const pagination: HTMLElement | null = document.querySelector('.block-videos__pagination');

    if (!container || !pagination) return;

    new Swiper(container, {
      modules: [Pagination],
      spaceBetween: 40,
      pagination: {
        el: pagination,
        clickable: true,
      },
      breakpoints: {
        320: {
          slidesPerView: 1,
          spaceBetween: 20,
        },
        480: {
          slidesPerView: 2,
          spaceBetween: 20,
        },
        768: {
          slidesPerView: 2,
          spaceBetween: 20,
        },
        1366: {
          slidesPerView: 3,
          spaceBetween: 32,
        },
        1800: {
          slidesPerView: 3,
          spaceBetween: 40,
        },
      },
    });
  });
</script>

<div class="block-videos">
  <div class="container">
    <p class="block-videos__title">Watch <span>our videos</span></p>
    <div class="swiper block-videos__swiper">
      <div class="swiper-wrapper">
        <div class="swiper-slide">
          <div class="block-videos__card">
            <iframe
              width="440"
              height="248"
              loading="lazy"
              src="https://www.youtube.com/embed/Ys_d6MzkTUQ?si=RGtAsJRC9NVPWT6F"
              title="YouTube video player"
              frameborder="0"
              allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
              allowfullscreen
            />
            <div class="block-videos__cardContainer">
              <p class="block-videos__cardTitle">NexGen White Label Brokerage Platform</p>
              <p class="block-videos__cardText">
                Quadcode SaaS - Starting your own brokerage has never been easier. Get your brokerage up and running in
                just 2 weeks with a hassle-free, cost-effective solution.
              </p>
            </div>
          </div>
        </div>
        <div class="swiper-slide">
          <div class="block-videos__card">
            <iframe
              width="440"
              height="248"
              loading="lazy"
              src="https://www.youtube.com/embed/5hasp_wQCrM?si=R4dQgU557wSqtSgz"
              title="YouTube video player"
              frameborder="0"
              allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
              allowfullscreen
            />
            <div class="block-videos__cardContainer">
              <p class="block-videos__cardTitle">Quadcode at iFX Expo International 2023</p>
              <p class="block-videos__cardText">
                White Label Trading Platform - Explore the highlights of Quadcode's presence at iFX Expo Cyprus.
                Discover how our white label solution can simplify your journey to launch a hassle-free brokerage
                business from start to finish in just a matter of weeks.
              </p>
            </div>
          </div>
        </div>
        <div class="swiper-slide">
          <div class="block-videos__card">
            <iframe
              width="440"
              height="248"
              loading="lazy"
              src="https://www.youtube.com/embed/o2W_VfvbaUg?si=cO7_yLkAVSMWLA--"
              title="YouTube video player"
              frameborder="0"
              allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
              allowfullscreen
            />
            <div class="block-videos__cardContainer">
              <p class="block-videos__cardTitle">How to Start a White Label Brokerage Firm From Scratch?</p>
              <p class="block-videos__cardText">
                Quadcode Webinar - Ever wondered how to launch your very own brokerage business from the ground up? Look
                no further! In this informative webinar, we dive deep into the essential steps and strategies for
                launching your own white label brokerage firm from scratch.
              </p>
            </div>
          </div>
        </div>
      </div>
    </div>
    <PaginationEl className="block-videos__pagination" />
  </div>
</div>

<style lang="scss">
  @import 'src/scss/variables';
  @import 'src/scss/media';
  @import 'src/scss/mixins';

  .block-videos {
    padding: 110px 0 118px 0;

    @include breakpoint-down('deskL') {
      padding: 100px 0 74px;
    }

    @include breakpoint-down('deskS') {
      padding: 56px 0 49px;
    }

    @include breakpoint-down('tabM') {
      padding: 56px 0 29px;
    }

    &__title {
      @include titleXL;

      margin-bottom: 80px;
      margin-inline: auto;
      width: max-content;

      @include breakpoint-down('deskL') {
        margin-bottom: 64px;
      }

      @include breakpoint-down('deskS') {
        margin-bottom: 40px;
      }

      > span {
        color: $redPrimary;
      }
    }

    &__swiper {
      width: 100%;

      @include breakpoint-down('deskS') {
        margin-bottom: 43px;
      }
    }

    &__card {
      width: 100%;
      height: 100%;

      > iframe {
        border-radius: 4px;
        width: 100% !important;
        height: 248px !important;

        @include breakpoint-down('deskL') {
          height: 198px !important;
        }

        @include breakpoint-down('deskS') {
          height: 187px !important;
        }
      }
    }

    &__cardContainer {
      padding: 13px 24px 9px 24px;

      @include breakpoint-down('deskL') {
        padding: 16px 16px 0 16px;
      }
    }

    &__cardTitle {
      @include baseTitle;

      margin-bottom: 16px;

      @include breakpoint-down('deskL') {
        margin-bottom: 8px;
      }
    }

    &__cardText {
      @include smallDefault;
    }

    & :global(.block-videos__pagination) {
      display: none;

      @include breakpoint-down('deskS') {
        display: flex;
      }
    }
  }
</style>