{% load i18n %}
{% load event_tags %}
{% load display_tags %}
{% block css %}
    {{ form.media.css }}
{% endblock %}
{% block js %}
    {{ form.media.js }}
{% endblock %}
{% if form.non_field_errors %}
    <div class="alert alert-danger alert-dismissible" role="alert"
         x-data="{ show: true }" x-show="show" x-transition>
        <button type="button" class="close" @click="show = false" aria-label="{% trans 'Close' %}"><span
                aria-hidden="true">&times;</span></button>
        {{ form.non_field_errors }}
    </div>
{% endif %}
{% for field in form.hidden_fields %}
    {{ field }}
{% endfor %}

{% if form|has_required_field and SHOW_A11Y_REQUIRED_FIELDS_NOTICE %}
    <div class="form-group">
        <div class="col-sm-offset-2 col-sm-10">
            <p class="help-block">
                <em>Required fields are marked with an asterisk</em><sup>*</sup>
            </p>
        </div>
    </div>
{% endif %}

{% for field in form.visible_fields %}
    <div class="form-group{% if field.errors %} has-error{% endif %}">
        {% if field|is_checkbox %}
            <div class="col-sm-offset-2 col-sm-10 {{ classes.single_value }}">
                <div class="checkbox">
                    {% if field.auto_id %}
                        <label {% if field.field.required and form.required_css_class %}class="col-sm-2 control-label"{% endif %}>
                            {{ field }} <span>{{ field.label }}{% if field.field.required%}<sup>*</sup>{% endif %}</span>
                        </label>
                    {% endif %}
                    {% if field.help_text %}
                        <i class="fa-solid fa-circle-question has-popover" data-content="{{ field.help_text }}">
                        </i>
                    {% endif %}
                    {% for error in field.errors %}
                        <span class="help-block {{ form.error_css_class }}">{{ error }}</span>
                    {% endfor %}

                </div>
            </div>
        {% elif field|is_radio %}
            {% if field.auto_id %}
                <label class="col-sm-2 control-label
                        {% if field.field.required %}{{ form.required_css_class }}{% endif %}">{{ field.label }}{% if field.field.required%}<sup>*</sup>{% endif %}</label>
            {% endif %}
            <div class="col-sm-10 {{ classes.value }}">
                {% for choice in field %}
                    <div class="radio">
                        <label>
                            {{ choice.tag }}
                            {{ choice.choice_label }}
                        </label>
                    </div>
                {% endfor %}

                {% for error in field.errors %}
                    <span class="help-block {{ form.error_css_class }}">{{ error }}</span>
                {% endfor %}

                {% if field.help_text %}
                    <i class="fa-solid fa-circle-question has-popover" data-content="{{ field.help_text }}">
                    </i>
                {% endif %}
            </div>
        {% else %}
            {% if field.auto_id %}
                <label class="col-sm-2 control-label
                        {% if field.field.required %}{{ form.required_css_class }}{% endif %}"
                       for="{{ field.auto_id }}">{{ field.label }}{% if field.field.required%}<sup>*</sup>{% endif %}
                        {% if field.help_text %}
                            <i class="fa-solid fa-circle-question has-popover" data-content="{{ field.help_text }}">
                            </i>
                        {% endif %}
                </label>
            {% endif %}
            <div class="col-sm-10 {{ classes.value }} {% if field|is_multiple_checkbox %}multiple-checkbox{% endif %}">
                {{ field|addcss:"class:form-control" }}
                <p style="font-style: italic; margin-bottom: 0px;">{{ field.field.widget.attrs.message }}</p>
                {% for error in field.errors %}
                    <span class="help-block {{ form.error_css_class }}">{{ error }}</span>
                {% endfor %}
            </div>
        {% endif %}
    </div>
{% endfor %}

{% if form.disclaimer %}
    <div class="form-group" style="background-color:#DADCE2; border:1px solid #003333; padding:.8em; margin:.8em; ">
        <div class="col-sm-2" style="color:#ff0000;">Disclaimer</div>
        <div class="col-sm-10">{{ form.disclaimer }}</div>
    </div>
{% endif %}