{%- if pageData.HOW_TO_CONTENT -%}
<div class="container appscms-how-to-section p-3 pb-3 mt-5">
  <div class="row py-3">
    {%- if site.monumetricId and page.url != '/' and page.lang == 'en' -%}
    <div class="col-md-9 mx-auto">
      <div class="row">
        {%- endif -%}
        <div class="col-md-6 appscms-howto-image">
          {%- if pageData.HOW_TO_CONTENT.YoutubeVideoUrl.size > 0 -%}
          <div class="how-to-video-wrapper">
            {% assign video_url = pageData.HOW_TO_CONTENT.YoutubeVideoUrl %}
            {% assign video_id = "" %}
            {% if video_url contains "youtu.be/" %}
            {% assign parts = video_url | split: "/" %}
            {% assign video_id = parts[3] %}
            {% elsif video_url contains "youtube.com/watch" %}
            {% assign params = video_url | split: "?" | last | split: "&" %}
            {% for param in params %}
            {% if param contains "v=" %}
            {% assign video_id = param | split: "=" | last %}
            {% endif %}
            {% endfor %}
            {% endif %}

            <div class="how-to-video h-100 w-100" data-videoid="{{video_id}}">
              <img class="youtubeVideoPlayer" width="100%" height="100%" id="thumbnail-img" alt="thumbnail-img" />
              <div class="youtube-play-btn-wrapper">
                <button class="play-btn btn btn-primary" onClick="loadVideo()">►</button>
              </div>
            </div>
          </div>
          {%- else -%}
          <div class="how-to-img-wrapper">
            <img src="{{pageData.HOW_TO_CONTENT.logoImageUrl}}" loading="lazy"
              alt="{{pageData.HOW_TO_CONTENT.logoImageAlt | default: 'how to image' }}" {%- if site.crossorigin -%}
              crossorigin {%- endif -%}class="img-fluid align-self-end" alt="Your Image"
              style="width: 100%; height: 100%" />
          </div>
          {%- endif -%}
        </div>
        <div class="col-md-6 appscms-howto-steps p-3">
          <h2 class="mb-4 appscms-howto-heading">
            {{pageData.HOW_TO_CONTENT.heading | replace: "$variable",
            page.value}}
          </h2>
          {% for data in pageData.HOW_TO_CONTENT.steps %}
          <div id="step{{forloop.index}}" class="how-to-list-item">
            {{forloop.index}} . {{data | replace: "$variable", page.value}}
          </div>
          {% endfor %}
        </div>
        {%- if site.monumetricId and page.url != '/' and page.lang == 'en' -%}
      </div>
    </div>
    {%- endif -%}
  </div>
</div>

{%- if pageData.HOW_TO_CONTENT.YoutubeVideoUrl.size > 0 -%}
<script>
  let videoContainer = document.querySelector('.how-to-video');
  let thumbnail = document.getElementById('thumbnail-img');
  let videoId = videoContainer.getAttribute("data-videoid")
  let thumbnailUrl = 'https://img.youtube.com/vi/' + videoId + '/maxresdefault.jpg';
  console.log(videoId)

  // Function to load video
  function loadVideo() {
    videoContainer.innerHTML = '<iframe loading="lazy" class="youtubeVideoPlayer" width="100%" height="100%" src="https://www.youtube.com/embed/' + videoId + '?autoplay=1&mute=1" allowfullscreen></iframe>';
  }
  // Function to handle lazy loading of the thumbnail
  function lazyLoadThumbnail(entries, observer) {
    entries.forEach(entry => {
      if (entry.isIntersecting) {
        // Load thumbnail when it becomes visible
        thumbnail.src = thumbnailUrl;
        // Stop observing once loaded
        observer.unobserve(entry.target);
      }
    });
  }
  // Set up the Intersection Observer
  var observer = new IntersectionObserver(lazyLoadThumbnail, { threshold: 0.1 });
  observer.observe(thumbnail);
  // Optionally, you can add an event listener to trigger video loading on click or other interactions
  thumbnail.addEventListener('click', loadVideo);
</script>
{%- endif -%}
{%- endif -%}