{% extends "base.html" %}
{% block actions %}<button class="btn btn-outline-secondary btn-sm" id="refresh"><i class="bi bi-arrow-repeat me-1"></i>{{ _('Rescan') }}</button>{% endblock %}
{% block content %}
<form class="row g-2 mb-3" method="get"><div class="col-12 col-sm-6 col-md-4"><input id="global-search" class="form-control" name="q" value="{{ q }}" placeholder="{{ _('Search engine, vendor…') }}"></div><div class="col-6 col-sm-3 col-md-2"><select class="form-select" name="kind"><option value="">{{ _('all kinds') }}</option><option value="api" {% if kind=='api' %}selected{% endif %}>api</option><option value="local" {% if kind=='local' %}selected{% endif %}>local</option></select></div><div class="col-6 col-sm-3 col-md-2"><button class="btn btn-outline-secondary w-100" type="submit">{{ _('Filter') }}</button></div></form>
<div class="row g-3 stagger">
{% for e in engines %}<div class="col-12 col-md-6 col-xxl-4"><div class="card h-100">
<div class="card-body">
  <div class="d-flex justify-content-between align-items-start gap-2">
    <div><div class="fw-bold">{{ e.name }} <span class="badge badge-soft ms-1">{{ e.kind }}</span></div><div class="small text-muted">{{ e.vendor or e.id }}</div></div>
    <div class="form-check form-switch m-0"><input class="form-check-input toggle" type="checkbox" role="switch" data-id="{{ e.id }}" {% if e.enabled %}checked{% endif %} aria-label="{{ _('enabled') }}"></div>
  </div>
  <div class="mt-2 d-flex flex-wrap gap-1 align-items-center">
    {% if e.available %}<span class="status healthy">{{ _('available') }}</span>{% else %}<span class="status failed" title="{{ e.import_error }}">{{ _('unavailable') }}</span>{% endif %}
    {% if e.supports_pdf %}<span class="badge badge-soft">PDF</span>{% endif %}{% if e.supports_handwriting %}<span class="badge badge-soft">{{ _('handwriting') }}</span>{% endif %}{% if e.supports_tables %}<span class="badge badge-soft">{{ _('tables') }}</span>{% endif %}
    <span class="badge badge-soft">{{ e.cost_model }}{% if e.unit_price %} {{ e.unit_price }}¢{% endif %}</span>
  </div>
  {% if not e.available %}<div class="small mt-2 text-muted">{{ e.install_hint }}</div>{% endif %}
  <div class="small text-muted mt-2">{{ counts.get(e.id, 0) }} {{ _('providers') }} · {{ _('24h success') }} {{ stats[e.id].success_rate ~ '%' if e.id in stats else '-' }} · p50 {{ stats[e.id].avg_ms ~ ' ms' if e.id in stats else '-' }}</div>
  <details class="mt-2"><summary class="small">{{ _('Engine options') }} ({{ e.option_schema|length }})</summary>
  {% if e.option_schema %}<div class="table-responsive mt-2"><table class="table table-sm mb-0 small"><tbody>{% for o in e.option_schema %}<tr><td><code>{{ o.name }}</code></td><td class="text-muted">{{ o.type }}</td><td class="num">{{ o.default }}</td><td class="text-muted">{{ o.description }}</td></tr>{% endfor %}</tbody></table></div>{% endif %}
  <div class="small mt-2">{% if e.docs_url %}<a href="{{ e.docs_url }}" target="_blank" rel="noopener">{{ _('docs') }}</a> · {% endif %}<code>{{ e.module }}</code></div></details>
</div>
<div class="card-footer bg-transparent d-flex gap-2"><a class="btn btn-outline-secondary btn-sm" href="/panel/providers#new={{ e.id }}"><i class="bi bi-plus-lg me-1"></i>{{ _('Create provider') }}</a><button class="btn btn-outline-secondary btn-sm probe" data-id="{{ e.id }}" {% if not e.available %}disabled{% endif %}><i class="bi bi-play me-1"></i>{{ _('Probe') }}</button>{% if not e.available and installable.get(e.id) %}<button class="btn btn-grad btn-sm install-engine ms-auto" data-id="{{ e.id }}"><i class="bi bi-download me-1"></i>{{ _('Install') }}</button>{% endif %}</div>
</div></div>{% endfor %}
</div>
<dialog id="probe-out"><h2>{{ _('Probe') }}</h2><pre id="probe-pre"></pre><form method="dialog" class="mt-3"><button class="btn btn-outline-secondary">{{ _('Done') }}</button></form></dialog>
{% endblock %}
{% block scripts %}<script>
document.addEventListener("DOMContentLoaded", () => { const {api, toast} = OcrRoute;
  document.querySelectorAll(".install-engine").forEach(b => b.onclick = async () => {
    b.disabled = true; const html = b.innerHTML; b.innerHTML = '<i class="bi bi-arrow-repeat spin me-1"></i>' + (window.I18N.Installing || "Installing…");
    try { const r = await api("POST", `/v1/engines/${b.dataset.id}/install`); if (r.available) { toast(b.dataset.id + " ✓"); setTimeout(() => location.reload(), 800); } else { toast((r.output || "install failed").slice(-300), true); b.disabled = false; b.innerHTML = html; } }
    catch (e) { toast(e.message, true); b.disabled = false; b.innerHTML = html; }
  });
});
</script><script>
document.addEventListener("DOMContentLoaded", () => {
  const {api, toast, $} = OcrRoute;
  $("#refresh").onclick = async () => { try { const r = await api("POST", "/v1/engines/refresh"); toast(`Rescanned: ${r.available} available of ${r.synced}`); location.reload(); } catch (e) { toast(e.message, true); } };
  document.querySelectorAll(".toggle").forEach(cb => cb.onchange = async () => { try { await api("PATCH", `/v1/engines/${cb.dataset.id}`, {enabled: cb.checked}); toast(`${cb.dataset.id} ${cb.checked ? "enabled" : "disabled"}`); } catch (e) { toast(e.message, true); cb.checked = !cb.checked; } });
  document.querySelectorAll(".probe").forEach(b => b.onclick = async () => { b.disabled = true; b.textContent = "Probing…"; try { const r = await api("POST", `/v1/engines/${b.dataset.id}/probe`, null, {raw:true}); $("#probe-pre").textContent = JSON.stringify({status: r.status, error: r.error_message, text: r.result && r.result.ParsedText, usage: r.usage, explain: r.routing && r.routing.explain}, null, 2); $("#probe-out").showModal(); } catch (e) { toast(e.message, true); } finally { b.disabled = false; b.textContent = "Probe"; } });
});
</script>{% endblock %}