{% load otree static %}

{% block title %}

{% endblock %}

{% block content %}
<script src="https://www.youtube.com/iframe_api"></script>

    <style>
        .ui-top {
            width: 100%;
            text-align: center;
            margin-bottom: 20px;
        }
        .content {
            display: flex;
            flex-direction: column;  /* Change back to column */
            align-items: center;  /* Centers children horizontally */
            width: 100%;
        }
        .left-and-posts {
            display: flex;
            flex-direction: row;
            width: 100%;
        }
        .ui-left {
            flex: 1;
            text-align: center;
            margin-right: 20px;
        }
        .posts {
            flex: 2;
            display: flex;
            flex-direction: column;
            gap: 20px;
        }
        .post {
            position: relative;  /* Establishes a point of reference for absolute positioning */
            width: 100%;
            margin-bottom: 20px;  /* Adds space between posts */
        }
        .post img {
            width: 100%;
            display: block;
        }
        .like-button1 {
            position: absolute;  /* Allows precise positioning over the image */
            width: 32px;
            height: 27px;
            cursor: pointer;
            background-repeat: no-repeat;
            background-position: center;
            background-size: cover;
            background-image: url({% static "images/Tweet_Like0.png" %});
            top: 65px;  /* Adjust these values to position the like button */
            right: 236px;  /* Adjust these values to position the like button */
        }
        .like-button2 {
            position: absolute;  /* Allows precise positioning over the image */
            width: 32px;
            height: 27px;
            cursor: pointer;
            background-repeat: no-repeat;
            background-position: center;
            background-size: cover;
            background-image: url({% static "images/Tweet_Like0.png" %});
            top: 87px;  /* Adjust these values to position the like button */
            right: 275px;  /* Adjust these values to position the like button */
        }
        .like-button3 {
            position: absolute;  /* Allows precise positioning over the image */
            width: 32px;
            height: 27px;
            cursor: pointer;
            background-repeat: no-repeat;
            background-position: center;
            background-size: cover;
            background-image: url({% static "images/Tweet_Like0.png" %});
            top: 99px;  /* Adjust these values to position the like button */
            right: 288px;  /* Adjust these values to position the like button */
        }
        .button-container {
            text-align: center;
            width: 20%;
            margin-top: 20px;  /* Optional: adds some space above the button */
        }
        .center-text {
            text-align: center;
        }
    </style>
    <div class="center-text">
            <br>
            <br>
            Kindly go through the following video, and click the "Next" button once the video has finished.
            <br>
            <br>
    </div>
    <div class="ui-top">
        <img src="{% static 'images/YouTube_UI_Top.png' %}" alt="UI Top">
    </div>

    <div class="content">
         <div class="left-and-posts">
        <div class="ui-left">
            <img src="{% static 'images/YouTube_UI_Left.png' %}" alt="UI Left">
        </div>

        <div class="posts">
            <div class="post">
                <div id="player"></div> <!-- This is where the YouTube player will be created -->
            </div>
        </div>
    </div>

    </div>

    <div id="next-button-container">
        {% next_button %}
    </div>
<script>
// Define these variables globally so they can be accessed by any function
var nextButtonContainer = document.getElementById('next-button-container');
var nextButton;

window.onload = function() {
    nextButton = nextButtonContainer.querySelector('button');
    nextButton.disabled = true;  // Disable the next button as soon as the page loads
}

var player;
function onYouTubeIframeAPIReady() {
    player = new YT.Player('player', {
        height: '390',
        width: '640',
        videoId: 'HN7vJ7J0wK0',
        events: {
            'onStateChange': onPlayerStateChange
        }
    });
}

function onPlayerStateChange(event) {
    if (event.data == YT.PlayerState.ENDED) {
        nextButton.disabled = false;
    } else {
        nextButton.disabled = true;
    }
}
</script>
{% endblock %}