{% extends "base_template.html" %}
{% block content %}
<h1>Search the library</h1>

<section id="library-stats" hx-get="{{ url_for('search_stats_fragment') }}" hx-trigger="load" hx-swap="innerHTML">
    <p>Loading library stats…</p>
</section>

<form hx-get="{{ url_for('search_results_fragment') }}" hx-target="#search-results" hx-swap="innerHTML">
    <label for="query">Query</label>
    <input type="search" id="query" name="query" size="48"
           placeholder="beets query, e.g. artist:Beatles year:1960..1969 (empty = everything)">
    <label for="filepath">Path</label>
    <input type="text" id="filepath" name="filepath" size="30"
           placeholder="Optional path within the library, e.g. /music/Beatles">
    <label><input type="checkbox" name="albums" value="true"> albums</label>
    <label for="sort_by">Sort</label>
    <input type="text" id="sort_by" name="sort_by" size="10" placeholder="e.g. year+">
    <!-- Same inputs, two modes: "List" submits to the list (results) endpoint; "Stats" sends the same
         form inputs to the stats endpoint instead. -->
    <button type="submit">List</button>
    <button type="button" hx-get="{{ url_for('search_stats_fragment') }}" hx-include="closest form"
            hx-target="#search-results" hx-swap="innerHTML">Stats</button>
</form>

<div id="search-results">
    <p>Enter a query above, then choose <strong>List</strong> (matching tracks/albums) or
       <strong>Stats</strong> (a summary of the matches).</p>
</div>

<details>
    <summary>Available query fields</summary>
    <div hx-get="{{ url_for('search_fields_fragment') }}" hx-trigger="load" hx-swap="innerHTML">
        <p>Loading fields…</p>
    </div>
</details>
{% endblock %}