{% extends "base.html" %}
{% block title %}Users · WageWise Neo{% endblock %}
{% block content %}

<div class="page-header">
    <div>
        <div class="eyebrow">Setup</div>
        <h1>Users</h1>
    </div>
    <a href="{{ url_for('user_new') }}" class="btn btn-primary">+ Add User</a>
</div>

<div class="panel">
    <p style="margin-bottom:16px;">
        Roles control what each user can do:
        <strong>Admin</strong> — full access including user management ·
        <strong>HR</strong> — employees, attendance, leave ·
        <strong>Accountant</strong> — payroll runs, reports, exports ·
        <strong>Viewer</strong> — read-only everywhere
    </p>
    <table class="ledger-table">
        <thead>
            <tr>
                <th>Name</th>
                <th>Username</th>
                <th>Role</th>
                <th>Status</th>
                <th></th>
            </tr>
        </thead>
        <tbody>
            {% for u in users %}
            <tr>
                <td class="name-cell">{{ u.full_name }}</td>
                <td style="font-family:var(--font-data); font-size:13px;">{{ u.username }}</td>
                <td>
                    <span class="stamp {{ 'active' if u.role == 'admin' else 'neutral' }}">
                        {{ u.role }}
                    </span>
                </td>
                <td>
                    {% if u.active %}
                    <span class="stamp active">Active</span>
                    {% else %}
                    <span class="stamp inactive">Inactive</span>
                    {% endif %}
                </td>
                <td>
                    {% if u.id != current_user.id %}
                    <a href="{{ url_for('user_edit', user_id=u.id) }}" class="btn btn-secondary" style="font-size:12px;padding:2px 10px;">Edit</a>
                    {% else %}
                    <a href="{{ url_for('profile') }}" class="btn btn-secondary" style="font-size:12px;padding:2px 10px;">My Profile</a>
                    {% endif %}
                </td>
            </tr>
            {% endfor %}
        </tbody>
    </table>
</div>

{% endblock %}