{% assign content_type = content_type | default: 'awdawd' %}

{% if content_type == 'wasd' %}


{% elsif content_type == "init" %}

  {% style %}

    .shx-video {
      display: block;
      position: relative;
      width: 100%;
      height: 100%;
      overflow: hidden;
    }

    .shx-video__wrapper {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
    }

    .shx-video__wrapper video {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

  {% endstyle %}

  <script type="text/javascript">

    // create Class for video in product card
    class ShxVideo {
      constructor(video) {
        this.video = video;
        this.videoWrapper = video.closest('.shx-video__wrapper');
        //this.videoWrapper.addEventListener('click', this.togglePlay.bind(this));

        // get parrent with class "card-wrapper product-card-wrapper"
        this.productCard = video.closest('.product-card-wrapper');

        //hover effect
        this.productCard.addEventListener('mouseenter', this.hoverEffectIn.bind(this));
        this.productCard.addEventListener('mouseleave', this.hoverEffectOut.bind(this));

        // play video on hover
        this.productCard.addEventListener('mouseenter', this.playVideo.bind(this));
        this.productCard.addEventListener('mouseleave', this.pauseVideo.bind(this));

        // also make it mobile friendly
        this.productCard.addEventListener('touchstart', this.hoverEffectIn.bind(this));
        this.productCard.addEventListener('touchend', this.hoverEffectOut.bind(this));

        this.productCard.addEventListener('touchstart', this.playVideo.bind(this));
        this.productCard.addEventListener('touchend', this.pauseVideo.bind(this));

        


      }

      hoverEffectIn() {
        // use animejs
        anime({
          targets: this.video,
          scale: 1.1,
          opacity: 1,
          duration: 300,
          easing: 'easeOutQuad'
        });
      }

      hoverEffectOut() {
        // use animejs
        anime({
          targets: this.video,
          scale: 1,
          opacity: 0,
          duration: 300,
          easing: 'easeOutQuad'
        });
      }

      playVideo() {
        this.video.play();
      }

      pauseVideo() {
        this.video.pause();
      }
      
    }

    // dom ready
    document.addEventListener('DOMContentLoaded', function() {
      const videos = document.querySelectorAll('.shx-video-card-product');
      videos.forEach(video => new ShxVideo(video));
    });

  </script>

{% endif %}