{% extends "base.html" %}
{% block title %}Users - Admin - MikroMon{% endblock %}
{% block content %}
<div class="d-flex align-items-center justify-content-between mb-3 flex-wrap gap-2">
  <div>
    <h1 class="h3 mb-0">Users</h1>
    <div class="text-muted">Accounts</div>
  </div>
  <a class="btn btn-outline-secondary" href="{{ url_for('admin.index') }}"><i class="fa-solid fa-arrow-left me-1"></i>Back</a>
</div>

<div class="card shadow-sm">
  <div class="table-responsive">
    <table class="table table-sm align-middle mb-0">
      <thead class="table-light">
        <tr>
          <th>ID</th>
          <th>Email</th>
          <th>Role</th>
          <th>Status</th>
          <th>Created</th>
        </tr>
      </thead>
      <tbody>
        {% for u in users %}
        <tr>
          <td class="text-muted">{{ u.id }}</td>
          <td class="fw-semibold">{{ u.email }}</td>
          <td><span class="badge text-bg-secondary">{{ u.role.name }}</span></td>
          <td>
            {% if u.is_active_flag %}
              <span class="badge text-bg-success">active</span>
            {% else %}
              <span class="badge text-bg-danger">disabled</span>
            {% endif %}
          </td>
          <td class="text-muted small">{{ u.created_at }}</td>
        </tr>
        {% endfor %}
      </tbody>
    </table>
  </div>
</div>
{% endblock %}