{% 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="form-check {{ "form-check-inline" if question.horizontal else "" }}">
        <input class="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 %}>
        <label class="form-check-label"
               for="{{ question.id }}{{ loop.index }}">
           {{ question.label_html[loop.index0] if question.label_html else label }}
        </label>
    </div>
{% endfor %}
{% if question.other_enabled %}
    <div class="form-check {{ "form-check-inline" if question.horizontal else "" }}">
        <div style="display:grid; grid-template-columns: 0 auto; align-items: center;">
            <input class="form-check-input"
                   style="grid-column: 1; grid-row: 1 / span 2;"
                   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 %}>
            <label class="form-check-label"
                   style="grid-column: 2;"
                   for="{{ question.id }}_other">
               {{ question.other_text_prompt }}
            </label>
            <input
                style="grid-column: 2; width: {{ question.other_input_width if question.other_input_width else config['DEFAULT_FIELD_WIDTH'] }}px; {% if question.other_input_hides and not is_other %}display: none;{% endif %}"
                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', 'inline')
                    } else {
                        $('#{{ question.id }}_other_text_prompt').css('display', 'none')
                    }
                }
            </script>
            {% endif %}
        </div>
    </div>
{% endif %}
{% if question.required_selection %}
    <div id="{{ question.id }}-feedback" class="invalid-feedback">
        You must select "{{ question.required_selection }}" to continue.
    </div>
    {% set loop_index = question.labels.index(question.required_selection) + 1 %}
    <script>
        // Example starter JavaScript for disabling form submissions if there are invalid fields
        (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 %}