{% extends 'base.html' %}
{% block title %}Role Matrix{% endblock %}

{% block content %}
<div class="space-y-4">
  <div class="flex flex-wrap items-center justify-between gap-2">
    <h1 class="text-2xl font-bold">System Roles</h1>
    <form method="post" action="{% url 'accounts:role_groups_sync' %}">
      {% csrf_token %}
      <button type="submit" class="btn btn-primary btn-sm">Sync Role Groups</button>
    </form>
  </div>

  <div class="card border border-base-300 bg-base-100">
    <div class="overflow-x-auto">
      <table class="table table-zebra">
        <thead>
          <tr>
            <th>Role</th>
            <th>Managed Group</th>
            <th>Members</th>
            <th>Capabilities</th>
          </tr>
        </thead>
        <tbody>
          {% for role in roles %}
          <tr>
            <td><span class="font-medium">{{ role.label }}</span></td>
            <td><span class="badge badge-outline">{{ role.group_name }}</span></td>
            <td>{{ role.group_members }}</td>
            <td>
              <div class="flex flex-wrap gap-1">
                {% for cap in role.capabilities %}
                  <span class="badge badge-ghost badge-sm" title="{{ cap.code }}">{{ cap.label }}</span>
                {% empty %}
                  <span class="opacity-70">No capabilities</span>
                {% endfor %}
              </div>
            </td>
          </tr>
          {% endfor %}
        </tbody>
      </table>
    </div>
  </div>
</div>
{% endblock %}