{% extends "admin/layout.html" %}
{% block content %}
<h2 class="text-xl font-bold text-slate-800 mb-4">Users</h2>
<div class="overflow-x-auto rounded-xl border border-slate-200">
  <table id="table" class="table-soft">
    <thead>
      <tr>
        <th>No</th>
        <th>Name</th>
        <th>Email</th>
        <th>Registered</th>
        <th>Status</th>
        <th>Role</th>
        <th></th>
      </tr>
    </thead>
    <tbody>
      {% for user in users %}
      <tr>
        <td>{{ loop.index }}</td>
        <td>{{ user.nama }}</td>
        <td>{{ user.surel }}</td>
        <td>{{ user.tgldaftar.strftime('%d-%B-%Y') }}</td>
        <td>{% if user.aktifasi %}<span class="badge-green">Active</span>{% else %}<span class="badge-red">Inactive</span>{% endif %}</td>
        <td>{{ user.sebagai.nama }}</td>
        <td><a href="{{ url_for('admin.ubahakun', id=user.id) }}" class="btn bg-amber-500 text-white text-xs px-3 py-1.5 hover:bg-amber-600">Edit</a></td>
      </tr>
      {% endfor %}
    </tbody>
  </table>
</div>
<script type="text/javascript" defer src="{{ url_for('static', filename='js/jquery.dataTables.min.js') }}"></script>
<script nonce="{{ csp_nonce() }}">
  // Tunggu sampai jQuery & DataTables benar-benar load (window load).
  window.addEventListener('load', function () {
    if (window.jQuery && $.fn.DataTable) { $('#table').DataTable(); }
  });
</script>
{% endblock content %}