{% extends "admin/layout.html" %}
{% block content %}
<h2 class="text-xl font-bold text-slate-800 mb-4">Tags</h2>
<div class="overflow-x-auto rounded-xl border border-slate-200">
  <table id="table" class="table-soft">
    <thead><tr><th>No</th><th>Tag Name</th><th>Action</th></tr></thead>
    <tbody>
      {% for tag in tags %}
      <tr>
        <td>{{ loop.index }}</td>
        <td>{{ tag.nama }}</td>
        <td class="space-x-1">
          <a href="{{ url_for('admin.ubahtag', idtag=tag.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.hapustag', idtag=tag.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.tambahtag') }}" class="btn-primary mt-4"><i class="fas fa-plus"></i> Add Tags</a>
{# jQuery sudah dimuat di layout/admin.html (akhir body). Memuatnya lagi di sini
   menyebabkan plugin DataTables hilang saat document.ready -> "DataTable is not a function".
   DataTables di-defer agar dieksekusi SETELAH jQuery layout tersedia. #}
<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),
// agar $(...) tidak dipanggil sebelum jQuery tersedia.
window.addEventListener('load', function () {
  if (window.jQuery && $.fn.DataTable) { $('#table').DataTable(); }
});
</script>
{% endblock content %}