{% 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 "Users" %}
      </h3>
      <div class="card-actions">
        <button type="button"
                class="btn btn-primary"
                hx-get="{% url urls.user_add %}"
                hx-target="#dialog"
                hx-swap="innerHTML">
          <i class="ti ti-plus"></i>{% trans "Add user" %}
        </button>
      </div>
    </div>
    <div id="tenant-users-table"
         hx-get="{{ request.path }}"
         hx-trigger="tenant_users:changed from:body"
         hx-swap="outerHTML"
         hx-select="#tenant-users-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 "Email" %}</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 %}
                      {% if not u.is_active %}
                        <span class="badge bg-red-lt ms-2">{% trans "Inactive" %}</span>
                      {% endif %}
                    </div>
                  </td>
                  <td>{{ u.get_full_name|default:"—" }}</td>
                  <td>{{ u.email|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">
                    <div class="btn-list flex-nowrap">
                      <button type="button"
                              class="btn btn-ghost-secondary btn-icon"
                              title="{% trans 'Edit' %}"
                              hx-get="{% url urls.user_edit pk=u.pk %}"
                              hx-target="#dialog"
                              hx-swap="innerHTML">
                        <i class="ti ti-edit"></i>
                      </button>
                      {% if not u.is_superuser %}
                        <button type="button"
                                class="btn btn-ghost-danger btn-icon"
                                title="{% trans 'Remove from tenant' %}"
                                hx-get="{% url urls.user_remove pk=u.pk %}"
                                hx-target="#dialog"
                                hx-swap="innerHTML">
                          <i class="ti ti-user-minus"></i>
                        </button>
                      {% endif %}
                    </div>
                  </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 members of this tenant." %}
            </p>
          </div>
        </div>
      {% endif %}
    </div>
</div>
{% endblock %}