{% extends 'core/base.html' %}
{% block title %}Users & Roles | Killian{% endblock %}
{% block content %}
<div class="page-head">
    <div>
        <h1>Users &amp; Roles</h1>
        <p>Manage Killian accounts, role assignments, organization access, and MFA enrollment.</p>
    </div>
    <div class="page-head-actions">
        <a class="button" href="{% url 'user_create' %}">New user</a>
        {% if can_manage_roles %}
            <a class="button secondary" href="{% url 'role_list' %}">Manage Roles</a>
        {% endif %}
        <a class="button secondary" href="{% url 'user_manage' %}">Manage Users</a>
    </div>
</div>

<div class="role-summary-grid">
    {% for role in roles_summary %}
        <div class="role-summary-card{% if role.system_key == 'admin' %} role-summary-admin{% elif role.system_key == 'management' %} role-summary-management{% elif role.system_key == 'user' %} role-summary-user{% endif %}">
            <div style="display:flex;align-items:center;justify-content:space-between;gap:12px;">
                <strong>{{ role.name }}</strong>
                <span class="muted">{{ role.user_count }} user{{ role.user_count|pluralize }}</span>
            </div>
            <span>{{ role.description|default:'No role description has been entered.' }}</span>
            <small class="muted" style="margin-top:8px;display:block;">
                {% if role.is_protected %}Built-in role{% else %}Custom role{% endif %}
            </small>
        </div>
    {% empty %}
        <div class="empty-state">No roles are configured.</div>
    {% endfor %}
</div>

<div class="table user-table js-sortable-list">
    <div class="user-row user-row-head">
        <span><button type="button" class="module-table-sort js-list-sort" data-sort-key="user" data-sort-direction="none">User <span class="module-table-sort-indicator" aria-hidden="true">↕</span></button></span>
        <span><button type="button" class="module-table-sort js-list-sort" data-sort-key="role" data-sort-direction="none">Role <span class="module-table-sort-indicator" aria-hidden="true">↕</span></button></span>
        <span><button type="button" class="module-table-sort js-list-sort" data-sort-key="organizations" data-sort-direction="none">Organizations <span class="module-table-sort-indicator" aria-hidden="true">↕</span></button></span>
        <span><button type="button" class="module-table-sort js-list-sort" data-sort-key="status" data-sort-direction="none">Status <span class="module-table-sort-indicator" aria-hidden="true">↕</span></button></span>
        <span>Actions</span>
    </div>
    {% for row in user_rows %}
        <div
            class="user-row js-list-sort-row"
            data-sort-user="{{ row.user.get_full_name|default:row.user.username|escape }}"
            data-sort-role="{{ row.role|escape }}"
            data-sort-organizations="{% if row.all_organizations %}All organizations{% else %}{% for membership in row.organizations %}{{ membership.organization.name|escape }} {% endfor %}{% endif %}"
            data-sort-status="{% if row.user.is_active %}Active{% else %}Disabled{% endif %}"
        >
            <div class="user-identity">
                <div>N: <strong>{{ row.user.get_full_name|default:row.user.username }}</strong></div>
                <div>E: {% if row.user.email %}{{ row.user.email }}{% else %}<span class="muted">No email address</span>{% endif %}</div>
                <div>U: {{ row.user.username }}</div>
            </div>
            <div>
                <span class="role-badge{% if row.role_obj.system_key == 'admin' %} role-badge-admin{% elif row.role_obj.system_key == 'management' %} role-badge-management{% elif row.role_obj.system_key == 'user' %} role-badge-user{% endif %}">
                    {{ row.role }}
                </span>
            </div>
            <div>
                {% if row.all_organizations %}
                    <span class="muted">All organizations</span>
                {% else %}
                    {% for membership in row.organizations %}
                        <span class="org-pill">{{ membership.organization.name }}</span>
                    {% empty %}
                        <span class="muted">No organizations assigned</span>
                    {% endfor %}
                {% endif %}
            </div>
            <div>
                {% if row.user.is_active %}
                    <span class="status-good">Active</span>
                {% else %}
                    <span class="status-muted">Disabled</span>
                {% endif %}
            </div>
            <div class="user-actions">
                {% if row.editable %}
                    <a class="button secondary small-button" href="{% url 'user_edit' row.user.pk %}">Edit</a>
                    {% if row.user.email %}
                        <form method="post" action="{% url 'user_resend_invite' row.user.pk %}" data-confirm="Send a new account setup link to {{ row.user.email }}?">
                            {% csrf_token %}
                            <button class="button secondary small-button" type="submit">Send invite</button>
                        </form>
                    {% endif %}
                    <form method="post" action="{% url 'user_reset_mfa' row.user.pk %}" data-confirm="Reset MFA for {{ row.user.username }}? They will be required to enroll again at next login.">
                        {% csrf_token %}
                        <button class="button secondary small-button" type="submit">Reset MFA</button>
                    </form>
                {% else %}
                    <span class="muted">Protected</span>
                {% endif %}
            </div>
        </div>
    {% empty %}
        <div class="empty-state">No users found.</div>
    {% endfor %}
</div>
{% endblock %}