field.html

{% load util_tags %}

{% with widget_type=field|widget_type field_type=field|field_type %}

<div class="form__group{% if widget_type == 'checkbox_input' %} form__group--checkbox{% endif %}{% if widget_type == 'clearable_file_input' or widget_type == 'multi_file_input' %} form__group--file{% endif %}{% if field.help_text %} form__group--wrap{% endif %}{% if field.errors %} form__error{% endif %}{% if is_application and field.field.group_number > 1 %} field-group field-group-{{ field.field.group_number }}{% endif %}{% if is_application and field.field.grouper_for %} form-fields-grouper{% endif %}" {% if is_application and field.field.grouper_for %}data-grouper-for="{{ field.field.grouper_for }}" data-toggle-on="{{ field.field.choices.0.0 }}" data-toggle-off="{{ field.field.choices.1.0 }}"{% endif %}{% if is_application and field.field.group_number > 1 %} data-hidden="{% if not show_all_group_fields %}true{% else %}false{% endif %}"{% endif %}>
    {% if widget_type == 'clearable_file_input' or widget_type == 'multi_file_input' %}
        <span class="form__question">{{ field.label }}</span>
        <label for="{{ field.id_for_label }}" class="form__question form__question--{{ field_type }} {{ widget_type }}" {% if field.field.required %}required{% endif %}>
            <span>Upload</span>
            {% if field.field.required %}
                <span class="form__required">*</span>
            {% endif %}
        </label>
    {% else %}
        <label for="{{ field.id_for_label }}" class="form__question form__question--{{ field_type }} {{ widget_type }}" {% if field.field.required %}required{% endif %}>
            <span>{{ field.label }}</span>
            {% if field.field.required %}
                <span class="form__required">*</span>
            {% endif %}
        </label>
    {% endif %}

    {% if field.help_text %}
        <p class="form__help">{{ field.help_text|safe }}</p>
    {% endif %}

    {% if field.field.help_link %}
        <p class="form__help-link"><a href="{{ field.field.help_link }}" target="_blank">See help guide for more information.<svg class="form__open-icon"><use xlink:href="#open-in-new-tab"></use></svg></a></p>
    {% endif %}

    <div class="form__item">
        {% if widget_type == 'date_input' or widget_type == 'date_time_input' %}
            <div class="{{ widget_type }}">
        {% endif %}

        {{ field }}

        {% if field.errors %}<h6 class="form__error-text">{{ field.errors.as_text|linebreaksbr }}</h6>{% endif %}
        {% if widget_type == 'clearable_file_input' or widget_type == 'multi_file_input' %}
            <!-- <div class="form__file-drop-zone">Drop files here</div> -->
            <output class="form__file-list"></output>
        {% endif %}
        <label for="{{ field.id_for_label }}"></label>
        {% if widget_type == 'date_input' or widget_type == 'date_time_input' %}
            </div>
        {% endif %}
    </div>
</div>
{% endwith %}