{% extends "base.html" %}

{% block title %}Discover - Makenotwork{% endblock %}
{% block body_attrs %} class="padded-page"{% 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. #}
            <form id="discover-form" action="/discover" method="get"
                  hx-get="/discover/results"
                  hx-target="#results-container"
                  hx-indicator="#search-spinner"
                  hx-include=".discover-filter"
                  hx-trigger="tag-added">
                <input type="hidden" id="mode-input" name="mode" value="{{ mode }}" class="discover-filter">
                <div class="table-controls">
                    <label for="search-input" class="sr-only">Search {% if mode == "projects" %}projects{% else %}items{% endif %}</label>
                    <div class="search-wrapper">
                    <input type="text"
                           id="search-input"
                           class="search-field discover-filter"
                           placeholder="Search {% if mode == "projects" %}projects{% else %}items{% endif %}..."
                           name="q"
                           value="{{ search_query }}"
                           autocomplete="off"
                           aria-label="Search {% if mode == "projects" %}projects{% else %}items{% endif %}"
                           hx-get="/discover/results"
                           hx-trigger="input changed delay:150ms, search"
                           hx-target="#results-container"
                           hx-indicator="#search-spinner"
                           hx-include=".discover-filter">
                    <div id="search-suggestions" class="search-suggestions"></div>
                    </div>
                    <span id="search-spinner" class="htmx-indicator" aria-live="polite">Searching...</span>
                    <span class="table-meta" id="total-count">{{ total_items }} {% if mode == "projects" %}projects{% else %}items{% endif %}</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-indicator="#search-spinner"
                            hx-include=".discover-filter">
                        {% 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 %}

            <div id="results-container">
                {% include "partials/discover_results.html" %}
            </div>
        </main>
    </div>
{% endblock %}

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