{% extends "admin/layout.html" %}
{% block content %}
<h2 class="text-xl font-bold text-slate-800 mb-4">Pesan Pengguna</h2>
<div class="overflow-x-auto rounded-xl border border-slate-200">
  <table id="table" class="table-soft">
    <thead><tr><th>No</th><th>Nama</th><th>Email</th><th>Tanggal</th><th>Pesan</th><th>Aksi</th></tr></thead>
    <tbody>
      {% for user in users %}
      <tr>
        <td>{{ loop.index }}</td>
        <td>{{ user.nama }}</td>
        <td>{{ user.surel }}</td>
        <td>{{ user.tanggaldibuat.strftime('%d-%B-%Y') }}</td>
        <td class="max-w-xs">{{ user.pesan }}</td>
        <td><a href="#" class="btn-danger text-xs px-3 py-1.5" data-confirm="Anda yakin ingin menghapus ini?">Hapus</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 %}