{% extends "layout.html" %}
{% block title %}Roles – {{ admin_title }}{% endblock %}
{% block content %}
<div class="flex items-center justify-between mb-6">
  <div>
    <h1 class="text-xl font-semibold text-zinc-900">Roles & Permissions</h1>
    <p class="text-sm text-zinc-500 mt-1">Manage roles and their permissions on each entity.</p>
  </div>
  <a href="/admin/roles/new"
     class="px-4 py-2 bg-zinc-900 text-white text-sm font-medium rounded-md hover:bg-zinc-700 transition-colors">
    Add role
  </a>
</div>

{% if flash_error %}
<div class="mb-4 px-4 py-3 rounded-md bg-red-50 border border-red-200 text-red-700 text-sm font-medium flex items-center gap-2">
  <i class="fa-solid fa-circle-exclamation text-red-500"></i>
  {{ flash_error }}
</div>
{% endif %}
{% if flash_success %}
<div class="mb-4 px-4 py-3 rounded-md bg-emerald-50 border border-emerald-200 text-emerald-800 text-sm font-medium flex items-center gap-2">
  <i class="fa-solid fa-circle-check text-emerald-500"></i>
  {{ flash_success }}
</div>
{% endif %}

<div class="bg-white border border-zinc-200 rounded-lg overflow-hidden">
  <table class="w-full text-sm">
    <thead class="bg-zinc-50 border-b border-zinc-200">
      <tr>
        <th class="text-left px-4 py-3 font-medium text-zinc-600">Role</th>
        <th class="text-left px-4 py-3 font-medium text-zinc-600">Entities</th>
        <th class="px-4 py-3"></th>
      </tr>
    </thead>
    <tbody class="divide-y divide-zinc-100">
      {% for role in roles %}
      <tr class="hover:bg-zinc-50">
        <td class="px-4 py-3 font-medium text-zinc-900 capitalize">{{ role.name }}</td>
        <td class="px-4 py-3 text-zinc-500">{{ role.entity_count }}</td>
        <td class="px-4 py-3 text-right flex items-center justify-end gap-4">
          <a href="/admin/roles/{{ role.name }}/"
             class="text-xs text-zinc-600 hover:text-zinc-900 font-medium">Edit</a>
          <button hx-delete="/admin/roles/{{ role.name }}/delete"
                  hx-confirm="Delete role {{ role.name }}?"
                  hx-target="body"
                  hx-swap="outerHTML"
                  class="text-xs text-red-600 hover:text-red-800 font-medium">
            Delete
          </button>
        </td>
      </tr>
      {% endfor %}
      {% if roles | length == 0 %}
      <tr>
        <td colspan="3" class="px-4 py-8 text-center text-zinc-400 text-sm">No roles defined yet.</td>
      </tr>
      {% endif %}
    </tbody>
  </table>
</div>
{% endblock %}