<div class="container mx-auto px-4 py-8">
  <div class="max-w-4xl mx-auto">
    <details class="mb-4 bg-white border rounded p-4">
      <summary class="cursor-pointer font-semibold">Bu sayfa ne işe yarar? Nasıl kullanırım?</summary>
      <div class="mt-3 text-sm text-gray-700 space-y-2">
        <p><b>Roller</b> sayfasında sistem rollerini görüntüler, yeni rol ekleyip düzenleyebilirsiniz.</p>
        <p><b>İzinler</b>: Rol izinleri menü görünürlüğünü ve işlem yetkilerini belirler (örn. <i>manage_users</i>).</p>
        <p><b>Güvenlik</b>: Kritik izinleri (özellikle <i>manage_*</i>) dikkatle verin.</p>
      </div>
    </details>
    <h1 class="text-2xl font-bold mb-4">Roller</h1>
    <div class="mb-4">
      <a href="/admin/roles/new" class="btn btn-primary btn-sm">
        <i class="fas fa-plus mr-2"></i>Yeni Rol
      </a>
    </div>
    <div class="overflow-x-auto bg-white shadow rounded">
      <table class="table table-zebra w-full">
        <thead class="bg-gray-50">
          <tr>
            <th class="px-4">ID</th>
            <th class="px-4">Ad</th>
            <th class="px-4">İşlemler</th>
          </tr>
        </thead>
        <tbody>
          <% (roles || []).forEach(function(r){ %>
            <tr>
              <td class="px-4 py-2"><%= r.id %></td>
              <td class="px-4 py-2"><%= r.name %></td>
              <td class="px-4 py-2">
                <a href="/admin/roles/<%= r.id %>/edit" class="btn btn-xs btn-outline"><i class="fas fa-edit mr-1"></i>Düzenle</a>
                <form action="/admin/roles/<%= r.id %>/delete" method="POST" class="inline ml-1" onsubmit="return confirm('Silinsin mi?')">
                  <input type="hidden" name="_csrf" value="<%= csrfToken %>">
                  <button type="submit" class="btn btn-xs btn-error"><i class="fas fa-trash"></i></button>
                </form>
              </td>
            </tr>
          <% }) %>
        </tbody>
      </table>
    </div>
  </div>
</div>
