{{ block title }}
    {% if player.participant.is_dropout %} Thank you for having participated in our experiment!
    {% else %} Stage 3: Your Communication {% 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>
<style>
                {{ 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;
                }
</style>
            <table>
                <tr>
                    <th class="header-cell">Effect on Group Account by:</th> <!-- Leere Zelle für den oberen linken Eckpunkt -->
                    <th class="header-cell">True</th> <!-- Zelle mit grauem Hintergrund für die Überschrift "Points" -->
                    <th class="header-cell">Communicated</th>
                </tr>
                <tr>
                    <td>Participants of Type A</th>:</td>
                    <td>{{ realcontr }}</td>
                    <td><span id="groupPlaceholder"></span></td>
                </tr>
                <tr>
                    <td>Your decision:</td>
                    <td>{{ realaction }} </td>
                    <td><span id="effectPlaceholder"></span></td>
                </tr>
            </table>
</p>

        <p>
            Click on the bar and then move the cursor to decide what to communicate.
        </p>

        <div class="slider-container">
        <span class="slider-label">Effect by Type A</span>
        <input type="range" name="communicated_action" min="{{ max_embezzle }}" max="{{ max_contr }}" oninput="updateDescription(this)" class="slider">
        <span class="slider-label">Your 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 slider = document.querySelector('.slider');
            let description = document.getElementById('description');

            let effectPlaceholder = document.getElementById('effectPlaceholder');
            let groupPlaceholder = document.getElementById('groupPlaceholder');

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

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

            function updateDescription(input) {
                let communicated_action = parseInt(input.value);
                let contribution = (js_vars.real_pot - communicated_action).toFixed(0);
                let groupdiff = (contribution - js_vars.realcontr)
                let effectdiff = -groupdiff

                effectPlaceholder.textContent = effectdiff >= 0 ? `${communicated_action} (+${effectdiff})` : `${communicated_action} (${effectdiff})`;
                groupPlaceholder.textContent = groupdiff >= 0 ? `${contribution} (+${groupdiff})` : `${contribution} (${groupdiff})`;
            }

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

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

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

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