{% extends base_template %}
{% load i18n %}

{% block content %}
<div class="container-xl">
  <div class="card">
    <div class="card-header">
      <h3 class="card-title">{% trans "Roles" %}</h3>
      <div class="card-actions">
        <button type="button"
                class="btn btn-primary btn-sm"
                hx-get="{% url urls.role_add %}"
                hx-target="#dialog"
                hx-swap="innerHTML">
          <i class="ti ti-plus me-1"></i>{% trans "Add role" %}
        </button>
      </div>
    </div>
    <div id="tenant-roles-table"
         hx-get="{{ request.path }}"
         hx-trigger="tenant_roles:changed from:body"
         hx-swap="outerHTML"
         hx-select="#tenant-roles-table">
      {% if roles %}
        <div class="table-responsive">
          <table class="table table-vcenter card-table">
            <thead>
              <tr>
                <th>{% trans "Name" %}</th>
                <th>{% trans "Label" %}</th>
                <th>{% trans "Description" %}</th>
                <th>{% trans "Members" %}</th>
                <th class="w-1"></th>
              </tr>
            </thead>
            <tbody>
              {% for role in roles %}
                <tr>
                  <td>
                    <code>{{ role.name }}</code>
                    {% if role.is_system %}
                      <span class="badge bg-blue-lt ms-1">{% trans "System" %}</span>
                    {% endif %}
                  </td>
                  <td>{{ role.label }}</td>
                  <td class="text-muted">{{ role.description|default:"—"|truncatewords:10 }}</td>
                  <td>
                    <span class="badge bg-secondary">{{ role.member_count }}</span>
                  </td>
                  <td class="text-end">
                    <div class="btn-list flex-nowrap">
                      <button type="button"
                              class="btn btn-sm btn-ghost-secondary btn-icon"
                              title="{% trans 'Edit' %}"
                              hx-get="{% url urls.role_edit pk=role.pk %}"
                              hx-target="#dialog"
                              hx-swap="innerHTML">
                        <i class="ti ti-edit"></i>
                      </button>
                      {% if not role.is_system %}
                        <button type="button"
                                class="btn btn-sm btn-ghost-danger btn-icon"
                                title="{% trans 'Delete' %}"
                                hx-get="{% url urls.role_delete pk=role.pk %}"
                                hx-target="#dialog"
                                hx-swap="innerHTML">
                          <i class="ti ti-trash"></i>
                        </button>
                      {% endif %}
                    </div>
                  </td>
                </tr>
              {% endfor %}
            </tbody>
          </table>
        </div>
      {% else %}
        <div class="card-body">
          <div class="empty">
            <p class="empty-title">{% trans "No roles" %}</p>
            <p class="empty-subtitle text-muted">
              {% trans "No roles have been defined for this tenant yet." %}
            </p>
          </div>
        </div>
      {% endif %}
    </div>
  </div>
</div>
{% endblock %}