{% extends "base.html" %}

{% block title %}Aktive Sitzungen{% endblock %}
{% block breadcrumb %}<p class="text-xs text-neutral-500"><a href="/settings" class="hover:underline">Einstellungen</a> / Sitzungen</p>{% endblock %}
{% block heading %}Aktive Sitzungen{% endblock %}

{% block content %}
<div class="max-w-3xl space-y-4">

  {% if request.query_params.get('revoked') %}
  <div class="card" style="border-color:#10b981;background:rgba(16,185,129,0.10);">
    <div class="p-4 text-sm" style="color:#6ee7b7;font-weight:600;">
      ✓ {{ request.query_params.get('revoked') }} Sitzung(en) abgemeldet.
    </div>
  </div>
  {% endif %}

  <div class="card">
    <div class="card-header" style="display:flex;justify-content:space-between;align-items:center;">
      <div>
        <h2>Wo bin ich überall eingeloggt?</h2>
        <p class="sub">Übersicht aller Geräte / Browser, die für dieses Konto eine gültige Session haben.</p>
      </div>
      {% set active = sessions|selectattr('revoked_at','none')|list %}
      {% if active|length > 1 %}
      <form method="post" action="/settings/sessions/revoke-all"
            onsubmit="return confirm('Auf allen anderen Geräten abmelden? Diese Sitzung bleibt aktiv.');">
        <button class="btn btn-secondary" type="submit"
                style="color:#ef4444;border-color:#ef4444;">
          Auf allen anderen Geräten abmelden
        </button>
      </form>
      {% endif %}
    </div>

    {% if sessions %}
    <table class="data-table">
      <thead>
        <tr>
          <th>Gerät / Browser</th>
          <th>IP</th>
          <th class="num">Zuletzt aktiv</th>
          <th class="num">Erste Anmeldung</th>
          <th>Status</th>
          <th></th>
        </tr>
      </thead>
      <tbody>
        {% for s in sessions %}
        <tr>
          <td class="text-xs" style="max-width:340px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;">
            {% if s.user_agent %}
              {{ s.user_agent }}
            {% else %}—{% endif %}
            {% if s.id == current_id %}<span class="badge badge-emerald ml-2" style="font-size:9px;">Aktuelle Sitzung</span>{% endif %}
          </td>
          <td class="text-xs nums">{{ s.ip_address or '—' }}</td>
          <td class="num text-xs nums">{{ s.last_seen_at[:16] }}</td>
          <td class="num text-xs nums" style="color: var(--card-text-muted);">{{ s.created_at[:16] }}</td>
          <td>
            {% if s.revoked_at %}
              <span class="badge badge-red">Abgemeldet</span>
              <div class="text-xs nums mt-1" style="color: var(--card-text-muted);">{{ s.revoked_at[:16] }}</div>
            {% else %}
              <span class="badge badge-emerald">Aktiv</span>
            {% endif %}
          </td>
          <td class="text-right">
            {% if not s.revoked_at and s.id != current_id %}
            <form method="post" action="/settings/sessions/{{ s.id }}/revoke"
                  onsubmit="return confirm('Diese Sitzung abmelden?');">
              <button class="btn btn-sm btn-secondary" type="submit"
                      style="color:#ef4444;border-color:#ef4444;">Abmelden</button>
            </form>
            {% endif %}
          </td>
        </tr>
        {% endfor %}
      </tbody>
    </table>
    {% else %}
    <div class="p-12 text-center">
      <p class="text-sm" style="color: var(--card-text-muted);">Noch keine Sitzungen erfasst.</p>
    </div>
    {% endif %}
  </div>

  <div class="card">
    <div class="card-header"><div>
      <h2>Was passiert beim Abmelden?</h2>
    </div></div>
    <div class="p-5 text-sm space-y-2" style="color: var(--card-text);">
      <p>
        Die Sitzung wird sofort gesperrt. Beim nächsten Request des betroffenen Browsers
        wird die Authentifizierung verweigert und der Nutzer landet auf der Login-Seite.
        Andere Sitzungen / aktive Logins bleiben unberührt — außer beim
        Klick auf <strong>„Auf allen anderen Geräten abmelden"</strong>.
      </p>
      <p style="color: var(--card-text-muted);">
        Tipp: nutze diese Funktion nach dem Verlust eines Geräts (Telefon / Notebook),
        um sicherzustellen, dass keine Session mehr aktiv ist.
      </p>
    </div>
  </div>
</div>
{% endblock %}