{% extends "base.html" %}
{% block title %}User Management{% endblock %}
{% block page_title %}User Management{% endblock %}

{% block content %}
<div class="card">
  <div class="card-header d-flex align-items-center justify-content-between">
    <span><i class="bi bi-people me-2"></i>All Users <span style="font-size:12px;color:var(--muted);">({{ users|length }})</span></span>
    <a href="{{ url_for('admin.create_user') }}" class="btn btn-primary btn-sm">
      <i class="bi bi-person-plus me-1"></i>Add User
    </a>
  </div>
  <div class="card-body p-0">
    <div class="table-responsive">
    <table class="table mb-0">
      <thead>
        <tr>
          <th>Name</th>
          <th>Email</th>
          <th>Department</th>
          <th>Role</th>
          <th>Status</th>
          <th>Last Login</th>
          <th>Actions</th>
        </tr>
      </thead>
      <tbody>
        {% for u in users %}
        <tr>
          <td>
            <div style="display:flex;align-items:center;gap:10px;">
              <div style="width:30px;height:30px;border-radius:50%;background:var(--accent2);display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;flex-shrink:0;">
                {{ u.full_name[0].upper() }}
              </div>
              <span style="font-size:14px;">{{ u.full_name }}</span>
            </div>
          </td>
          <td style="font-size:13px;color:var(--muted);">{{ u.email }}</td>
          <td style="font-size:13px;color:var(--muted);">{{ u.department or '—' }}</td>
          <td>
            <span style="font-size:11px;padding:2px 8px;border-radius:4px;
              background:{% if u.role == 'admin' %}rgba(233,69,96,.15){% elif u.role == 'it_staff' %}rgba(0,180,216,.15){% else %}rgba(112,112,160,.15){% endif %};
              color:{% if u.role == 'admin' %}var(--accent){% elif u.role == 'it_staff' %}var(--accent3){% else %}var(--muted){% endif %};">
              {{ u.role.replace('_',' ').upper() }}
            </span>
          </td>
          <td>
            {% if u.is_active %}
              <span style="color:var(--success);font-size:12px;"><i class="bi bi-circle-fill" style="font-size:8px;"></i> Active</span>
            {% else %}
              <span style="color:var(--muted);font-size:12px;"><i class="bi bi-circle" style="font-size:8px;"></i> Inactive</span>
            {% endif %}
          </td>
          <td style="font-size:12px;color:var(--muted);">
            {{ u.last_login.strftime('%b %d, %Y') if u.last_login else 'Never' }}
          </td>
          <td>
            <div class="d-flex gap-1">
              <a href="{{ url_for('admin.edit_user', user_id=u.id) }}" class="btn btn-secondary btn-sm">
                <i class="bi bi-pencil"></i>
              </a>
              {% if u.id != current_user.id and u.is_active %}
              <form method="POST" action="{{ url_for('admin.delete_user', user_id=u.id) }}"
                    data-confirm="Deactivate {{ u.full_name }}? They will no longer be able to log in."
                    data-confirm-title="Deactivate User" data-confirm-ok="Deactivate" data-confirm-class="btn-warning">
                <input type="hidden" name="csrf_token" value="{{ csrf_token() }}"/>                <button type="submit" class="btn btn-sm" style="background:rgba(248,113,113,.1);border:1px solid rgba(248,113,113,.2);color:var(--danger);">
                  <i class="bi bi-person-dash"></i>
                </button>
              </form>
              {% endif %}
            </div>
          </td>
        </tr>
        {% endfor %}
      </tbody>
    </table>
    </div>
  </div>
</div>
{% endblock %}