{% extends "base.html" %}

{% block title %}Search - devqubit{% endblock %}

{% block content %}
<div class="page-header">
    <h1 class="page-title">Search Runs</h1>
</div>

<div class="card mb-2">
    <form method="get" action="/runs"
          hx-get="/runs"
          hx-target="#search-results"
          hx-swap="innerHTML"
          hx-indicator="#search-indicator">
        <!-- Preserve workspace on search -->
        {% if current_workspace %}
        <input type="hidden" name="workspace" value="{{ current_workspace.id }}">
        {% endif %}
        <div class="form-group">
            <label for="q">Query</label>
            <input type="text"
                   name="q"
                   id="q"
                   placeholder="metric.fidelity > 0.95 and params.shots = 1000"
                   style="font-family: monospace;"
                   hx-trigger="keyup changed delay:500ms"
                   hx-get="/runs"
                   hx-target="#search-results"
                   hx-include="[name='workspace']">
        </div>
        <div class="flex gap-1 items-center">
            <button type="submit" class="btn btn-primary">Search</button>
            <span id="search-indicator" class="htmx-indicator">
                <span class="spinner"></span> Searching...
            </span>
        </div>
    </form>
</div>

<div id="search-results" class="card mb-2" style="display: none;">
    {# Results will be loaded here via HTMX #}
</div>

<div class="grid grid-2">
    <div class="card">
        <div class="card-header">
            <h3 class="card-title">Query Syntax</h3>
        </div>
        <table>
            <thead>
                <tr>
                    <th>Field</th>
                    <th>Description</th>
                </tr>
            </thead>
            <tbody>
                <tr><td class="font-mono">params.X</td><td>Parameter value</td></tr>
                <tr><td class="font-mono">metric.X</td><td>Metric value</td></tr>
                <tr><td class="font-mono">tags.X</td><td>Tag value</td></tr>
                <tr><td class="font-mono">status</td><td>Run status</td></tr>
                <tr><td class="font-mono">project</td><td>Project name</td></tr>
                <tr><td class="font-mono">backend</td><td>Backend name</td></tr>
            </tbody>
        </table>
    </div>

    <div class="card">
        <div class="card-header">
            <h3 class="card-title">Operators</h3>
        </div>
        <table>
            <thead>
                <tr>
                    <th>Operator</th>
                    <th>Description</th>
                </tr>
            </thead>
            <tbody>
                <tr><td class="font-mono">=</td><td>Equals</td></tr>
                <tr><td class="font-mono">!=</td><td>Not equals</td></tr>
                <tr><td class="font-mono">&gt;</td><td>Greater than</td></tr>
                <tr><td class="font-mono">&gt;=</td><td>Greater or equal</td></tr>
                <tr><td class="font-mono">&lt;</td><td>Less than</td></tr>
                <tr><td class="font-mono">&lt;=</td><td>Less or equal</td></tr>
                <tr><td class="font-mono">~</td><td>Contains</td></tr>
                <tr><td class="font-mono">and</td><td>Combine conditions</td></tr>
            </tbody>
        </table>
    </div>
</div>

<div class="card mt-2">
    <div class="card-header">
        <h3 class="card-title">Examples</h3>
    </div>
    <table>
        <tbody>
            <tr>
                <td class="font-mono">metric.fidelity > 0.95</td>
                <td>High fidelity runs</td>
            </tr>
            <tr>
                <td class="font-mono">params.shots = 1000 and status = FINISHED</td>
                <td>Finished runs with 1000 shots</td>
            </tr>
            <tr>
                <td class="font-mono">tags.backend ~ ibm</td>
                <td>Runs with IBM backends</td>
            </tr>
            <tr>
                <td class="font-mono">metric.error < 0.01</td>
                <td>Low error runs</td>
            </tr>
            <tr>
                <td class="font-mono">project = vqe and metric.energy < -2.0</td>
                <td>VQE runs with low energy</td>
            </tr>
        </tbody>
    </table>
</div>

<script>
// Show results container when search is active
document.addEventListener('htmx:afterSwap', function(evt) {
    if (evt.detail.target.id === 'search-results') {
        evt.detail.target.style.display = 'block';
    }
});
</script>
{% endblock %}