{% extends "admin/base.html" %}
{% set active = 'teammanagement' %}

{% block title %}{{ team_name }} — Token-Übersicht{% endblock %}

{% block content %}
<div style="display:flex;align-items:center;gap:12px;margin-bottom:20px;flex-wrap:wrap;">
  <a href="/admin/teammanagement" class="btn btn-secondary btn-sm">← Zurück</a>
  <h1 style="margin:0;">{{ team_name }}</h1>
</div>

<div class="card" style="margin-bottom:16px;">
  <div class="card-title">Trainer-Token</div>
  <code style="font-size:13px;word-break:break-all;">{{ trainer_token }}</code>
</div>

<div class="card" style="margin-bottom:16px;">
  <div class="card-title">Slot-Konfiguration ({{ slot_konfig|length }} Slots)</div>
  {% if not slot_konfig %}
    <p style="color:var(--muted);font-size:13px;">Noch keine Slots beim Server registriert.</p>
  {% else %}
    <table style="width:100%;table-layout:fixed;">
      <colgroup>
        <col style="width:55px;">
        <col style="width:110px;">
        <col style="width:auto;">
        <col style="width:70px;">
        <col style="width:120px;">
      </colgroup>
      <thead>
        <tr>
          <th>Slot</th>
          <th>Rolle</th>
          <th>Token</th>
          <th>Aktiv</th>
          <th>Beigetreten</th>
        </tr>
      </thead>
      <tbody>
        {% for s in slot_konfig %}
        <tr style="{% if not s.aktiv %}opacity:0.45;{% endif %}">
          <td style="font-weight:600;">{{ s.position }}</td>
          <td style="font-size:12px;">{{ s.rolle or '—' }}</td>
          <td style="overflow:hidden;">
            <code style="font-size:10px;word-break:break-all;display:block;color:var(--muted);">{{ s.token_hex[:24] }}…</code>
          </td>
          <td>
            {% if s.aktiv %}
              <span class="badge badge-ok">aktiv</span>
            {% else %}
              <span class="badge badge-err">inaktiv</span>
            {% endif %}
          </td>
          <td style="font-size:12px;color:var(--muted);">
            {% if s.beigetreten %}
              <span style="color:var(--success);">✓</span>
              {{ s.beigetreten_am[:16].replace('T', ' ') if s.beigetreten_am else '' }}
            {% else %}
              <span style="color:var(--warning);">—</span>
            {% endif %}
          </td>
        </tr>
        {% endfor %}
      </tbody>
    </table>
  {% endif %}
</div>

<div class="card">
  <div class="card-title">Registrierte Mitglieder ({{ mitglieder|length }})</div>

  {% if not mitglieder %}
    <p style="color:var(--muted);font-size:13px;">Noch keine Mitglieder registriert.</p>
  {% else %}
    <table style="width:100%;table-layout:fixed;">
      <colgroup>
        <col style="width:50px;">
        <col style="width:110px;">
        <col style="width:auto;">
        <col style="width:70px;">
        <col style="width:150px;">
      </colgroup>
      <thead>
        <tr>
          <th>Slot</th>
          <th>Rolle</th>
          <th>Token</th>
          <th>Status</th>
          <th>Beigetreten</th>
        </tr>
      </thead>
      <tbody>
        {% for m in mitglieder %}
        <tr>
          <td style="font-weight:600;">{{ m.slot_nummer }}</td>
          <td style="font-size:12px;">{{ m.rolle or '—' }}</td>
          <td style="overflow:hidden;">
            <code style="font-size:11px;user-select:all;cursor:text;word-break:break-all;display:block;" title="{{ m.player_token }}">{{ m.token_hex }}</code>
          </td>
          <td>
            {% if m.status == 'active' %}
              <span class="badge badge-ok">aktiv</span>
            {% else %}
              <span class="badge badge-err">{{ m.status }}</span>
            {% endif %}
          </td>
          <td style="font-size:12px;color:var(--muted);">
            {% if m.beigetreten_am %}
              <span style="color:var(--success);">✓</span>
              {{ m.beigetreten_am[:16].replace('T', ' ') }}
            {% else %}
              <span style="color:var(--warning);">noch nicht</span>
            {% endif %}
          </td>
        </tr>
        {% endfor %}
      </tbody>
    </table>
  {% endif %}
</div>
{% endblock %}