{{ scale_formset.management_form }}

{{ scale_formset.non_form_errors }}

<div class="table-responsive">
  <table id="scale-point-table" class="table table-sm mt-3 align-middle">
    <thead>
    <tr>
      <th><label>{{ scale_formset.empty_form.index.label }}</label></th>
      <th><label>{{ scale_formset.empty_form.value.label }}</label></th>
      <th><label>{{ scale_formset.empty_form.input_label.label }}</label></th>
      <th><label>{{ scale_formset.empty_form.heading_label.label }}</label></th>
      <th><label>{{ scale_formset.empty_form.secondary_point.label }}</label></th>
      <th><label>Delete</label></th>
    </tr>
    </thead>

    <tbody id="scale-point-form-container" class="border-top-0">
    {% for form in scale_formset.forms %}
      {% include "ddm_questionnaire/form_sections/partials/_scale_point_form.html" with form=form %}
    {% empty %}
      <tr id="no-scales-placeholder"><td colspan="100%">No scale points defined.</td></tr>
    {% endfor %}
    </tbody>
  </table>
</div>

<button type="button" class="ddm-btn ddm-btn-inverted" id="add-scale-point-form"><i class="bi bi-plus"></i>&nbsp;&nbsp;Add Scale Point</button>

{# Empty formset #}
<table class="d-none">
  <tbody id="empty-scale-point-form">
  {% include "ddm_questionnaire/form_sections/partials/_scale_point_form.html" with form=scale_formset.empty_form %}
  </tbody>
</table>