{% extends "base.html" %}

{% block title %}Manage Users{% endblock %}

{% block content %}
<h1>Manage Users</h1>

<table>
    <thead>
        <tr>
            <th>Username</th>
            <th>Display Name</th>
            <th>Roles</th>
            <th>Status</th>
            <th>Last Login</th>
            <th>Actions</th>
        </tr>
    </thead>
    <tbody>
        {% for user in users %}
        <tr>
            <td>{{ user.sierra_login }}</td>
            <td>{{ user.display_name or "-" }}</td>
            <td>
                {% for role in user.roles %}
                <span style="background: #e0e0e0; padding: 2px 6px; border-radius: 3px; margin-right: 4px;">{{ role }}</span>
                {% endfor %}
            </td>
            <td>
                {% if user.is_active %}
                <span style="color: green;">Active</span>
                {% else %}
                <span style="color: red;">Inactive</span>
                {% endif %}
            </td>
            <td>{{ user.last_login_at or "Never" }}</td>
            <td>
                <a href="/-/sierra-auth/admin/users/{{ user.id }}">Edit</a>
            </td>
        </tr>
        {% endfor %}
    </tbody>
</table>

<style>
table {
    border-collapse: collapse;
    width: 100%;
    margin-top: 1em;
}
th, td {
    border: 1px solid #ddd;
    padding: 8px;
    text-align: left;
}
th {
    background-color: #f5f5f5;
}
tr:hover {
    background-color: #f9f9f9;
}
</style>
{% endblock %}