{% extends "base.html" %}
{% set active_nav = "workers" %}
{% block title %}Workers — Loom Workshop{% endblock %}
{% block content %}
<hgroup>
    <h1>Workers</h1>
    <p>{{ workers | length }} worker config{{ 's' if workers | length != 1 else '' }} loaded.</p>
</hgroup>

<input type="search" id="worker-search" placeholder="Filter workers by name or description..."
       aria-label="Filter workers" oninput="filterWorkers(this.value)">

<div class="table-wrap">
<table>
    <thead>
        <tr>
            <th scope="col">Name</th>
            <th scope="col">Description</th>
            <th scope="col">Kind</th>
            <th scope="col">Tier</th>
            <th scope="col">Actions</th>
        </tr>
    </thead>
    <tbody id="worker-table-body">
        {% for w in workers %}
        <tr data-worker-name="{{ w.name | lower }}" data-worker-desc="{{ (w.description or '') | lower }}">
            <td>
                <a href="/workers/{{ w.name }}">{{ w.name }}</a>
                {% if w.app_name %}<br><span class="app-source">{{ w.app_name }}</span>{% endif %}
            </td>
            <td>{{ w.description or '—' }}</td>
            <td><kbd>{{ w.worker_kind }}</kbd></td>
            <td><kbd>{{ w.default_model_tier or '—' }}</kbd></td>
            <td>
                <span class="btn-group">
                    <a href="/workers/{{ w.name }}/test" role="button" class="outline small">Test</a>
                    <a href="/workers/{{ w.name }}/eval" role="button" class="outline small">Eval</a>
                </span>
            </td>
        </tr>
        {% else %}
        <tr><td colspan="5">No worker configs found in <code>configs/workers/</code></td></tr>
        {% endfor %}
    </tbody>
</table>
</div>

<script>
function filterWorkers(query) {
    var q = query.toLowerCase().trim();
    var rows = document.querySelectorAll('#worker-table-body tr[data-worker-name]');
    for (var i = 0; i < rows.length; i++) {
        var name = rows[i].getAttribute('data-worker-name');
        var desc = rows[i].getAttribute('data-worker-desc');
        var match = !q || name.indexOf(q) !== -1 || desc.indexOf(q) !== -1;
        rows[i].style.display = match ? '' : 'none';
    }
}
</script>
{% endblock %}