{% extends 'base.html' %}
{% block title %}Manajemen Pengguna{% endblock %}
{% block topbar_title %}Manajemen Pengguna{% endblock %}

{% block content %}
<div class="page-header d-flex align-items-start justify-content-between">
  <div>
    <h1><i class="bi bi-person-gear me-2 text-primary-custom"></i>Manajemen Pengguna</h1>
    <nav aria-label="breadcrumb">
      <ol class="breadcrumb">
        <li class="breadcrumb-item"><a href="{{ url_for('dashboard.index') }}">Dashboard</a></li>
        <li class="breadcrumb-item active">Pengguna</li>
      </ol>
    </nav>
  </div>
  <a href="{{ url_for('users.tambah') }}" class="btn btn-primary">
    <i class="bi bi-person-plus me-2"></i>Tambah Pengguna
  </a>
</div>

<div class="card">
  <div class="card-body p-0">
    <div class="table-responsive">
      <table class="table table-hover mb-0">
        <thead>
          <tr>
            <th>#</th>
            <th>Nama</th>
            <th>Username</th>
            <th>Email</th>
            <th>Role</th>
            <th>Status</th>
            <th>Bergabung</th>
            <th>Aksi</th>
          </tr>
        </thead>
        <tbody>
          {% for u in users %}
          <tr>
            <td class="text-muted font-mono" style="font-size:.75rem;">{{ loop.index }}</td>
            <td>
              <div class="d-flex align-items-center gap-2">
                <div style="width:30px;height:30px;border-radius:50%;
                  background:linear-gradient(135deg,var(--primary),var(--accent));
                  display:flex;align-items:center;justify-content:center;
                  font-weight:700;font-size:.75rem;">
                  {{ u.nama[0].upper() }}
                </div>
                <span class="fw-semibold">{{ u.nama }}</span>
                {% if u.id == current_user.id %}
                  <span class="badge bg-success" style="font-size:.65rem;">Anda</span>
                {% endif %}
              </div>
            </td>
            <td class="font-mono">{{ u.username }}</td>
            <td style="font-size:.83rem;">{{ u.email }}</td>
            <td>
              <span class="badge {% if u.role == 'admin' %}bg-danger{% else %}bg-primary{% endif %}">
                {{ u.role.title() }}
              </span>
            </td>
            <td>
              <span class="badge {% if u.is_active %}badge-rendah{% else %}badge-tinggi{% endif %}">
                {{ 'Aktif' if u.is_active else 'Nonaktif' }}
              </span>
            </td>
            <td style="font-size:.78rem;color:var(--text-muted);">
              {{ u.created_at.strftime('%d %b %Y') }}
            </td>
            <td>
              <div class="d-flex gap-1">
                <a href="{{ url_for('users.edit', id=u.id) }}"
                   class="btn btn-sm btn-outline-secondary">
                  <i class="bi bi-pencil"></i>
                </a>
                {% if u.id != current_user.id %}
                <form method="POST" action="{{ url_for('users.hapus', id=u.id) }}"
                      onsubmit="return confirm('Hapus pengguna {{ u.nama }}?')">
                  <button type="submit" class="btn btn-sm btn-outline-danger">
                    <i class="bi bi-trash"></i>
                  </button>
                </form>
                {% endif %}
              </div>
            </td>
          </tr>
          {% endfor %}
        </tbody>
      </table>
    </div>
  </div>
</div>
{% endblock %}