{%- if dataToShow.HOW_TO_CONTENT -%}
<div class="container">
    <div class="row">
        <div class="col-lg-4 col-md-6 my-3">
            <p class="howto mb-0">How to</p>
        </div>
    </div>
</div>
<section class="how-to-section mt-5">
    <div class="container">
        <div class="row pt-5 justify-content-center">
            {%- if site.ezoicAds -%}
            <div class="col-md-9 mx-auto">
                <div class="row">
                    {%- endif -%}
                    <div class="col-md-6 order-0 ">
                        {%- if dataToShow.HOW_TO_CONTENT.YoutubeVideoUrl.size > 0 -%}
                        <div class="how-to-video-wrapper">
                            {% assign video_url = dataToShow.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"  data-videoid="{{video_id}}">
                                <img class="youtubeVideoPlayer mb-5" 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 width="100%" height="100%" class="how-to-leftimg"
                                src="{{dataToShow.HOW_TO_CONTENT.logoImageUrl}}" loading="lazy"
                                alt="{{dataToShow.HOW_TO_CONTENT.logoImageAlt | default: 'how to image' }}">
                        </div>
                        {%- endif -%}
                    </div>
                    <div class="col-md-6 order-1">
                        <div class="how-to-right">
                            <h3 class="how-to-title">{{dataToShow.HOW_TO_CONTENT.heading | replace: "$variable",
                                page.value}}</h3>
                            <ol class="how-to-list">
                                {% for data in dataToShow.HOW_TO_CONTENT.steps %}
                                <li id="step{{forloop.index}}" class="how-to-list-item">
                                    <span>{{forloop.index}}.</span>{{data |
                                    replace: "$variable",
                                    page.value}}
                                </li>
                                {% endfor %}
                            </ol>
                        </div>
                    </div>
                    {%- if site.ezoicAds -%}
                </div>
            </div>
            {%- endif -%}
        </div>
    </div>
</section>
{%- endif -%}


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

    // Function to load video
    function loadVideo() {
        videoContainer.innerHTML = '<iframe loading="lazy" class="youtubeVideoPlayer mb-5" width="100%" height="315" 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 -%}