{{ block title }}
    {% if player.participant.is_dropout %} Thank you for having participated in our experiment!
    {% else %} Stage 2: Your Thoughts {% endif %}
{{ endblock }}

{{ block content }}
{% if player.participant.is_dropout %}
    <p>
        You were excluded from the experiment due to inactivity.
    </p>
    <p>
        Please close this study and return your submission on Prolific by selecting the 'Stop Without Completing' button.
    </p>

{% else %}
<p>
    How many Points do you think were transferred to the group account by <i>all participants of Type A</i> (including you)?
    {{ form.belief_contribution }}
</p>

<p>
    What do you think was the effect of Participant B's transfer decision on the group account?
</p>

<div class="slider-container">
    <span class="slider-label">negative effect</span>
    <input type="range" name="belief_dictator" id="belief_dictator" min="-40" max="10" oninput="updateDescription(this)" class="slider">
    <span class="slider-label">positive effect</span>
</div>
<p id="description"></p>

<style>
    {{ include 'general/slider_design.html'}}

    /* Override default styles for the disabled "Next" button */
    .otree-btn-next:disabled {
        opacity: 1; /* Set opacity to 1 to keep the button fully opaque */
    }
</style>

<script>
    let contributionField = document.querySelector('#id_belief_contribution');
    let slider = document.querySelector('#belief_dictator');
    let description = document.getElementById('description');

    contributionField.addEventListener('input', function() {
        // Reset the slider to its default state
        slider.classList.remove('thumb-visible');
        description.innerHTML = '';

        // Update the min value of the slider based on belief_contribution
        slider.min = -(this.value);

        // Disable the "Next" button when belief_contribution changes
        disableNextButton();
    });

    slider.addEventListener('input', function() {
        this.classList.add('thumb-visible');
        updateDescription(this);
        enableNextButton();
    });

    // Function to enable the "Next" button
    function enableNextButton() {
        let nextButton = document.querySelector('.otree-btn-next');
        nextButton.disabled = false;
    }

    // Function to disable the "Next" button
    function disableNextButton() {
        let nextButton = document.querySelector('.otree-btn-next');
        nextButton.disabled = true;
    }

    // Funtion to Update Text based on Inputs
    function updateDescription(input) {
        let belief_dictator = parseInt(input.value);

        let text = belief_dictator >= 0
            ? `You think Participant B <b>increased</b> the size of the group account by ${belief_dictator} Point(s).`
            : `You think Participant B <b>decreased</b> the size of the group account by ${Math.abs(belief_dictator)} Point(s).`;


        description.innerHTML = `<br>${text}`;
    }
</script>

    <p>
    {{ next_button }}
    </p>


    {{ include 'general/countdown_includable.html' }}
<!--    {{ include 'general/instruction_popup.html' }}-->
    {{ include 'general/dropout_communication.html' }}
{% endif %}
{{ endblock }}