{# Single-select list of radio buttons.

   Args:
       labels (list): Option labels, in display order. The participant's
           selection is stored as the chosen label string.
       label_html (list, optional): Per-option HTML strings. When provided,
           replaces the rendered text for each option (the underlying value
           is still drawn from `labels`).
       shuffle (bool, optional): Randomise the option order on each render.
           Defaults to False.
       other_enabled (bool, optional): Add an "Other" option with a free-text
           input. Defaults to False.
       other_text_prompt (str, optional): Label shown next to the "Other"
           radio button.
       other_input_hides (bool, optional): Hide the "Other" text box until
           the "Other" option is selected. Defaults to False.
       other_input_width (int, optional): Pixel width of the "Other" text
           input.
       required_selection (str, optional): If set, the participant must pick
           this specific option to submit; any other selection is rejected.

   Example:
       {
           "questiontype": "radiolist",
           "id": "new_radiolist",
           "instructions": "",
           "labels": ["Option A", "Option B", "Option C"]
       }
#}
{% set labels = question.labels %}
{% if question.shuffle %}
    {% do shuffle(question.labels) %}
{% endif %}
{% set is_other = question.other_enabled and question.value and question.value not in question.labels %}
{% for label in question.labels %}
    <div class="bofs-form-check">
        <label class="bofs-form-check-label">
            <input class="bofs-form-check-input"
                   type="radio"
                   name="{{ question.id }}"
                   id="{{ question.id }}{{ loop.index }}"
                   value="{{ label }}"
                   {{ "required" if question.required }}
                   {% if question.value == label %}checked{% endif %}
                   {% if question.other_enabled and question.other_input_hides %}
                   onchange="handle_radio_button_click_{{ question.id }}()"
                   {% endif %}>

           {{ question.label_html[loop.index0] if question.label_html else label }}
        </label>
    </div>
{% endfor %}
{% if question.other_enabled %}
    <div class="bofs-form-check">
        <label class="bofs-form-check-label">
            <input class="bofs-form-check-input"
                   type="radio"
                   name="{{ question.id }}"
                   id="{{ question.id }}_other"
                   value="{{ question.value|e if is_other else '' }}"
                   {{ "required" if question.required }}
                   {% if is_other %}checked{% endif %}
                   {% if question.other_input_hides %}
                   onchange="handle_radio_button_click_{{ question.id }}()"
                   {% endif %}>
            {{ question.other_text_prompt }}
        </label>
        <input
            style="display: {% if question.other_input_hides and not is_other %}none{% else %}block{% endif %}; margin-left: 28px; width: {{ question.other_input_width if question.other_input_width else config['DEFAULT_FIELD_WIDTH'] }}px;"
            type="text"
            name="{{ question.id }}_other_text_prompt"
            id="{{ question.id }}_other_text_prompt"
            {% if is_other %}value="{{ question.value|e }}"{% endif %}
            onchange="{ $('#{{ question.id }}_other').val($('#{{ question.id }}_other_text_prompt').val()); }"
            aria-label="custom text entry">
        {% if question.other_input_hides %}
        <script>
            function handle_radio_button_click_{{ question.id }}() {
                if ($('#{{ question.id }}_other').is(':checked')) {
                    $('#{{ question.id }}_other_text_prompt').css('display', 'block')
                } else {
                    $('#{{ question.id }}_other_text_prompt').css('display', 'none')
                }
            }
        </script>
        {% endif %}
    </div>
{% endif %}
{% if question.required_selection %}
    <div id="{{ question.id }}-feedback" class="bofs-invalid-feedback">
        You must select "{{ question.required_selection }}" to continue.
    </div>
    {% set loop_index = question.labels.index(question.required_selection) + 1 %}
    <script>
        // Block submission unless the participant picked the value named in `required_selection`.
        (function () {
            'use strict';
            window.addEventListener('load', function () {
                // Fetch all the forms we want to apply custom Bootstrap validation styles to
                let form = document.getElementById('form');
                let required_selection = document.getElementById('{{ question.id }}{{ loop_index }}');
                let feedback = document.getElementById('{{ question.id }}-feedback');

                form.addEventListener('submit', function (event) {
                    if (required_selection.checked !== true) {
                        feedback.style.display = 'block';
                        event.preventDefault();
                        event.stopPropagation();
                    }
                }, false);
            }, false);
        })();
    </script>

{% endif %}