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

{% else %}

    {{ form.dictator_choice }}

    <div id="communicated-action-container" style="display: none;">
        <p>
            <b>Reminder of your decision</b>

            <style>
                {{ include 'general/table_design.html' }}
            </style>
            <br>
            <table>
              <tr>
                <th>Sum of transfer by  <br> participants of Type A</th>
                <th>Effect of <br> your choice </th>
                <th>Final size of <br> group account </th>
              </tr>
              <tr>
                <td>{{ group.total_contribution }}</td>
                <td>{{ player.dictator_action }}  </td>
                <td>{{ realpot }} Points</td>
              </tr>
            </table>
        </p>

        <p>
            <b>What do you want to communicate?</b>
        </p>
        <input type="range" name="communicated_action" min="{{ max_embezzle }}" max="{{ max_contr }}" oninput="updateDescription(this)" class="slider">
        <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');

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

            function updateDescription(input) {
                let communicated_action = parseInt(input.value);
                let potsize = (js_vars.real_pot - communicated_action).toFixed(0);

                let tableHtml = `
                        <table>
                            <tr>
                                <th>Sum of transfers by  <br> participants of Type A</th>
                                <th>Effect of <br> your choice </th>
                                <th>Final size of <br> group account </th>
                            </tr>
                            <tr>
                                <td>${potsize} Points</td>
                                <td>${communicated_action} Points</td>
                                <td>{{ realpot }} Points</td>
                            </tr>
                        </table>`;


                description.innerHTML = `With your selection, you communicate: <br><br> ${tableHtml}`;
            }

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