{{ 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>

{% else %}
    <p>
        Participants of Type A transferred <b>{{group.total_contribution}}</b> to the group account.
    </p>

    <p> How many Points do you want to transfer from or to the group account?
        <br>Click on the bar and then move the cursor to decide.</p>

<input type="range" name="dictator_action" min="{{ min }}" max="10" oninput="updateDescription(this)" class="slider">
<p id="description"></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 */
    }

    .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');

    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 keep = (0.6 * (js_vars.potsize - dictator_action)).toFixed(1);
        let payoff = (js_vars.endowment + dictator_action + 1 * keep).toFixed(1);

        let text = dictator_action >= 0
            ? `You transfer ${dictator_action} Point(s) from the group account to your private account.`
            : `You transfer ${Math.abs(dictator_action)} Point(s) from your private account to the group account.`;

         let tableHtml = `
            <table>
                <tr>
                    <th class="block-cell"></th> <!-- Leere Zelle für den oberen linken Eckpunkt -->
                    <th class="header-cell">Points</th> <!-- Zelle mit grauem Hintergrund für die Überschrift "Points" -->
                </tr>
                <tr>
                    <td>Your income from the private account is:</td>
                    <td> ${private}</td>
                </tr>
                <tr>
                    <td>The income from the group account <i>for everyone</i> is:</td>
                    <td> ${keep}</td>
                </tr>
                <tr>
                    <td>Your overall income in this round is:</td>
                    <td> ${payoff}</td>
                </tr>
            </table>`;


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

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