{% extends 'dashboard/base.html' %}
{% block title %}Users{% endblock %}
{% block content %}
<div class="sp-topbar">
  <div>
    <h1>Users</h1>
    <p class="sp-muted">Everyone with access to this admin dashboard.</p>
  </div>
</div>

<div class="sp-card">
  <table class="sp-table">
    <thead><tr><th>User</th><th>Role</th><th>Joined</th><th>Active</th></tr></thead>
    <tbody>
      {% for u in users %}
      <tr>
        <td>
          <strong>{{ u.name|default:u.email }}</strong><br>
          <span class="sp-muted">{{ u.email }}</span>
        </td>
        <td>
          {% if u.is_superuser %}<span class="sp-pill sp-pill-blue">Administrator</span>
          {% elif u.is_staff %}<span class="sp-pill sp-pill-gray">Staff</span>
          {% else %}<span class="sp-pill sp-pill-gray">Member</span>{% endif %}
        </td>
        <td class="sp-muted">{{ u.date_joined|date:"M j, Y" }}</td>
        <td>
          <form method="post" action="{% url 'dashboard_user_toggle_active' u.id %}">
            {% csrf_token %}
            <input type="checkbox" class="sp-toggle" onchange="this.form.submit()" {% if u.is_active %}checked{% endif %} {% if u.pk == request.user.pk %}disabled title="You can't deactivate your own account"{% endif %}>
          </form>
        </td>
      </tr>
      {% empty %}
      <tr><td colspan="4" class="sp-empty">No users yet.</td></tr>
      {% endfor %}
    </tbody>
  </table>
</div>
{% endblock %}