{% extends "base.html" %}
{% block title %}Fotos{% endblock %}
{% block content %}
<h1 class="page-title">Fotos
  {% if stg %}<span class="badge">{{ stg.code }} - {{ stg.name }}</span>{% endif %}
  <span class="badge badge-muted">{{ ver == 'V' and 'Vollzeit' or ver }}</span>
</h1>

<div class="card">
  <form class="form-row" method="get" action="/fotos">
    <div class="field">
      <label>Studiengang</label>
      <select name="kz" required>
        {% 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">Laden</button>
  </form>
</div>

<div class="card">
  <h2>Fotowand <span class="count-pill">{{ wall | selectattr('has_photo') | list | length }}/{{ wall | length }}</span></h2>
  <div class="photo-wall" id="photo-wall">
    {% for p in wall %}
    <div class="photo-tile" data-uid="{{ p.matrikel }}" data-initials="{{ (p.nachname[:1] ~ p.vorname[:1]) | upper }}">
      <div class="photo-frame">
        {% if p.person_id %}
        <img loading="lazy" src="/fotos/img/{{ p.person_id }}" alt="{{ p.nachname }}"
             onerror="this.closest('.photo-frame').innerHTML='<div class=&quot;avatar-initials&quot;>' + this.closest('.photo-tile').dataset.initials + '</div>'">
        {% else %}
        <div class="avatar-initials">{{ (p.nachname[:1] ~ p.vorname[:1]) | upper }}</div>
        {% endif %}
      </div>
      <div class="photo-name"><a href="/person/{{ p.matrikel }}">{{ p.nachname }}{% if p.vorname %}, {{ p.vorname }}{% endif %}</a></div>
      {% if p.matrikel == own_uid %}<div class="photo-own">Das bist du</div>{% endif %}
    </div>
    {% else %}
    <p class="empty">Keine Studierenden in diesem Verband/Semester.</p>
    {% endfor %}
  </div>
</div>

<div class="card">
  <h2>Gesichtssuche</h2>
  <p class="hint">Foto hochladen - die App vergleicht es mit den Profilfotos im gewählten Suchbereich.
    Beim ersten Mal für große Bereiche (z.B. FH-weit) kann die Suche etwas dauern;
    die Ergebnisse erscheinen live, während sie berechnet werden.</p>
  <form class="form-row form-stack" method="post" action="/fotos/suche" enctype="multipart/form-data">
    <input type="hidden" name="kz" value="{{ kz }}">
    <input type="hidden" name="sem" value="{{ sem }}">
    <input type="hidden" name="ver" value="{{ ver }}">
    <div class="field">
      <label>Suchbereich</label>
      <select name="scope">
        <option value="verband">Nur Verband {{ ver }} (Sem. {{ sem }})</option>
        <option value="stg">Gesamter Studiengang (alle Semester + Verbände)</option>
        <option value="stud">Alle Studierenden (FH-weit)</option>
        <option value="lektor">Alle Lektoren</option>
        <option value="alle">Alle Personen (Studierende + Lektoren)</option>
      </select>
    </div>
    <div class="field">
      <label>Foto</label>
      <input type="file" name="file" accept="image/*" required>
    </div>
    <button class="btn btn-primary" type="submit">Suchen</button>
  </form>
</div>
{% endblock %}