{% extends "base.html" %}

{% block title %}User Management{% endblock %}

{% block content %}
<div class="row mb-4 align-items-center">
    <div class="col">
        <h2><i class="bi bi-people-fill"></i> Internal User Management</h2>
        <p class="text-muted mb-0">Manage staff accounts (Admin, Supervisor, Inspector, Project Manager). For customer accounts, visit <a href="{{ url_for('customers.index') }}">Customer Management</a>.</p>
    </div>
    <div class="col-auto">
        <a href="{{ url_for('auth.create_user') }}" class="btn btn-primary">
            <i class="bi bi-plus-circle"></i> Add User
        </a>
    </div>
</div>

<div class="card shadow-sm">
    <div class="card-body">
        <div class="table-responsive">
            <table class="table table-hover">
                <thead class="table-light">
                    <tr>
                        <th>Username</th>
                        <th>Full Name</th>
                        <th>Email</th>
                        <th>Role</th>
                        <th>Created</th>
                        <th>Status</th>
                        <th width="180">Actions</th>
                    </tr>
                </thead>
                <tbody>
                    {% for user in users %}
                    <tr class="{{ 'table-secondary text-muted' if not user.active else '' }}">
                        <td><strong>{{ user.username }}</strong></td>
                        <td>{{ user.full_name or '—' }}</td>
                        <td>{{ user.email }}</td>
                        <td>
                            <span class="badge bg-{% if user.role == 'admin' %}danger{% elif user.role == 'supervisor' %}warning{% elif user.role == 'project_manager' %}primary{% elif user.role == 'customer' %}success{% else %}info{% endif %}">
                                {{ user.role.replace('_',' ')|title }}
                            </span>
                        </td>
                        <td>{{ user.created_at.strftime('%Y-%m-%d') }}</td>
                        <td>
                            {% if user.active %}
                            <span class="badge bg-success">Active</span>
                            {% else %}
                            <span class="badge bg-secondary">Disabled</span>
                            {% endif %}
                        </td>
                        <td>
                            <a href="{{ url_for('auth.edit_user', user_id=user.id) }}" class="btn btn-sm btn-outline-primary" title="Edit">
                                <i class="bi bi-pencil"></i>
                            </a>
                            {% if user.id != current_user.id %}
                            <form method="POST" action="{{ url_for('auth.toggle_active', user_id=user.id) }}" class="d-inline">
                                <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
                                <button type="submit"
                                        class="btn btn-sm {{ 'btn-outline-secondary' if user.active else 'btn-outline-success' }}"
                                        title="{{ 'Disable' if user.active else 'Enable' }}"
                                        onclick="return confirm('{{ 'Disable' if user.active else 'Enable' }} user {{ user.username }}?')">
                                    <i class="bi bi-{{ 'person-slash' if user.active else 'person-check' }}"></i>
                                </button>
                            </form>
                            <form method="POST" action="{{ url_for('auth.delete_user', user_id=user.id) }}" class="d-inline" onsubmit="return confirm('Delete this user?');">
                                <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
                                <button type="submit" class="btn btn-sm btn-outline-danger" title="Delete">
                                    <i class="bi bi-trash"></i>
                                </button>
                            </form>
                            {% endif %}
                        </td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
    </div>
</div>
{% endblock %}