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

{% block card %}
{% comment %}
    Render into the ``card`` slot — works under ``conjunto/app_base.html``
    (which exposes ``card`` as the inner content slot) AND under medux's
    ``common/administration.html`` (where ``card`` lands inside the
    2-column admin pane on the right).
{% endcomment %}
<div class="card">
    <div class="card-header">
      <h3 class="card-title d-flex align-items-center">
        {% if view.icon %}<i class="ti ti-{{ view.icon }} me-2"></i>{% endif %}{% 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">
                      {% avatar u size="xs" extra_classes="me-2" %}
                      {{ 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 cj-row-actions">
                    <button type="button"
                            class="btn 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>
{% endblock %}