{{ block title }}
    {% if player.participant.is_dropout %} Thank you for having participated in our experiment!
    {% else %}Stage 3: Your Choice of 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 %}

    {{ form.dictator_choice }}

    <div id="communicated-action-container" style="display: none;">
        <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>
            <br>
            <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})`;
            }

            var dictatorChoiceField = $('input[name="dictator_choice"]');
            var communicatedActionContainer = $('#communicated-action-container');
            var communicatedActionField = $('input[name="communicated_action"]');
            var sliderInput = document.querySelector('.slider');

            dictatorChoiceField.change(function() {
                var selectedValue = dictatorChoiceField.filter(':checked').val();
                if (selectedValue === '3') {
                    communicatedActionContainer.show();
                    communicatedActionField.prop('disabled', false);
                    sliderInput.required = true;
                    // Disable the "Next" button when communication is chose
                    disableNextButton();
                } else {
                    communicatedActionContainer.hide();
                    communicatedActionField.prop('disabled', true);
                    sliderInput.required = false;
                    // Disable the "Next" button when communication is chose
                    enableNextButton();
                    // Set the slider to its default state
                    slider.classList.remove('thumb-visible');
                    description.innerHTML = '';
                        }
            });

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

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

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

{% endif %}
{{ endblock }}