{# @description A whole Django formset: heading, description, set-level errors, management form, one row per form, and the add-row control. #}
{# @prop formset:text | description:"The Django formset to render; nothing renders without it." #}
{# @prop title:text | description:"Heading text; defaults to the set's model in plural." #}
{# @prop description:text | description:"Developer-supplied help text under the heading." #}
{# @prop class:text | description:"Extra classes on the root element." #}
{# @prop layout:select['stacked','tabular'] | default:"stacked" | description:"Row presentation; tabular adds column headings from the empty form." #}
{# @prop add-label:text | default:"Add row" | description:"Text for the add-row button." #}
{# @prop remove-label:text | default:"Remove" | description:"Text for each row's remove control." #}
{% load i18n l10n static mvp %}
<c-vars formset
        title
        description
        class
        layout="stacked"
        add-label="{% trans "Add row" %}"
        remove-label="{% trans "Remove" %}" />
{% if formset %}
  {% comment %}
    Alpine behaviour is `mvpFormset` in mvp/static/js/formset.js; `total`
    (monotonic, seeds TOTAL_FORMS) and `visible` (not marked for removal,
    checked against max_num) are its two counters. See contracts/formset-component.md.
  {% endcomment %}
  <div class="space-y-4 {{ class }}"
       x-data="mvpFormset({{ formset.total_form_count|unlocalize }}, {{ formset.max_num|unlocalize }})"
       x-on:mvp-formset-row-removed="visible--"
       {{ attrs }}>
    {% firstof title formset.title formset|formset_label as heading %}
    {% comment %}
      Unconditional: rows flush against the parent form's fields read as
      more of the same form without a divider marking the set off.
    {% endcomment %}
    <c-divider class="my-8">{{ heading }}</c-divider>
    {% firstof description formset.description as help_text %}
    {% if help_text %}<c-text muted size="sm">{{ help_text }}</c-text>{% endif %}
    {% if formset.non_form_errors %}
      <c-alert variant="error">{{ formset.non_form_errors }}</c-alert>
    {% endif %}
    {{ formset.management_form.INITIAL_FORMS }}
    {{ formset.management_form.MIN_NUM_FORMS }}
    {{ formset.management_form.MAX_NUM_FORMS }}
    <input type="hidden"
           name="{{ formset.management_form.TOTAL_FORMS.html_name }}"
           value="{{ formset.management_form.TOTAL_FORMS.value|unlocalize }}"
           :value="total">
    {% firstof formset|formset_grid_style as grid_style %}
    {% if layout == "tabular" %}
      <div class="hidden sm:grid sm:items-end sm:gap-x-4" style="{{ grid_style }}">
        {% comment %}
          A column's help text belongs here for the same reason its label does:
          once at the top of the column, rather than restated under every cell
          in it. The rows suppress their own copy at this breakpoint.
        {% endcomment %}
        {% for field in formset|formset_columns %}
          <div>
            <c-text tight bold size="sm">
              {{ field.label }}{% if field.field.required %}<span class="text-error" aria-hidden="true">*</span>{% endif %}
            </c-text>
            {% if field.help_text %}<c-text tight muted size="xs">{{ field.help_text }}</c-text>{% endif %}
          </div>
        {% endfor %}
        {% comment %}
          Empty cell holding the remove column open. `sr-only` takes it out of
          flow, collapsing the track and widening every row past its heading.
        {% endcomment %}
        {% if formset.can_delete %}<span aria-hidden="true"></span>{% endif %}
      </div>
    {% endif %}
    {% for form in formset.forms %}
      <c-form.formset.row :form="form"
                           :first="forloop.first"
                           :can-delete="formset.can_delete"
                           :layout="layout"
                           :grid-style="grid_style"
                           :remove-label="remove_label" />
    {% endfor %}
    <template>
      <c-form.formset.row :form="formset.empty_form"
                           :can-delete="formset.can_delete"
                           :layout="layout"
                           :grid-style="grid_style"
                           :remove-label="remove_label" />
    </template>
    <c-button type="button"
              size="sm"
              outline
              icon="plus"
              text="{{ add_label }}"
              class="mb-8"
              x-bind:disabled="!canAddRow"
              x-on:click="addRow()" />
  </div>
  {% comment %}
    Not `defer`: the base template already defers Alpine, so a deferred tag
    here would run after `alpine:init` fired and never register.
  {% endcomment %}
  <script src="{% static 'js/formset.js' %}"></script>
{% endif %}