{% extends 'ddm_core/page_with_form.html' %}
{% load static %}

{% block page_title %}Filter Configuration{% endblock page_title %}

{% block main_heading %}
  Filter Configuration for {{ target_type }} "{{ target_name|truncatechars:24 }}"
{% endblock main_heading %}

{% block sub_heading %}
  <p>
    Configure conditions to hide the {{ target_type }} based on answers to previous questions/items or other variables.
  </p>
{% endblock sub_heading %}

{% block form_content %}
  {{ formset.management_form }}

  <div id="filter-edit-section" class="ddm-section-container">
    {% if form.errors or formset.errors %}
      <div class="mt-2">
        {% include "ddm_core/form_components/_general_form_errors.html" with override_standard_errors=True %}
      </div>
    {% endif %}

    <p><b>{{ target_type }} is hidden, if:</b></p>

    <div class="table-responsive">
      <table id="filter-condition-table" class="table table-sm mt-3 align-middle">
        <thead>
        <tr>
          <th><label>{{ formset.empty_form.index.label }}</label></th>
          <th><label>{{ formset.empty_form.combinator.label }}</label></th>
          <th><label>{{ formset.empty_form.source.label }}</label></th>
          <th><label>{{ formset.empty_form.condition_operator.label }}</label></th>
          <th><label>{{ formset.empty_form.condition_value.label }}</label></th>
          <th><label>Delete</label></th>
        </tr>
        </thead>

        <tbody id="filter-condition-form-container" class="border-top-0">
        {% for form in formset.forms %}
          {% include "ddm_questionnaire/form_sections/partials/_filter_condition_form.html" with form=form %}
        {% empty %}
          <tr id="no-filter-conditions-placeholder"><td colspan="100%">No items defined.</td></tr>
        {% endfor %}
        </tbody>
      </table>
    </div>

    <button class="ddm-btn ddm-btn-inverted mt-2 mb-4" type="button" id="add-filter-condition-form"><i class="bi bi-plus"></i>&nbsp;&nbsp;Add Filter</button>

    {# Empty formset #}
    <table class="d-none">
      <tbody id="empty-filter-condition-form">
      {% include "ddm_questionnaire/form_sections/partials/_filter_condition_form.html" with form=formset.empty_form %}
      </tbody>
    </table>
  </div>
{% endblock form_content %}

{% block scripts %}
  {{ block.super }}
  <script src="{% static 'ddm_questionnaire/js/filter-conditions-form-helper.js' %}"></script>
{% endblock scripts %}