{% extends "base.html" %}
{% block title %}Gesichtssuche{% endblock %}
{% block content %}
<h1 class="page-title">Gesichtssuche
  <span class="badge badge-muted">{{ scope_label }}</span>
</h1>

<div class="card">
  <form class="form-row" method="get" action="/fotos">
    <div class="field">
      <label>Studiengang</label>
      <select name="kz">
        {% for s in meta.stgs %}
          <option value="{{ s.kz }}" {{ 'selected' if s.kz == kz }}>{{ s.code }} - {{ s.name }}</option>
        {% endfor %}
      </select>
    </div>
    <div class="field">
      <label>Studien-Semester</label>
      <select name="sem">
        {% for n in sems %}
          <option value="{{ n }}" {{ 'selected' if (n | string) == sem }}>{{ n }}</option>
        {% endfor %}
      </select>
    </div>
    <div class="field">
      <label>Verband</label>
      <select name="ver">
        {% for v in verbands %}
          <option value="{{ v }}" {{ 'selected' if v == ver }}>{{ v }}{{ verband_label(v) }}</option>
        {% endfor %}
      </select>
    </div>
    <button class="btn btn-primary" type="submit">Zurück zur Fotowand</button>
  </form>
</div>

{% if error %}
<div class="card">
  <p class="empty" style="color:#b3261e">{{ error }}</p>
</div>
{% else %}
<div class="card">
  <h2>
    <span id="search-state">Suche läuft…</span>
    <span class="count-pill" id="search-count">0 Treffer</span>
    <span class="badge badge-muted" id="search-progress">0/{{ job.total }}</span>
    <span class="badge badge-muted" id="search-time" style="display:none"></span>
  </h2>
  <div class="search-progressbar" id="search-progressbar"><div id="search-bar"></div></div>
  <div class="match-grid" id="match-grid"></div>
  <p class="hint" id="search-hint" style="display:none">
    <strong>Hinweis:</strong> Hohe Werte (grün, &ge; 50 %) deuten auf dieselbe Person hin.
    Werte um 35–50 % (gelb) sind mögliche Treffer - bitte prüfen.
  </p>
</div>
{% endif %}
{% endblock %}

{% block scripts %}
<script>
window.__SEARCH_JOB__ = {{ job | tojson if job else 'null' }};
</script>
{% endblock %}