{% load widget_tweaks %}


{% if field.is_hidden %}
    {{ field }}
{% else %}

    {% comment %}
         Make the field widget type available to templates so we can
         mark-up checkboxes differently to other widgets.
    {% endcomment %}

    {% block control_group %}
        <div class="row align-center {% if field.errors %}error{% endif %}">
            {% block controls %}
                <div class="small-12 medium-8 columns">
                    <div {% if field.widget_type == 'CheckboxInput' %}class="checkbox"{% endif %}>

                        {% block widget %}
                            <!-- {{ field|widget_type }} -->
                            {# checkbox #}
                            {% if field|widget_type == 'checkboxinput' %}
                                <label for="{{ field.auto_id }}" class="{% if field.field.required %}required{% endif %}">

                                    {% if field.field.required %}
                                        {% render_field field|attr:'required' %}
                                    {% else %}
                                        {% render_field field %}
                                    {% endif %}

                                    {{ field.label|safe }}
                                </label>

                            {# radio #}
                            {% elif field|widget_type == 'radioselect' %}
                                <label for="{{ field.auto_id }}" class="{% if field.field.required %}required{% endif %}">

                                    {% if field.field.required %}
                                        {% render_field field|attr:'required' %}
                                    {% else %}
                                        {% render_field field %}
                                    {% endif %}

                                    {{ field.label|safe }}
                                </label>

                            {% else %}
                                {% if field.field.required %}
                                    <b>{{ field.label|safe }}</b>
                                {% else %}
                                    {{ field.label|safe }}
                                {% endif %}
                                <br>
                                {# multiple checkboxes #}
                                {% if field|widget_type == 'checkboxselectmultiple' %}
                                    {% for checkbox in field %}
                                        <div class="checkbox">
                                            <label for="{{ checkbox.id_for_label }}" class="{% if field.field.required %}required{% endif %}">
                                                {{ checkbox.tag }}
                                                {{ checkbox.choice_label|safe }}
                                            </label>
                                        </div>
                                    {% endfor %}

                                {# select #}
                                {% elif field|widget_type == 'select' or field|widget_type == 'toggleselectwidget' %}
                                    {% render_field field class+='js-selectize' %}
                                {% elif field|widget_type == 'selectmultiple' %}
                                    {% render_field field class+='js-selectize' multiple="" %}
                                {% elif field|widget_type == 'datetimeinput' %}
                                    {% render_field field class+='js-datetimepicker' %}
                                {% elif field|widget_type == 'timeinput' %}
                                    {% render_field field class+='js-timepicker' %}
                                {% elif field|widget_type == 'dateinput' %}
                                    {% render_field field class+='js-datepicker' %}

                                {% else %}
                                    {% render_field field %}
                                {% endif %}
                            {% endif %}

                        {% endblock %}


                        {% block errors %}
                            {% for error in field.errors %}
                                <span class="form-error is-visible">
                                    <i class="icon-exclamation-sign"></i>
                                    {{ error }}
                                </span>
                            {% endfor %}
                        {% endblock %}


                        {% block help_text %}
                            {% if field.help_text %}
                                <div class='help-text'>
                                    {# We allow HTML within form help fields #}
                                    {{ field.help_text|safe }}
                                </div>
                            {% endif %}
                        {% endblock %}

                    </div>
                </div>
            {% endblock %}

        </div>
    {% endblock %}

{% endif %}