{% extends "admin/layout.html" %}
{% block content %}
<h2 class="text-xl font-bold text-slate-800 mb-4">Categories</h2>
<div class="overflow-x-auto rounded-xl border border-slate-200">
  <table id="table" class="table-soft">
      <thead><tr><th>No</th><th>Category Name</th><th>Action</th></tr></thead>
    <tbody>
      {% for k in kategori %}
      <tr>
        <td>{{ loop.index }}</td>
        <td>{{ k.nama }}</td>
        <td class="space-x-1">
          <a href="{{ url_for('admin.ubahkategori', idkategori=k.id) }}" class="btn bg-amber-500 text-white text-xs px-3 py-1.5 hover:bg-amber-600">Edit</a>
          <a href="{{ url_for('admin.hapuskategori', idkategori=k.id) }}" 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>
<a href="{{ url_for('admin.tambahkategori') }}" class="btn-primary mt-4"><i class="fas fa-plus"></i> Add Category</a>
<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 %}