{% extends "base.html" %}

{% block title %}Discover - Makenotwork{% endblock %}
{% block body_attrs %} class="{{ crate::shell::measure(crate::shell::Measure::Wide) }}"{% endblock %}

{% block content %}
    {% include "partials/site_header.html" %}

    <h1 class="page-title">Discover</h1>

    <div class="discover-layout{% if mode == "projects" && sidebar.category_filters.is_empty() %} no-sidebar{% endif %}">
        {% include "partials/discover_sidebar.html" %}

        <button type="button" class="discover-filter-toggle" data-action="toggleDiscoverFilters" aria-expanded="false" aria-controls="discover-sidebar" aria-label="Toggle filters">
            Filters{% if sidebar.active_filter_count > 0 %} <span class="filter-count">{{ sidebar.active_filter_count }}</span>{% endif %}
        </button>

        <main class="discover-main">
            <div class="mode-toggle">
                <button class="toggle-btn{% if mode == "items" %} is-selected{% endif %}"
                        hx-get="/discover"
                        hx-target="body"
                        hx-push-url="true"
                        hx-vals='{"mode": "items"}'>Items</button>
                <button class="toggle-btn{% if mode == "projects" %} is-selected{% endif %}"
                        hx-get="/discover"
                        hx-target="body"
                        hx-push-url="true"
                        hx-vals='{"mode": "projects"}'>Projects</button>
                <div class="view-controls">
                    <button type="button" class="view-btn" data-view="list" title="List view">|||</button>
                    <button type="button" class="view-btn is-selected" data-view="grid" title="Grid view">:::</button>
                </div>
            </div>

            {# `tag-added` is fired by the typeahead once it appends a hidden
               input, so picking a suggestion refreshes results through the same
               path as every other filter control.

               `#q` beside `.discover-filter` in every include on this screen:
               the search box is a described Field now and carries the classes
               its renderer writes, not one this repo chose. Its id is the
               field's own name, which is the handle the description already
               had. Every control that re-reads the results needs the search
               value along, and a class on markup nobody here writes is not
               something to reach for. #}
            <form id="discover-form" action="/discover" method="get"
                  hx-get="/discover/results"
                  hx-target="#results-container" hx-swap="outerHTML"
                  hx-indicator="#search-spinner"
                  hx-include=".discover-filter, #q"
                  hx-trigger="tag-added">
                <input type="hidden" id="mode-input" name="mode" value="{{ mode }}" class="discover-filter">
                <div class="table-controls">
                    {# Described (N8): the box, the list it owns, the route it
                       asks for candidates, the two waits, the floor, the
                       filters that ride with the results question and the page
                       picking a row goes to all come out of crate::quasi. What
                       stood here was a bare input and an empty list pointed at
                       each other by id, with the rest in page-discover.js.

                       The wrapper stays: it is the positioning context the
                       list is drawn against, and the flex child the toolbar
                       row sizes. #}
                    <div class="search-wrapper">
                    {{ crate::quasi::discover_search::search_box(mode, search_query)|safe }}
                    </div>
                    <span id="search-spinner" class="htmx-indicator" aria-live="polite">Searching...</span>
                    <span class="table-meta" id="total-count">{{ count_label }}</span>
                    <label for="sort-select" class="sr-only">Sort by</label>
                    <select class="sort-select discover-filter"
                            id="sort-select"
                            name="sort"
                            aria-label="Sort results by"
                            hx-get="/discover/results"
                            hx-trigger="change"
                            hx-target="#results-container" hx-swap="outerHTML"
                            hx-indicator="#search-spinner"
                            hx-include=".discover-filter, #q">
                        {% if mode == "projects" %}
                        <option value="newest"{% if sort_by == "newest" || sort_by == "" %} selected{% endif %}>Newest</option>
                        <option value="most_sold"{% if sort_by == "most_sold" %} selected{% endif %}>Most items</option>
                        {% else %}
                        <option value="most_sold"{% if sort_by == "most_sold" %} selected{% endif %}>Most sold</option>
                        <option value="newest"{% if sort_by == "newest" || sort_by == "" %} selected{% endif %}>Newest</option>
                        <option value="price_asc"{% if sort_by == "price_asc" %} selected{% endif %}>Price asc</option>
                        <option value="price_desc"{% if sort_by == "price_desc" %} selected{% endif %}>Price desc</option>
                        {% endif %}
                    </select>
                </div>
            </form>

            {% if mode == "projects" %}
            <div class="table-header projects-header">
                <span>Name</span>
                <span>Category</span>
                <span class="col-right">Items</span>
                <span class="col-right">Added</span>
            </div>
            {% else %}
            <div class="table-header">
                <span>Type</span>
                <span>Name</span>
                <span>Tag</span>
                <span class="col-right">Price</span>
                <span class="col-right">Added</span>
            </div>
            {% endif %}

            {# The region is the partial's own root now, not a wrapper here:
               every control that re-reads it swaps the element whole
               (hx-swap="outerHTML"), which is what a described control emits and
               what stops the region losing its id on the first pick. #}
            {% include "partials/discover_results.html" %}
        </main>
    </div>
{% endblock %}

{% block scripts %}
<script src="/static/collections.js?v=0514"></script>
<script src="/static/page-discover.js?v=0624" defer></script>
{% endblock %}