{% extends "base.html" %}
{% block title_suffix %} - Module Search{% endblock %}

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

<form hx-get="/search/results" hx-target="#results" hx-trigger="submit" hx-indicator="#search-spinner">
    <div class="grid">
        <label>
            Keyword
            <input type="text" name="q" placeholder="e.g., redis, docker, firewall" autofocus>
        </label>
        <label>
            Namespace (optional)
            <input type="text" name="ns" placeholder="e.g., community.general, ansible.builtin">
        </label>
        <label>
            &nbsp;
            <button type="submit">Search</button>
        </label>
    </div>
</form>

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

<div id="results"></div>
<div id="module-detail"></div>
{% endblock %}