<%- include("../layout", { title: "Gruppe bearbeiten" }) %>

<h1 class="mb-4">Gruppe bearbeiten: <%= role.name %></h1>

<form method="POST" action="/admin/roles/<%= role.id %>/update" class="d-flex gap-2 mb-4">
  <input type="text" name="name" class="form-control" value="<%= role.name %>">
  <button class="btn btn-primary">Speichern</button>
</form>

<h3>Berechtigungen</h3>

<table class="table table-bordered table-hover align-middle">
  <thead>
    <tr>
      <th>Berechtigung</th>
      <th class="text-center">Zugewiesen</th>
    </tr>
  </thead>

  <tbody>
    <% permissions.forEach(p => { %>
      <tr>
        <td><%= p.name %></td>
        <td class="text-center">
          <input 
            type="checkbox" 
            class="perm-toggle"
            data-role="<%= role.id %>"
            data-perm="<%= p.id %>"
            <%= assignedIds.includes(Number(p.id)) ? "checked" : "" %>
          >
        </td>
      </tr>
    <% }) %>
  </tbody>
</table>

<script>
document.querySelectorAll(".perm-toggle").forEach(cb => {
  cb.addEventListener("change", async () => {
    const roleId = cb.dataset.role;
    const permissionId = cb.dataset.perm;
    const checked = cb.checked;

    await fetch("/admin/roles/" + roleId + "/toggle-permission", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({ permissionId, checked })
    });
  });
});
</script>
  <%- include("../partials/footer") %>