{% extends "admin/admin_base.html" %}
{% block title %}Bans — KittyRec Admin{% endblock %}
{% block head %}
<style>
  .ban-reason { color:var(--text2); font-size:.82rem; max-width:280px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .until-perm { color:var(--red); font-weight:700; font-size:.78rem; }
  .until-temp { color:var(--yellow); font-size:.78rem; }
</style>
{% endblock %}

{% block content %}
<div class="page-header">
  <div class="flex items-center gap-2">
    <h1>Bans</h1>
    <span class="badge badge-red ml-auto">{{ banned|length }} active</span>
  </div>
  <p>Manage active bans and review moderation history</p>
</div>

<div class="grid-2" style="gap:1.5rem">
  <div class="card">
    <div class="section-head"><h2>Active Bans</h2></div>
    {% if banned %}
    <div class="table-wrap">
      <table>
        <thead><tr><th>Player</th><th>Reason</th><th>Until</th><th>By</th><th>Actions</th></tr></thead>
        <tbody>
          {% for p in banned %}
          <tr>
            <td>
              <a href="#" onclick="KR.openDrawer({{ p.id }});return false" style="font-weight:600;color:var(--text);text-decoration:none">{{ p.username }}</a>
              <div style="color:var(--text3);font-size:.72rem">#{{ p.id }}</div>
            </td>
            <td class="ban-reason" title="{{ p.ban_reason }}">{{ p.ban_reason or '—' }}</td>
            <td>
              {% if not p.banned_until %}
              <span class="until-perm">PERMANENT</span>
              {% else %}
              <span class="until-temp">{{ p.banned_until[:16] if p.banned_until else '—' }}</span>
              {% endif %}
            </td>
            <td style="color:var(--text3);font-size:.8rem">{{ p.banned_by or '—' }}</td>
            <td>
              <div class="flex gap-1">
                {% if SCOPE_ADMIN in scopes %}
                <button class="btn btn-green btn-sm" onclick="unban({{ p.id }}, '{{ p.username }}', this)">Unban</button>
                {% endif %}
              </div>
            </td>
          </tr>
          {% endfor %}
        </tbody>
      </table>
    </div>
    {% else %}
    <p style="color:var(--text3);font-size:.85rem;text-align:center;padding:2rem 0">No active bans</p>
    {% endif %}
  </div>

  <div class="card">
    <div class="section-head"><h2>Recent Ban Log</h2></div>
    {% if ban_log %}
    <div class="table-wrap">
      <table>
        <thead><tr><th>When</th><th>Action</th><th>Player</th><th>Reason</th><th>Admin</th></tr></thead>
        <tbody>
          {% for b in ban_log %}
          <tr>
            <td style="color:var(--text3);font-size:.75rem;white-space:nowrap">{{ b.created_at[:16] if b.created_at else '—' }}</td>
            <td>
              {% if b.action == 'ban' %}<span class="badge badge-red">Ban</span>
              {% else %}<span class="badge badge-green">Unban</span>{% endif %}
            </td>
            <td><a href="#" onclick="KR.openDrawer({{ b.profile_id }});return false" style="color:var(--text);text-decoration:none;font-weight:600">{{ b.username }}</a></td>
            <td style="color:var(--text2);font-size:.8rem;max-width:200px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap">{{ b.reason or '—' }}</td>
            <td style="color:var(--text3);font-size:.78rem">{{ b.admin_name or '—' }}</td>
          </tr>
          {% endfor %}
        </tbody>
      </table>
    </div>
    {% else %}
    <p style="color:var(--text3);font-size:.85rem;text-align:center;padding:2rem 0">No moderation history</p>
    {% endif %}
  </div>
</div>
{% endblock %}

{% block scripts %}
<script>
async function unban(pid, name, btn) {
  if (!confirm(`Unban ${name}?`)) return;
  const d = await api('/admin/api/unban/' + pid);
  if (d.ok) { btn.closest('tr').remove(); toast(`${name} unbanned`); }
  else toast(d.error || 'Error', 'error');
}
</script>
{% endblock %}