{% extends 'chat/base.html' %}
{% block title %}Admin Panel — DiscordClone{% endblock %}
{% block body %}
<div class="auth-wrapper" style="overflow:auto;align-items:flex-start;padding:32px 0;">
  <div style="width:100%;max-width:700px;margin:0 auto;">
    <div class="auth-card" style="max-width:100%;">
      <div class="d-flex align-items-center justify-content-between mb-3">
        <h1 style="font-size:1.3rem;margin:0;"><i class="bi bi-shield-check text-warning me-2"></i>Admin Panel</h1>
        <a href="{% url 'home' %}" class="btn btn-sm btn-secondary" id="btn_admin_back">← Back</a>
      </div>
      {% if messages %}
      {% for msg in messages %}
      <div class="alert alert-success py-2 mb-3">{{ msg }}</div>
      {% endfor %}
      {% endif %}
      <table class="table table-dark table-hover align-middle" style="font-size:.9rem;">
        <thead>
          <tr>
            <th>User</th>
            <th>Email</th>
            <th>Role</th>
            <th>Actions</th>
          </tr>
        </thead>
        <tbody>
          {% for u in users %}
          <tr>
            <td>
              {% if u.profile.avatar %}<img src="{{ u.profile.avatar.url }}" class="rounded-circle me-2" style="width:28px;height:28px;object-fit:cover;">{% endif %}
              {{ u.username }}
              {% if u.id in blocked_ids %}<span class="badge bg-danger ms-1">blocked</span>{% endif %}
            </td>
            <td style="color:var(--dc-muted);">{{ u.email }}</td>
            <td><span class="role-badge role-{{ u.profile.role }}">{{ u.profile.role }}</span></td>
            <td>
              <form method="post" action="{% url 'admin_panel' %}" class="d-flex gap-1 flex-wrap" id="form_user_{{ u.id }}">
                {% csrf_token %}
                <input type="hidden" name="user_id" value="{{ u.id }}">
                <!-- Role assign -->
                <select name="role" class="form-select form-select-sm" style="width:auto;" id="sel_role_{{ u.id }}">
                  <option value="user" {% if u.profile.role == 'user' %}selected{% endif %}>User</option>
                  <option value="moderator" {% if u.profile.role == 'moderator' %}selected{% endif %}>Moderator</option>
                  <option value="admin" {% if u.profile.role == 'admin' %}selected{% endif %}>Admin</option>
                </select>
                <button type="submit" name="action" value="set_role" class="btn btn-sm btn-outline-primary" id="btn_setrole_{{ u.id }}">Set Role</button>
                {% if u.id in blocked_ids %}
                <button type="submit" name="action" value="unblock" class="btn btn-sm btn-outline-success" id="btn_unblock_{{ u.id }}">Unblock</button>
                {% else %}
                <button type="submit" name="action" value="block" class="btn btn-sm btn-outline-danger" id="btn_block_{{ u.id }}">Block</button>
                {% endif %}
              </form>
            </td>
          </tr>
          {% empty %}
          <tr><td colspan="4" class="text-center" style="color:var(--dc-muted);">No other users.</td></tr>
          {% endfor %}
        </tbody>
      </table>
    </div>
  </div>
</div>
{% endblock %}