{% load arctic_tags %}

{% if layout %}
    {# TODO Move layout to it's own template file #}
    {% for index, layout_item in layout.items %}
        <div class="form-block {{ form_display }}">

            {% if layout_item.fieldset.title or layout_item.fieldset.description %}
                <div class="arctic-card__form-header">
                {% if layout_item.fieldset.collapsible %}
                    <span class="collapse-control {% if layout_item.fieldset.collapsible == 'closed'%} collapsed {% endif %}" data-toggle="collapse" data-target="#js--collapse-form-{{forloop.counter}}" aria-expanded="false" aria-controls="js--collapse-form">
                        <i class="fa fa-angle-down"></i>
                    </span>
                {% endif %}
            {% endif %}
                {% if layout_item.fieldset.title %}
                    <h6 class="arctic-card__title">{{ layout_item.fieldset.title }}</h6>
                {% endif %}
                {% if layout_item.fieldset.description %}
                    <p class="arctic-card__subtitle">{{ layout_item.fieldset.description }}</p>
                {% endif %}
            {% if layout_item.fieldset.title or layout_item.fieldset.description %}
                </div>
                <div class="arctic-card__placeholder
                {%if layout_item.fieldset.title and layout_item.fieldset.description %}
                arctic-card__placeholder--big {% else %}
                arctic-card__placeholder--small
                {% endif %}"></div>
            {% endif %}

            {# In case it's collapsed by default and does not have a title or description #}
            {% if layout_item.fieldset.collapsible and not layout_item.fieldset.title and not layout_item.fieldset.description %}
                <div class="arctic-card__form-header js--collapse-toggle">
                    <span class="collapse-control collapsed" data-toggle="collapse" data-target="#js--collapse-form-{{forloop.counter}}" aria-expanded="false" aria-controls="js--collapse-form">
                        <i class="fa fa-angle-down"></i>
                    </span>
                    {# TODO add translation #}
                    <h6 class="arctic-card__title">General</h6>
                </div>
                <div class="arctic-card__placeholder arctic-card__placeholder--small"></div>
            {% endif %}

            <div id="js--collapse-form-{{forloop.counter}}" class="{% if layout_item.fieldset.collapsible == 'closed' %} collapse {% else %} show {% endif %}">
                {% for row in layout_item.rows %}
                    <div class="row{% if row.field.errors %} invalid-form-field{% endif %}">
                        {% if row|typename == 'dict' %}
                            {% include 'arctic/partials/form_field.html' with field=row.field style=style column=row.column layout=True %}
                        {% else %}
                            {% for field in row %}
                                {% include 'arctic/partials/form_field.html' with field=field.field style=style column=field.column layout=True %}
                            {% endfor %}
                        {% endif %}
                    </div>
                {% endfor %}
            </div>
        </div>
    {% endfor %}
{% else %}
    {# TODO Move this section to it's own template file #}
    <div class="form-block {{ form_display }}">
        {% for field in form %}
            {% include 'arctic/partials/form_field.html' %}
        {% endfor %}
    </div>
{% endif %}

{% block errors %}
    {% for error in form.non_field_errors %}
        <span class="invalid-feedback col form-group">
            {{ error }}
        </span>
    {% endfor %}
{% endblock %}
