{% extends "admin_frontend/base.html" %}
{% load breadcrumbs %}
{% block title %}Permissions{% endblock %}
{% block content %}
{% render_breadcrumbs breadcrumbs %}
<div class="flex items-center justify-between mb-4">
  <h1 class="text-2xl font-semibold">Permissions</h1>
  <p class="text-gray-500">Manage role-based groups for this site.</p>
  </div>

<div class="bg-white rounded shadow overflow-hidden">
  <table class="min-w-full divide-y divide-gray-200">
    <thead class="bg-gray-50">
      <tr>
        <th class="px-4 py-2 text-left text-xs font-medium text-gray-500">Group</th>
        <th class="px-4 py-2 text-left text-xs font-medium text-gray-500">Permissions</th>
        <th class="px-4 py-2 text-left text-xs font-medium text-gray-500">Users</th>
        <th class="px-4 py-2 text-left text-xs font-medium text-gray-500">Actions</th>
      </tr>
    </thead>
    <tbody class="divide-y divide-gray-200">
      {% for g in groups %}
      <tr>
        <td class="px-4 py-2 font-medium">{{ g.name|title }}</td>
        <td class="px-4 py-2 text-gray-600">{{ g.permissions.count }} permissions</td>
        <td class="px-4 py-2 text-gray-600">
          {{ g.user_set.count }} users
          <a href="{% url 'orgs_admin:permissions_group_users' g.id %}" class="text-blue-700 hover:underline text-xs ml-2">View</a>
        </td>
        <td class="px-4 py-2">
          <a href="{% url 'orgs_admin:permissions_edit_group' g.id %}" class="btn-outline btn-xs">Edit</a>
        </td>
      </tr>
      {% empty %}
      <tr><td colspan="4" class="px-4 py-4 text-center text-gray-500">No groups.</td></tr>
      {% endfor %}
    </tbody>
  </table>
</div>
{% endblock %}
