{# The sidebar rides along on every results swap, out-of-band, so its counts
   and drill-down always describe the results below. Without this the sidebar
   is stale from the first filter click until a full page load, which is fatal
   for faceted browsing: the numbers are what the user steers by.

   htmx restores focus after a swap to an element with the same id, so every
   control in the sidebar carries a stable one and keyboard position survives.
   The typeahead input additionally uses hx-preserve, since its value is user
   state the server does not render.

   Guarded on `oob_sidebar`: the full page includes this same partial inside
   #results-container, and rendering the sidebar there too would emit it twice
   with duplicate ids. Only the standalone /discover/results response sets it. #}
{# #total-count sits in the page form, outside #results-container, so a plain
   swap leaves it reading the previous filter's total. It said "13 items" beside
   a list showing 3. #}
{# Search results say how well they matched, in two places.

   .results-tier-break is the one heading, and it sits exactly where the claim
   it makes becomes true: above it, every row holds at least one word that was
   typed; below it, every row holds none and is here on character overlap alone.
   The query orders the tiers and flags the first row of the lower one. A page
   made entirely of near matches carries the heading at the top, which is the
   honest rendering under pagination. No heading when not searching, and none
   for 1-2 character searches, which are substring-only and have no boundary.

   .row-match-note is the per-row half: "Matched 3 of 5 words" on a row holding
   some but not all of them. It cannot be a heading, because coverage varies row
   to row and one page can hold a 4-of-5 beside a 1-of-5. Rows with every word
   say nothing, since that is the unremarkable case; rows with none say nothing
   either, because the heading above them already did.

   Grid view needs `grid-column: 1 / -1` on .results-tier-break to span the row.
   Discover has no CSS yet, so these are class hooks like the rest of the sidebar. #}
{% if oob_sidebar %}
<span class="table-meta" id="total-count" hx-swap-oob="true">{{ count_label }}</span>
{% endif %}
{% if oob_sidebar && mode == "items" %}
<div hx-swap-oob="outerHTML:#discover-sidebar">
{% include "partials/discover_sidebar.html" %}
</div>
{% endif %}

{# The region a filter change replaces, whole. Its id is here rather than on a
   wrapper in the page, so the answer to /discover/results IS the region and an
   outer swap keeps the element every control targets. The out-of-band elements
   above stay outside it: htmx only honours hx-swap-oob at the top level of a
   response. #}
<div id="results-container">
<div class="results-container results-list" id="results-container-inner">
    <!-- List View -->
    <div class="results-table well" id="results-table">
        {% if mode == "projects" %}
        {% for project in projects %}
        {% if project.starts_fuzzy_block %}
        <div class="results-tier-break">
            <span class="results-tier-label">Near matches</span>
            <span class="results-tier-hint">None of your words are in these. The spelling is close.</span>
        </div>
        {% endif %}
        <a href="/p/{{ project.slug }}" class="table-row project-row">
            <span class="row-info"><span class="row-name">{{ project.title }}</span><span class="row-creator">{{ project.creator }}</span>{% if project.match_label.is_some() %}<span class="row-match-note">{{ project.match_label.as_deref().unwrap_or("") }}</span>{% endif %}</span>
            <span class="row-category">{{ project.category_name.as_deref().unwrap_or(&project.project_type) }}</span>
            <span class="row-items">{{ project.item_count }}</span>
            <span class="row-date">{{ project.date }}</span>
        </a>
        {% endfor %}
        {% if projects.is_empty() %}
        <div class="empty-state">
            {% if is_search %}
            <p>Nothing matched your search.</p>
            <p class="empty-state-hint">Try fewer words, or check the spelling. You can also <a href="/discover">clear all filters</a>.</p>
            {% else %}
            <p>No projects found matching your filters.</p>
            <p class="empty-state-hint">Try <a href="/discover">clearing all filters</a>.</p>
            {% endif %}
        </div>
        {% endif %}
        {% else %}
        {% for item in items %}
        {% if item.starts_fuzzy_block %}
        <div class="results-tier-break">
            <span class="results-tier-label">Near matches</span>
            <span class="results-tier-hint">None of your words are in these. The spelling is close.</span>
        </div>
        {% endif %}
        <div class="table-row table-row-item">
            <a href="{% if item.is_free %}/i/{{ item.id }}{% else %}/purchase/{{ item.id }}{% endif %}" class="table-row-link">
                <span class="row-type">{{ item.item_type }}</span>
                <span class="row-info"><span class="row-name">{{ item.name }}</span><span class="row-creator">{{ item.project }} &middot; {{ item.creator }}</span>{% if item.match_label.is_some() %}<span class="row-match-note">{{ item.match_label.as_deref().unwrap_or("") }}</span>{% endif %}</span>
                <span class="row-category">{{ item.primary_tag }}</span>
                <span class="row-price">{{ item.price }}</span>
                <span class="row-date">{{ item.date }}</span>
                <span class="discover-row-ai-tier">{{ item.ai_tier }}</span>
            </a>
            {% if is_authenticated %}
            <button class="row-save collection-picker-anchor" data-collection-trigger data-item-id="{{ item.id }}"
                    data-action="onOpenCollectionPicker" data-stop title="Save to collection" aria-label="Save to collection">+</button>
            {% endif %}
        </div>
        {% endfor %}
        {% if items.is_empty() %}
        <div class="empty-state">
            {% if is_search %}
            <p>Nothing matched your search.</p>
            <p class="empty-state-hint">Try fewer words, or check the spelling. You can also <a href="/discover">clear all filters</a>.</p>
            {% else %}
            <p>No items found matching your filters.</p>
            <p class="empty-state-hint">Try <a href="/discover">clearing all filters</a>.</p>
            {% endif %}
        </div>
        {% endif %}
        {% endif %}
    </div>

    <!-- Grid View -->
    <div class="results-grid" id="results-grid">
        {% if mode == "projects" %}
        {% for project in projects %}
        {% if project.starts_fuzzy_block %}
        <div class="results-tier-break">
            <span class="results-tier-label">Near matches</span>
            <span class="results-tier-hint">None of your words are in these. The spelling is close.</span>
        </div>
        {% endif %}
        <a href="/p/{{ project.slug }}" class="grid-card">
            <div class="grid-card-content">
                <div class="grid-card-title">{{ project.title }}</div>
                <div class="grid-card-meta">{{ project.creator }}</div>
                {% if project.match_label.is_some() %}<span class="row-match-note">{{ project.match_label.as_deref().unwrap_or("") }}</span>{% endif %}
                <div class="grid-card-footer">
                    <span class="grid-card-category">{{ project.category_name.as_deref().unwrap_or(&project.project_type) }}</span>
                    <span class="grid-card-stat">{{ project.item_count }} items</span>
                </div>
            </div>
        </a>
        {% endfor %}
        {% if projects.is_empty() %}
        <div class="empty-state">
            {% if is_search %}
            <p>Nothing matched your search.</p>
            <p class="empty-state-hint">Try fewer words, or check the spelling. You can also <a href="/discover">clear all filters</a>.</p>
            {% else %}
            <p>No projects found matching your filters.</p>
            <p class="empty-state-hint">Try <a href="/discover">clearing all filters</a>.</p>
            {% endif %}
        </div>
        {% endif %}
        {% else %}
        {% for item in items %}
        {% if item.starts_fuzzy_block %}
        <div class="results-tier-break">
            <span class="results-tier-label">Near matches</span>
            <span class="results-tier-hint">None of your words are in these. The spelling is close.</span>
        </div>
        {% endif %}
        <div class="grid-card discover-grid-card">
            {% if is_authenticated %}
            <button class="grid-card-save collection-picker-anchor" data-collection-trigger data-item-id="{{ item.id }}"
                    data-action="onOpenCollectionPicker" data-stop title="Save to collection" aria-label="Save to collection">+</button>
            {% endif %}
            <a href="{% if item.is_free %}/i/{{ item.id }}{% else %}/purchase/{{ item.id }}{% endif %}" class="discover-card-link">
                <div class="grid-card-thumbnail">{{ item.item_type }}</div>
                <div class="grid-card-content">
                    <div class="grid-card-title">{{ item.name }}</div>
                    <div class="grid-card-meta">{{ item.project }} &middot; {{ item.creator }}</div>
                    {% if item.match_label.is_some() %}<span class="row-match-note">{{ item.match_label.as_deref().unwrap_or("") }}</span>{% endif %}
                    <div class="grid-card-footer">
                        <span class="grid-card-category">{{ item.primary_tag }}</span>
                        <span class="grid-card-price">{{ item.price }}</span>
                        <span class="discover-row-ai-tier">{{ item.ai_tier }}</span>
                    </div>
                </div>
            </a>
        </div>
        {% endfor %}
        {% if items.is_empty() %}
        <div class="empty-state">
            {% if is_search %}
            <p>Nothing matched your search.</p>
            <p class="empty-state-hint">Try fewer words, or check the spelling. You can also <a href="/discover">clear all filters</a>.</p>
            {% else %}
            <p>No items found matching your filters.</p>
            <p class="empty-state-hint">Try <a href="/discover">clearing all filters</a>.</p>
            {% endif %}
        </div>
        {% endif %}
        {% endif %}
    </div>
</div>

<div class="table-footer">
    <span class="page-info">Showing {{ showing_start }}-{{ showing_end }} of {{ total_items }}</span>
    <div class="pagination">
        {% if total_pages > 0 %}
        <button {% if current_page <= 1 %}disabled{% endif %}
                hx-get="/discover/results"
                hx-target="#results-container" hx-swap="outerHTML"
                hx-include=".discover-filter, #q"
                hx-vals='{"page": {{ current_page - 1 }}}'
                {% if current_page <= 1 %}hx-disable="this"{% endif %}>Prev</button>
        {% for p in pagination_range %}
        <button {% if *p == current_page %}class="is-selected"{% endif %}
                hx-get="/discover/results"
                hx-target="#results-container" hx-swap="outerHTML"
                hx-include=".discover-filter, #q"
                hx-vals='{"page": {{ p }}}'>{{ p }}</button>
        {% endfor %}
        {% if total_pages > 5 %}
        <button disabled>...</button>
        <button hx-get="/discover/results"
                hx-target="#results-container" hx-swap="outerHTML"
                hx-include=".discover-filter, #q"
                hx-vals='{"page": {{ total_pages }}}'>{{ total_pages }}</button>
        {% endif %}
        <button {% if current_page >= total_pages || total_pages == 0 %}disabled{% endif %}
                hx-get="/discover/results"
                hx-target="#results-container" hx-swap="outerHTML"
                hx-include=".discover-filter, #q"
                hx-vals='{"page": {{ current_page + 1 }}}'
                {% if current_page >= total_pages || total_pages == 0 %}hx-disable="this"{% endif %}>Next</button>
        {% endif %}
    </div>
</div>
</div>