{# ABOUTME: Collection create/edit form partial — name, description, raw rule query. #}
{# ABOUTME: The raw query textarea is the single source of truth; errors render inline at HTTP 200. #}
<form class="collection-form"
      hx-post="{{ action_url }}"
      hx-target="{{ target }}"
      hx-swap="innerHTML">
    {% if convert_warning %}
    {# Destructive static<->rule conversion: warn before the irreversible write. #}
    {# The hidden confirm field makes the next submit execute the conversion. #}
    <p class="convert-warning" role="status">
        &#9888; {{ convert_warning }}
    </p>
    <input type="hidden" name="confirm" value="1">
    {% endif %}
    <div class="form-field">
        <label for="collection-name">Name</label>
        <input type="text" id="collection-name" name="name"
               value="{{ form.name or '' }}"
               required
               aria-required="true"
               {% if errors.name %}aria-invalid="true" aria-describedby="name-error"{% endif %}>
        {% if errors.name %}
        <p class="field-error" id="name-error" role="alert">{{ errors.name }}</p>
        {% endif %}
    </div>

    <div class="form-field">
        <label for="collection-description">Description <span class="optional">(optional)</span></label>
        <textarea id="collection-description" name="description" rows="2">{{ form.description or '' }}</textarea>
    </div>

    <div class="form-field">
        <label for="collection-query">Rule query <span class="optional">(optional — leave blank for a hand-picked collection)</span></label>
        {# Raw textarea is the single source of truth; the builder below only appends to it. #}
        {% include "_collection_query_field.html" %}
        {% if errors.query %}
        <span id="query-error">{% include "_collection_query_error.html" %}</span>
        {% endif %}

        {# Append-only query builder: a beginner on-ramp that composes one valid clause #}
        {# at a time into the textarea. Collapsed by default; advanced users hand-edit raw. #}
        <details class="query-builder">
            <summary>Query builder — add a condition</summary>
            <div class="query-builder-body">
                <label>Field
                    {# id omitted on purpose: the partial textarea swap must not collide with ids. #}
                    <select name="field" aria-describedby="builder-hint">
                        {% for f in query_fields %}
                        <option value="{{ f.name }}" data-hint="{{ f.hint }}">{{ f.name }}</option>
                        {% endfor %}
                    </select>
                </label>
                <label for="builder-value">Value
                    <input type="text" id="builder-value" name="value" aria-describedby="builder-hint">
                </label>
                <span id="builder-hint" class="field-hint">{{ query_fields[0].hint }}</span>
                {# formaction degrades gracefully without JS by posting to the append route. #}
                <button type="submit" class="btn-secondary"
                        formaction="{{ url_for('web.collection_query_append') }}" formmethod="post"
                        hx-post="{{ url_for('web.collection_query_append') }}"
                        hx-include="[name='field'],[name='value'],#collection-query"
                        hx-target="#collection-query"
                        hx-swap="outerHTML">
                    Add condition (AND)
                </button>
            </div>
        </details>
        <script>
            // Show the hint for the selected field. Progressive enhancement only —
            // the append itself is server-rendered and works without this. Uses
            // document-level lookups (not currentScript) so it also runs when htmx
            // swaps this form in, where currentScript would be null.
            (function () {
                var sel = document.querySelector('.query-builder select[name="field"]');
                var hint = document.getElementById("builder-hint");
                if (!sel || !hint) { return; }
                function sync() {
                    var opt = sel.options[sel.selectedIndex];
                    if (opt) { hint.textContent = opt.getAttribute("data-hint") || ""; }
                }
                sel.addEventListener("change", sync);
                sync();
            })();
        </script>

        {# Explicit (non-debounced) preview: mid-typing Lucene is constantly invalid. #}
        {# formaction degrades gracefully without JS by posting to the same route. #}
        <button type="submit" class="btn-secondary preview-btn"
                formaction="{{ url_for('web.collection_preview') }}" formmethod="post"
                hx-post="{{ url_for('web.collection_preview') }}"
                hx-include="#collection-query"
                hx-target="#collection-preview"
                hx-swap="innerHTML">
            Preview matches
        </button>
        <div id="collection-preview" class="collection-preview" aria-live="polite"></div>
    </div>

    <div class="form-actions">
        <button type="submit" class="btn-primary">
            {% if mode == "edit" %}Save changes{% else %}Create collection{% endif %}
        </button>
        <a href="{{ cancel_url }}" hx-get="{{ cancel_url }}" hx-target="{{ target }}" class="btn-secondary">Cancel</a>
    </div>
</form>