{% extends "admin/layout.html" %}
{% block content %}
<h2 class="text-xl font-bold text-slate-800 mb-1">Subscribers</h2>
<p class="text-sm text-slate-500 mb-4">Total {{ subscribers|length }}</p>
<div class="overflow-x-auto rounded-xl border border-slate-200">
  <table id="table" class="table-soft">
    <thead><tr><th>No</th><th>Email</th><th>Subscribed</th><th>Action</th></tr></thead>
    <tbody>
      {% for subscriber in subscribers %}
      <tr>
        <td>{{ loop.index }}</td>
        <td>{{ subscriber.surel }}</td>
        <td>{{ subscriber.tanggaldibuat|indonesia_time }}</td>
        <td><a href="#" class="btn-danger text-xs px-3 py-1.5" data-confirm="Are you sure you want to delete this?">Delete</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 %}