{% extends "apis_data_explorer/base.html" %}
{% load search_tags %}

{% block main_class %}{% endblock %}

{% block content %}
<div class="explorer-layout">
    <aside class="facets">
        <form method="get" action="{% url 'search' %}">
            <h4>Filters</h4>

            {% if query %}
                {% for kind_group in facets %}
                    <fieldset class="facet-kind-group">
                        {% for facet in kind_group.facets %}
                            {% if facet.is_expanded %}
                                <div class="facet-group">
                                    <div class="facet-title">{{ facet.label }}</div>

                                    <div class="facet-options">
                                        {% for option in facet.visible_options %}
                                            <label class="facet-option">
                                                <input
                                                    type="checkbox"
                                                    name="{{ facet.param }}"
                                                    value="{{ option.value }}"
                                                    {% if option.selected %}checked{% endif %}
                                                >
                                                <span>{{ option.value }} ({{ option.count }})</span>
                                            </label>
                                        {% endfor %}
                                    </div>

                                    {% if facet.has_more %}
                                        <details class="facet-more" {% if facet.is_selected %}open{% endif %}>
                                            <summary>Show {{ facet.hidden_options|length }} more</summary>

                                            <div class="facet-options">
                                                {% for option in facet.hidden_options %}
                                                    <label class="facet-option">
                                                        <input
                                                            type="checkbox"
                                                            name="{{ facet.param }}"
                                                            value="{{ option.value }}"
                                                            {% if option.selected %}checked{% endif %}
                                                        >
                                                        <span>{{ option.value }} ({{ option.count }})</span>
                                                    </label>
                                                {% endfor %}
                                            </div>
                                        </details>
                                    {% endif %}
                                </div>
                            {% else %}
                                <details class="facet-group facet-group-collapsed" {% if facet.is_selected %}open{% endif %}>
                                    <summary class="facet-title">{{ facet.label }}</summary>

                                    <div class="facet-options">
                                        {% for option in facet.visible_options %}
                                            <label class="facet-option">
                                                <input
                                                    type="checkbox"
                                                    name="{{ facet.param }}"
                                                    value="{{ option.value }}"
                                                    {% if option.selected %}checked{% endif %}
                                                >
                                                <span>{{ option.value }} ({{ option.count }})</span>
                                            </label>
                                        {% endfor %}
                                    </div>

                                    {% if facet.has_more %}
                                        <details class="facet-more" {% if facet.is_selected %}open{% endif %}>
                                            <summary>Show {{ facet.hidden_options|length }} more</summary>

                                            <div class="facet-options">
                                                {% for option in facet.hidden_options %}
                                                    <label class="facet-option">
                                                        <input
                                                            type="checkbox"
                                                            name="{{ facet.param }}"
                                                            value="{{ option.value }}"
                                                            {% if option.selected %}checked{% endif %}
                                                        >
                                                        <span>{{ option.value }} ({{ option.count }})</span>
                                                    </label>
                                                {% endfor %}
                                            </div>
                                        </details>
                                    {% endif %}
                                </details>
                            {% endif %}
                        {% endfor %}
                    </fieldset>
                {% empty %}
                    <p>No filters available for this query.</p>
                {% endfor %}
            {% else %}
                <p>Enter a search term to see filters.</p>
            {% endif %}

            <input type="hidden" name="q" value="{{ query }}">
            <button type="submit">Apply</button>
        </form>
    </aside>

    <main class="results">
        <section class="search-panel">
            <article>
                <form method="get" action="{% url 'search' %}" role="search">
                    <input
                        type="search"
                        name="q"
                        value="{{ query }}"
                        placeholder="Search entities …"
                        aria-label="Search data"
                    >
                    <button type="submit">Search</button>
                </form>
            </article>
        </section>

        {% if query %}
            <section>
                <p>
                    {{ page_obj.paginator.count }} result{{ page_obj.paginator.count|pluralize }}
                    for “{{ query }}”
                </p>

                {% for result in results %}
                    {% include "partials/search_result_card.html" with result=result only %}
                {% empty %}
                    <p>No results found.</p>
                {% endfor %}
            </section>

            {% if page_obj.paginator.num_pages > 1 %}
                <nav aria-label="Pagination">
                    {% if page_obj.has_previous %}
                        <a href="{% querystring page=page_obj.previous_page_number %}">
                            Previous
                        </a>
                    {% endif %}

                    <span>Page {{ page_obj.number }} of {{ page_obj.paginator.num_pages }}</span>

                    {% if page_obj.has_next %}
                        <a href="{% querystring page=page_obj.next_page_number %}">
                            Next
                        </a>
                    {% endif %}
                </nav>
            {% endif %}
        {% else %}
            <section>
                <p>Enter a term to search labels and indexed text.</p>
            </section>
        {% endif %}
    </main>
</div>
{% endblock %}