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

{% block content %}
<div class="container-xl">
  <div class="card">
    <div class="card-header">
      <h3 class="card-title">{% trans "User roles" %}</h3>
    </div>
    <div id="user-roles-table"
         hx-get="{{ request.path }}"
         hx-trigger="user_roles:changed from:body, tenant_users:changed from:body"
         hx-swap="outerHTML"
         hx-select="#user-roles-table">
      {% if users %}
        <div class="table-responsive">
          <table class="table table-vcenter card-table">
            <thead>
              <tr>
                <th>{% trans "User" %}</th>
                <th>{% trans "Name" %}</th>
                <th>{% trans "Roles" %}</th>
                <th class="w-1"></th>
              </tr>
            </thead>
            <tbody>
              {% for u in users %}
                <tr>
                  <td>
                    <div class="d-flex align-items-center">
                      <span class="avatar avatar-xs me-2">{{ u.username|slice:":2"|upper }}</span>
                      {{ u.username }}
                      {% if u.is_superuser %}
                        <span class="badge bg-yellow ms-2">{% trans "Superuser" %}</span>
                      {% endif %}
                    </div>
                  </td>
                  <td>{{ u.get_full_name|default:"—" }}</td>
                  <td>
                    {% for role in u.current_roles %}
                      <span class="badge bg-blue-lt me-1">{{ role }}</span>
                    {% empty %}
                      <span class="text-muted">{% trans "No roles" %}</span>
                    {% endfor %}
                  </td>
                  <td class="text-end">
                    <button type="button"
                            class="btn btn-sm btn-ghost-secondary btn-icon"
                            title="{% trans 'Manage roles' %}"
                            aria-label="{% trans 'Manage roles' %}"
                            hx-get="{% url urls.user_role_manage pk=u.pk %}"
                            hx-target="#dialog"
                            hx-swap="innerHTML">
                      <i class="ti ti-shield-lock"></i>
                    </button>
                  </td>
                </tr>
              {% endfor %}
            </tbody>
          </table>
        </div>
      {% else %}
        <div class="card-body">
          <div class="empty">
            <p class="empty-title">{% trans "No users" %}</p>
            <p class="empty-subtitle text-muted">
              {% trans "No users are currently reachable within this tenant." %}
            </p>
          </div>
        </div>
      {% endif %}
    </div>
  </div>
</div>
{% endblock %}