<!-- Search Form -->
{% load crispy_forms_tags %}
<div class="container p-4">
    <h2>Filter Results:</h2>
    <!-- Helpful for debugging
  <p>Filter mix-ins: {{ filterset_mixins }}</p>
  <p>Extra filters: {{ extra_filters }}</p>
-->
    <form method="get" enctype="multipart/form-data">
        {{ form.non_field_errors }}
        <div class="accordion custom-accordion" id="accordionFilters">
            <!-- Iterate through the main tables that we've prebuilt pages for -->
            {% if filterset.filter_name == "StaticEnergy" %}
                {% include "core_components/base_filter_types/static-energy.html" %}
            {% elif filterset.filter_name == "DiffusionAnalysis" %}
                {% include "core_components/base_filter_types/diffusion-analysis.html" %}
            {% elif filterset.filter_name == "DensityofStatesCalc" %}
                {% include "core_components/base_filter_types/density-of-states-calc.html" %}
            {% elif filterset.filter_name == "BandStructureCalc" %}
                {% include "core_components/base_filter_types/band-structure-calc.html" %}
            {% elif filterset.filter_name == "Dynamics" %}
                {% include "core_components/base_filter_types/dynamics-run.html" %}
            {% elif filterset.filter_name == "Relaxation" %}
                {% include "core_components/base_filter_types/relaxation.html" %}
                <!-- End prebuilt pages -->
                <!-- If none of the pages above were used, then we iterate through the fundamental
      mixins and pull the proper components. Is there a better way to do this as a django for-loop? -->
            {% else %}
                {% if "Calculation" in filterset_mixins %}
                    {% include "core_components/base_filter_types/calculation.html" %}
                {% endif %}
                {% if "Structure" in filterset_mixins %}
                    {% include "core_components/base_filter_types/structure.html" %}
                {% endif %}
                {% if "Thermodynamics" in filterset_mixins %}
                    {% include "core_components/base_filter_types/thermodynamics.html" %}
                {% endif %}
                {% if "Forces" in filterset_mixins %}
                    {% include "core_components/base_filter_types/forces.html" %}
                {% endif %}
                {% if "BandStructure" in filterset_mixins %}
                    {% include "core_components/base_filter_types/band-structure.html" %}
                {% endif %}
                {% if "DensityofStates" in filterset_mixins %}
                    {% include "core_components/base_filter_types/density-of-states.html" %}
                {% endif %}
                <!-- end of mix-ins -->
            {% endif %}
            <!-- end of mix-ins -->
            <!-- Add any extra fields using default crispy formatting -->
            {% if extra_filters %}
                <div class="card mb-0">
                    <div class="card-header" id="headingExtraFilters">
                        <h5 class="m-0">
                            <a class="custom-accordion-title d-block pt-2 pb-2"
                               data-bs-toggle="collapse"
                               href="#collapseExtraFilters"
                               aria-expanded="true"
                               aria-controls="collapseExtraFilters">
                                By Extra Info:
                                <i class="mdi mdi-chevron-down accordion-arrow"></i>
                            </a>
                        </h5>
                    </div>
                    <div id="collapseExtraFilters"
                         class="collapse"
                         aria-labelledby="headingExtraFilters"
                         data-bs-parent="#accordionExample">
                        <div class="card-body">
                            {% for field in form %}
                                {% if field.name in extra_filters %}{{ field | as_crispy_field }}{% endif %}
                            {% endfor %}
                        </div>
                    </div>
                </div>
            {% endif %}
            <!-- end extra fields -->
        </div>
        <button type="submit" class="btn btn-primary mt-3">Search</button>
    </form>
</div>
