{{ block title }}
    {% if player.participant.is_dropout %} Thank you for having participated in our experiment!
    {% else %}Stage 2: Your Choice {% 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 %}
<table>
                <tr>
                    <th class="header-cell">Points in:</th> <!-- Leere Zelle für den oberen linken Eckpunkt -->
                    <th class="header-cell">Before</th> <!-- Zelle mit grauem Hintergrund für die Überschrift "Points" -->
                    <th class="header-cell">After</th>
                </tr>
                <tr>
                    <td>The group account:</td>
                    <td> {{ potsize }} </td>
                    <td><span id="groupPlaceholder"></span></td>
                </tr>
                <tr>
                    <td>Your private account:</td>
                    <td>10</td>
                    <td><span id="privatePlaceholder"></span></td>
                </tr>
            </table>

<p><br>Click on the bar and then move the cursor to decide.
<div class="slider-container">
    <span class="slider-label">private account</span>
    <input type="range" name="dictator_action" min="{{ min }}" max="10" oninput="updateDescription(this)" class="slider">
    <span class="slider-label">group account</span>
</div>
<p id="description"></p>
</p>

<style>

    {{ include 'general/slider_design.html'}}
    {{ include 'general/table_design.html'}}

    .header-cell {
        background-color: #f2f2f2;
        border: 1px solid #dddddd; /* Add border for top line */
    }

    .block-cell {
        border: none; /* Delete border for empty cells which will be the top left cell */
    }

    .header-cell:nth-child(2),
    .header-cell:nth-child(3),
    td:nth-child(2),
    td:nth-child(3) {
        width: 25%; /* Adjust the width as needed for equal-sized columns */
        text-align: center;
    }
    .otree-btn-next:disabled {
                opacity: 1; /* Set opacity to 1 to keep the button fully opaque */
            }
</style>

<script>
    let slider = document.querySelector('.slider');
    let description = document.getElementById('description');

    // Add these lines to your existing script
    let privatePlaceholder = document.getElementById('privatePlaceholder');
    let groupPlaceholder = document.getElementById('groupPlaceholder');

    // Initially set the placeholders to be empty
    privatePlaceholder.textContent = '';
    groupPlaceholder.textContent = '';

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

    function updateDescription(input) {
        let dictator_action = -parseInt(input.value);
        let private = (10 + dictator_action).toFixed(0);
        let group = (js_vars.potsize - dictator_action).toFixed(0);
        let privdiff = private-10
        let groupdiff = -privdiff

        privatePlaceholder.textContent = privdiff >= 0 ? `${private} (+${privdiff})` : `${private} (${privdiff})`;
        groupPlaceholder.textContent = groupdiff >= 0 ? `${group} (+${groupdiff})` : `${group} (${groupdiff})`;
    }

    // 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;
        }

    // Call the function when the page loads
    document.addEventListener("DOMContentLoaded", function() {
        disableNextButton();
        });
</script>

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

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