{% load user_extras %}
{% load bootstrap %}
{% load crispy_forms_filters %}
{% load i18n %}
{% load formset_tags %}

{{ form|crispy }}


<div class="formset" data-formset data-formset-prefix="{{ form.formset.prefix }}">
    {{ form.formset.management_form }}
    <div class="card mb-2">
        <div class="card-body">
            <h3 class="card-title">{% translate "Units" %}</h3>
            {{ form.formset|formset_errors }}
            <ul class="list-group list-group-flush" data-formset-body>
                {% for unit_form in form.formset %}
                    <li class="list-group-item" data-formset-form>
                        <div class="row align-items-center">
                            <div class="col-md-4">
                                {{ unit_form.building_block|as_crispy_field }}
                            </div>
                            <div class="col-md-4 col-lg-4">
                                {{ unit_form.label|as_crispy_field }}
                            </div>
                            <div class="col-md-3 col-lg-3">
                                {{ unit_form.optional|as_crispy_field }}
                            </div>
                            <div class="col-md-1">
                                <button class="btn btn-link" type="button"
                                        data-formset-delete-button><span
                                    class="fas fa-trash-alt"></span></button>
                            </div>
                        </div>
                        <div class="d-none">
                            {{ unit_form.DELETE }}
                            {{ unit_form.uuid }}
                        </div>
                    </li>
                {% endfor %}
            </ul>

            <input class="btn btn-secondary mt-2" type="button"
                   value="{% translate "Add unit" %}"
                   data-formset-add>
        </div>
    </div>

    <script type="form-template" data-formset-empty-form>
        {% escapescript %}
            <li class="list-group-item" data-formset-form>
            <div class="row align-items-center">
            <div class="col-md-4">
            {{ form.formset.empty_form.building_block|as_crispy_field }}
            </div>
            <div class="col-md-4 col-lg-4">
            {{ form.formset.empty_form.label|as_crispy_field }}
            </div>
            <div class="col-md-3 col-lg-3">
            {{ form.formset.empty_form.optional|as_crispy_field }}
            </div>
            <div class="col-md-1">
            <button class="btn btn-link" type="button"
            data-formset-delete-button><span
            class="fas fa-trash-alt"></span></button>
            </div>
            </div>
            <div class="d-none">
            {{ form.formset.empty_form.DELETE }}
            {{ form.formset.empty_form.uuid }}
            </div>
            </li>
        {% endescapescript %}
    </script>
</div>

{% if request.user|user_has_permission:"complexsignup.change_buildingblock" %}
    <p>
        <a href="{% url "complexsignup:blocks_editor" %}"
           class="btn btn-sm btn-primary"
           target="_blank">
            {% translate "Edit units" %}
        </a>
    </p>
{% endif %}