{% load i18n %}
{% load formset_modal_tags %}

<div id="id_{{ formset.prefix }}"
     class="formset"
     data-formset-prefix="{{ formset.prefix }}"
     data-formset-variant="modal"
     data-template-pack="{{ template_pack }}"
     data-modal-size="{{ modal_size }}"
     data-modal-placement="{{ modal_placement }}"
>
    {{ formset.management_form }}
    <template>
    {% include edit_button_template_name %}
    </template>
    <div data-formset-body class="formset-row">
        {% for form in formset.forms %}
        {% uuid4 dialog_id %}
        <div data-formset-form>
            {% include form_template_name %}
        </div>
        {% endfor %}
    </div>
    <script type="form-template" data-formset-empty-form>
        {% escapescript %}
            <div data-formset-form>
                {% include form_template_name with form=formset.empty_form dialog_id='__dialog_id__' %}
            </div>
        {% endescapescript %}
    </script>

    <div class="table-responsive">
        <table class="table table-striped table-bordered mb-2">
            <thead class="formset-table">
                <tr>
                <th style="width: 2.5rem; text-align: center;"><input type="checkbox" class="select-all form-check-input"></th>
                <th style="width: 2.5rem;">No.</th>
                {% for header in headers %}
                <th scope="col"
                    style="{% if header.type == 'numeric' %}text-align:center; width: 10rem;{% endif %} {% if header.type == 'bool' %}text-align:center; width: 4rem;{% endif %} {% if header.type == 'date' %}text-align:center; width: 5rem;{% endif %}{% if header.type == 'text' %}text-align:left;{% endif %}"
                    data-field-name="{{ header.field }}"
                    data-field-type="{{ header.type }}"
                    {% if header.has_summary %} data-field-summary="has-summary" {% endif %}>
                    {{ header.title }}
                </th>
                {% endfor %}
                <th class="text-left" style="width: 4rem;"></th>
                </tr>
            </thead>
            <tbody>  
                <tr class="empty-table">
                    <td class="empty-table-content text-center" colspan={{ headers|length|add:3 }}>
                        {% include empty_state_template_name %}
                    </td>
                </tr>
            </tbody>
            {% if has_footer %}
            <tfoot>
                <tr>
                    <td>&nbsp;</td>
                    <td>&nbsp;</td>
                    {% for header in headers %}
                        <td class="text-end font-weight-bold" {% if header.has_summary %} data-summary-column="{{ header.field }}" {% endif %}> {% if header.has_summary %} 0 {% endif %} </td>
                    {% endfor %}
                    <td>&nbsp;</td>
                </tr>
            </tfoot>
            {% endif %}
        </table>
    </div>
    <div class="d-flex mb-3">
        <button type="button" class="btn btn-primary btn-sm" data-formset-add>{% trans "Add" %}</button>
        <button type="button" class="btn btn-danger btn-sm delete-selected ms-1">{% trans "Delete" %}</button>
    </div>
</div>
