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

{% block main_class %}{% endblock %}

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

            <div class="search-panel">
                <input
                    type="search"
                    id="id_q"
                    name="q"
                    value="{{ query }}"
                    placeholder="Search entities …"
                    aria-label="Search data"
                >
            </div>

            <div class="date-filters">
                <div>
                    <label for="id_date_from">From</label>
                    <input
                        type="date"
                        id="id_date_from"
                        name="date_from"
                        value="{{ date_from }}"
                    >
                </div>

                <div>
                    <label for="id_date_to">To</label>
                    <input
                        type="date"
                        id="id_date_to"
                        name="date_to"
                        value="{{ date_to }}"
                    >
                </div>
            </div>

            {% for kind_group in facets %}
                <fieldset class="facet-kind-group">
                    {% for facet in kind_group.facets %}
                        <details
                            class="facet-group{% if not facet.is_expanded %} facet-group-collapsed{% endif %}"
                            {% if facet.is_expanded or 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>
                    {% endfor %}
                </fieldset>
            {% empty %}
                <p>No filters available.</p>
            {% endfor %}

            <div class="filter-actions">
                <button type="submit">Apply</button>
                <a href="{% url 'explore' %}">Clear all</a>
            </div>
        </aside>

        <main class="results">
            <section class="results-meta">
                {% if page_obj %}
                <p>
                    {{ page_obj.paginator.count }} result{{ page_obj.paginator.count|pluralize }}
                    {% if query %}for “{{ query }}”{% endif %}
                </p>
            {% endif %}
            </section>

            <section class="results-list">
                {% 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 %}
        </main>
    </div>
</form>
{% endblock %}