{# Discover sidebar. Rendered by the full page and, for the out-of-band
   swap, by partials/discover_results.html. Both templates expose the same
   `sidebar` field so this include works unchanged in either context. #}
<aside class="discover-sidebar" id="discover-sidebar" aria-label="Filters">
            {# State carriers live INSIDE the sidebar so the out-of-band swap keeps
               them in step with the controls. They used to sit in the page form,
               which the swap never replaces: a tag selected from one drill rung was
               silently dropped as soon as the drill navigated away from its
               checkbox, because nothing carried it any more.

               Only selections with no visible control are listed; anything with a
               checked checkbox on screen is absent, or it would submit twice. #}
            {% for value in sidebar.hidden_types %}
            <input type="hidden" name="item_type" value="{{ value }}" class="discover-filter" data-facet="item_type">
            {% endfor %}
            {% for value in sidebar.hidden_tags %}
            <input type="hidden" name="tag" value="{{ value }}" class="discover-filter" data-facet="tag">
            {% endfor %}
            {# The drill cursor. Without this every filter interaction rebuilt the
               request from .discover-filter alone, which carries no cursor, so the
               sidebar snapped back to the tag roots on every click. #}
            <input type="hidden" name="browse" value="{{ sidebar.browse_cursor }}" class="discover-filter">

            {% if mode == "projects" %}
            <div class="filter-section">
                <fieldset class="filter-fieldset">
                    {# Radios, not buttons: `category` is single-valued server-side
                       (DiscoverQuery.category is an Option), and a native control is
                       keyboard-operable without mirroring its value into a hidden
                       input from JS. The "All" entry carries the empty value, which
                       parses back to no filter. #}
                    <legend class="filter-title">Category</legend>
                    <ul class="filter-list">
                        {% for cf in sidebar.category_filters %}
                        <li class="filter-item{% if cf.active %} is-selected{% endif %}">
                            <label class="filter-check">
                                <input type="radio" name="category" value="{{ cf.value }}"
                                       id="catsel-{% if cf.value.is_empty() %}all{% else %}{{ cf.value }}{% endif %}"
                                       class="discover-filter"
                                       {% if cf.active %}checked{% endif %}
                                       hx-get="/discover/results"
                                       hx-target="#results-container"
                                       hx-indicator="#search-spinner"
                                       hx-include=".discover-filter"
                                       hx-trigger="change">
                                <span>{{ cf.name }}</span>
                                <span class="count" aria-label="{{ cf.count }} projects">{{ cf.count }}</span>
                            </label>
                        </li>
                        {% endfor %}
                    </ul>
                </fieldset>
            </div>
            <div class="filter-section">
                <label class="filter-checkbox discover-filter-checkbox">
                    <input type="checkbox" id="has-source-input" name="has_source"
                           class="discover-filter"
                           value="1"
                           {% if sidebar.has_source %}checked{% endif %}
                           hx-get="/discover/results"
                           hx-trigger="change"
                           hx-target="#results-container"
                           hx-indicator="#search-spinner"
                           hx-include=".discover-filter">
                    Has source code
                </label>
            </div>
            {% endif %}
            {% if mode == "items" %}
            {# ---- Tag spine -------------------------------------------------
               Tags are the structure of this sidebar, not one facet among
               several: a typeahead to reach any tag at any depth, chips for
               what is selected, and a drill-down to browse by hand.
               Everything below the spine refines it. ---- #}
            <div class="filter-section tag-spine">
                <div class="filter-title" id="tag-label">Tags</div>

                {# Selected tags. Also the active-filter summary and clear-all.
                   Each dismiss is a plain link carrying the remaining selection,
                   so removal works with JS off. #}
                {% if !sidebar.tag_chips.is_empty() %}
                <ul class="tag-chips" aria-label="Selected tags">
                    {% for chip in sidebar.tag_chips %}
                    <li class="tag-chip">
                        <span class="tag-chip-label" {% if !chip.context.is_empty() %}title="{{ chip.context }}"{% endif %}>{{ chip.label }}</span>
                        <a class="tag-chip-remove"
                           href="/discover?mode=items{% if !chip.remove_query.is_empty() %}&{{ chip.remove_query|safe }}{% endif %}"
                           aria-label="Remove tag {{ chip.label }}">&times;</a>
                    </li>
                    {% endfor %}
                    <li class="tag-chip tag-chip-clear">
                        <a href="/discover?mode=items">Clear all</a>
                    </li>
                </ul>
                {% endif %}

                {# Typeahead. Reaches a tag at any depth by name, which is what
                   makes a taxonomy of arbitrary size navigable and what the old
                   capped ten-tag list plus "Browse all" could not do. #}
                <div class="tag-combobox">
                    <label class="sr-only" for="tag-search">Find a tag</label>
                    <input type="search" id="tag-search" class="tag-combobox-input" hx-preserve="true"
                           placeholder="Find a tag" autocomplete="off"
                           role="combobox" aria-expanded="false"
                           aria-controls="tag-suggest-list" aria-autocomplete="list">
                    <ul id="tag-suggest-list" class="search-suggestions tag-suggest-list" role="listbox" hidden></ul>
                </div>

                {# Drill-down. `browse` moves the cursor, `tag` selects; a
                   category navigates, a depth-3+ leaf filters. #}
                <nav class="tag-drill" aria-labelledby="tag-label">
                    {% if !sidebar.tag_crumbs.is_empty() %}
                    <ol class="tag-crumbs">
                        <li><a href="{{ sidebar.browse_url_root }}">All</a></li>
                        {% for crumb in sidebar.tag_crumbs %}
                        <li><a href="{{ sidebar.browse_url_prefix }}{{ crumb.slug }}">{{ crumb.label }}</a></li>
                        {% endfor %}
                    </ol>
                    {% endif %}
                    <ul class="filter-list">
                        {% for row in sidebar.tag_drill %}
                        <li class="filter-item{% if row.selected %} is-selected{% endif %}{% if row.count == 0 %} is-empty{% endif %}">
                            {% if row.assignable %}
                            {# A real checkbox: multi-select is the point, and it
                               is keyboard-operable without any hx-trigger work. #}
                            <label class="tag-drill-select">
                                <input type="checkbox" name="tag" value="{{ row.slug }}"
                                       id="tagsel-{{ row.slug }}"
                                       class="discover-filter" data-facet="tag"
                                       {% if row.selected %}checked{% endif %}
                                       hx-get="/discover/results"
                                       hx-target="#results-container"
                                       hx-indicator="#search-spinner"
                                       hx-include=".discover-filter"
                                       hx-trigger="change">
                                <span>{{ row.label }}</span>
                                <span class="count" aria-label="{{ row.count }} items">{{ row.count }}</span>
                            </label>
                            {% endif %}
                            {% if row.has_children %}
                            <a class="tag-drill-into" href="{{ sidebar.browse_url_prefix }}{{ row.slug }}"
                               aria-label="Browse inside {{ row.label }}">
                                {% if !row.assignable %}<span>{{ row.label }}</span>
                                <span class="count" aria-label="{{ row.count }} items">{{ row.count }}</span>{% endif %}
                                <span class="tag-drill-chevron" aria-hidden="true">&rsaquo;</span>
                            </a>
                            {% endif %}
                            {# Follow is a SIBLING of the label, never inside it:
                               a control nested in a label would toggle the
                               checkbox when clicked. Offered on EVERY rung, not
                               just assignable leaves: following is hierarchical,
                               so a follow on a branch matches its whole subtree
                               (see db::follows::FOLLOWED_ITEM_IDS_CTE). It is the
                               last child so it right-aligns identically whether
                               the row leads with a checkbox label or a drill-in
                               link, both of which take flex: 1. #}
                            {% if sidebar.viewer_authenticated %}
                            {% if row.following %}
                            <button class="tag-follow-btn is-selected"
                                    hx-delete="/api/follow/tag/{{ row.tag_id }}"
                                    hx-swap="outerHTML"
                                    aria-label="Unfollow {{ row.label }}"
                                    data-action="noop" data-stop>Following</button>
                            {% else %}
                            <button class="tag-follow-btn"
                                    hx-post="/api/follow/tag/{{ row.tag_id }}"
                                    hx-swap="outerHTML"
                                    aria-label="Follow {{ row.label }}"
                                    data-action="noop" data-stop>Follow</button>
                            {% endif %}
                            {% endif %}
                        </li>
                        {% endfor %}
                    </ul>
                </nav>
            </div>

            {# ---- Refine ----------------------------------------------------
               Everything below the spine narrows what the tags selected. Same
               multi-select treatment, deliberately subordinate. Every control
               here is a real form input: multi-select needs one, and it makes
               the whole sidebar keyboard-operable without any hx-trigger work
               (the .filter-btn elements these replace were not). ---- #}
            <div class="filter-refine">
                <div class="filter-section">
                    <fieldset class="filter-fieldset">
                        <legend class="filter-title">Type</legend>
                        <ul class="filter-list">
                            {% for tf in sidebar.type_filters %}
                            {% if !tf.value.is_empty() %}
                            <li class="filter-item{% if tf.active %} is-selected{% endif %}">
                                <label class="filter-check">
                                    <input type="checkbox" name="item_type" value="{{ tf.value }}"
                                           id="typesel-{{ tf.value }}"
                                           class="discover-filter" data-facet="item_type"
                                           {% if tf.active %}checked{% endif %}
                                           {% if tf.count == 0 && !tf.active %}disabled{% endif %}
                                           hx-get="/discover/results"
                                           hx-target="#results-container"
                                           hx-indicator="#search-spinner"
                                           hx-include=".discover-filter"
                                           hx-trigger="change">
                                    <span>{{ tf.name }}</span>
                                    <span class="count" aria-label="{{ tf.count }} items">{{ tf.count }}</span>
                                </label>
                            </li>
                            {% endif %}
                            {% endfor %}
                        </ul>
                    </fieldset>
                </div>

                <div class="filter-section">
                    <div class="filter-title" id="price-label">Price</div>
                    <div class="price-inputs" role="group" aria-labelledby="price-label">
                        <label for="min-price" class="sr-only">Minimum price</label>
                        {# The applied bound is rendered back in: hx-include resends
                           these on every request, so a blank input would silently
                           clear the filter on the next interaction. #}
                        <input type="number" id="min-price" name="min_price" placeholder="0" min="0"
                               value="{{ sidebar.current_min_price }}"
                               class="discover-filter"
                               aria-label="Minimum price"
                               hx-get="/discover/results"
                               hx-trigger="change delay:500ms"
                               hx-target="#results-container"
                               hx-indicator="#search-spinner"
                               hx-include=".discover-filter">
                        <span aria-hidden="true">to</span>
                        <label for="max-price" class="sr-only">Maximum price</label>
                        <input type="number" id="max-price" name="max_price" placeholder="Any"
                               value="{{ sidebar.current_max_price }}"
                               class="discover-filter"
                               aria-label="Maximum price"
                               hx-get="/discover/results"
                               hx-trigger="change delay:500ms"
                               hx-target="#results-container"
                               hx-indicator="#search-spinner"
                               hx-include=".discover-filter">
                    </div>
                    {# Buckets are links, not form state, so they cannot disagree
                       with the number inputs above and they work without JS. #}
                    <ul class="filter-list price-buckets" aria-label="Price ranges">
                        {% for pb in sidebar.price_buckets %}
                        <li class="filter-item{% if pb.active %} is-selected{% endif %}">
                            <a class="price-bucket" href="{{ pb.url }}"
                               {% if pb.active %}aria-current="true"{% endif %}>
                                <span>{{ pb.label }}</span>
                                <span class="count" aria-label="{{ pb.count }} items">{{ pb.count }}</span>
                            </a>
                        </li>
                        {% endfor %}
                    </ul>
                </div>

                {% if !sidebar.ai_tier_filters.is_empty() %}
                <div class="filter-section">
                    <fieldset class="filter-fieldset">
                        {# Radios, not checkboxes: the three tiers are nested
                           ranges, so OR-ing any two only widens to the looser. #}
                        <legend class="filter-title">AI Disclosure</legend>
                        <ul class="filter-list">
                            {% for af in sidebar.ai_tier_filters %}
                            <li class="filter-item{% if af.active %} is-selected{% endif %}">
                                <label class="filter-check">
                                    <input type="radio" name="ai_tier" value="{{ af.value }}"
                                           id="aitier-{{ af.value }}"
                                           class="discover-filter"
                                           {% if af.active %}checked{% endif %}
                                           hx-get="/discover/results"
                                           hx-target="#results-container"
                                           hx-indicator="#search-spinner"
                                           hx-include=".discover-filter"
                                           hx-trigger="change">
                                    <span>{{ af.name }}</span>
                                    <span class="count" aria-label="{{ af.count }} items">{{ af.count }}</span>
                                </label>
                            </li>
                            {% endfor %}
                        </ul>
                    </fieldset>
                </div>
                {% endif %}
            </div>
            {% endif %}
        </aside>