{% extends 'admin/base_site.html' %}
{% block title %}Roles{% endblock %}
{% block page_title %}Roles & Permissions{% endblock %}
{% block nav_roles %}active{% endblock %}

{% block topbar_actions %}
<a href="{% url 'admin_roles:role_create' %}" class="btn btn-gradient btn-sm">+ Create Role</a>
{% endblock %}

{% block content %}
<div class="alert alert-info mb-3">
  Roles are Django Groups. Built-in roles <strong>Admin</strong>, <strong>Organiser</strong>, <strong>Guest</strong> cannot be deleted but can be edited.
</div>
<div class="grid-3">
  {% for group in groups %}
  <div class="card">
    <div class="card-body">
      <div class="flex items-center justify-between mb-3">
        <h3 class="font-head role-card-title">{{ group.name }}</h3>
        <span class="badge badge-purple">{{ group.user_count }} user{{ group.user_count|pluralize }}</span>
      </div>
      <div class="perm-list mb-3">
        {% for perm in group.permissions.all %}
        <span class="perm-chip">{{ perm.codename }}</span>
        {% empty %}
        <span class="text-xs text-muted">No permissions</span>
        {% endfor %}
      </div>
      <div class="divider"></div>
      <div class="flex gap-1 mt-2">
        <a href="{% url 'admin_roles:role_edit' group.id %}" class="btn btn-outline btn-sm">Edit</a>
        {% if group.name not in 'Admin,Organiser,Guest' %}
        <form method="post" action="{% url 'admin_roles:role_delete' group.id %}"
              onsubmit="return confirm('Delete role {{ group.name }}?')">
          {% csrf_token %}
          <button type="submit" class="btn btn-danger btn-sm">Delete</button>
        </form>
        {% else %}
        <span class="built-in-label">Built-in</span>
        {% endif %}
      </div>
    </div>
  </div>
  {% empty %}
  <div class="panel-empty">
    <div class="panel-empty-icon">&#128737;</div>
    <div class="panel-empty-title">No roles found</div>
    <p class="panel-empty-sub">Run <code>python manage.py seed --groups</code></p>
  </div>
  {% endfor %}
</div>
{% endblock %}