{% extends "base.html" %}

{% block title %}Search Packages{% endblock %}

{% block content %}
<h1>Search Packages</h1>

<div class="search-input">
    <input type="search"
           name="q"
           placeholder="Search packages..."
           hx-get="/ui/search/results"
           hx-trigger="input changed delay:300ms, search"
           hx-target="#search-results"
           hx-indicator="#search-spinner"
           hx-include="[name='publisher']"
           autofocus>
</div>

{% if !publishers.is_empty() %}
<details>
    <summary>Filter by publisher</summary>
    <select name="publisher">
        <option value="">All publishers</option>
        {% for p in &publishers %}
        <option value="{{ p }}">{{ p }}</option>
        {% endfor %}
    </select>
</details>
{% endif %}

<span id="search-spinner" class="htmx-indicator" aria-busy="true">Searching...</span>

<div id="search-results">
    <p><em>Type to search packages by name, summary, or description.</em></p>
</div>
{% endblock %}