{% load otree static %}

{% block title %}

{% endblock %}

{% block content %}
    <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: 0px;
        }
        .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: 128px;  /* Adjust these values to position the like button */
            right: 275px;  /* 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: 200px;  /* 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 social media posts, and click the "Next" button when you're done.
        <br>
        <br>
    </div>
    <div class="ui-top">
        <img src="{% static 'images/Tweet_UI_Top.png' %}" alt="UI Top">
    </div>

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

            <div class="posts">
                <div class="post">
                    <img src="{% static 'images/Tweet_prebunkA.png' %}" alt="Post 1">
                    <div class="like-button1" onclick="toggleLike(this)" data-liked="false"></div>
                </div>
                <div class="post">
                    <img src="{% static 'images/TweetAttentionCheck.png' %}" alt="Post 2">
                    <div class="like-button3" onclick="toggleLikeAtt(this)" data-liked="false"></div>
                    <input type="hidden" name="attention_check1" id="attention_check1" value="{{ attention_check1 }}">
                </div>
                <div class="post">
                    <img src="{% static 'images/Tweet_B_Control.png' %}" alt="Post 3">
                    <div class="like-button2" onclick="toggleLike(this)" data-liked="false"></div>
                </div>
            </div>
        </div>
        <div class="button-container">
            {% next_button %}
        </div>
    </div>
<script>
    function toggleLike(element) {
        if (element.getAttribute('data-liked') === 'false') {
            element.style.backgroundImage = 'url({% static "images/Tweet_Like1.png" %})';  /* Liked image */
            element.setAttribute('data-liked', 'true');

        } else {
            element.style.backgroundImage = 'url({% static "images/Tweet_Like0.png" %})';  /* Unliked image */
            element.setAttribute('data-liked', 'false');
        }
    }
    function toggleLikeAtt(element) {
        var hiddenElem = document.getElementById('attention_check1');
        if (element.getAttribute('data-liked') === 'false') {
            element.style.backgroundImage = 'url({% static "images/Tweet_Like1.png" %})';  /* Liked image */
            element.setAttribute('data-liked', 'true');
            hiddenElem.value = 1;  // Set the value to 1 when the like button is clicked
        } else {
            element.style.backgroundImage = 'url({% static "images/Tweet_Like0.png" %})';  /* Unliked image */
            element.setAttribute('data-liked', 'false');
            hiddenElem.value = 0;  // Optionally reset the value to 0 when the like button is unclicked
        }
    }
</script>
{% endblock %}