{% extends "base.html" %}
{% block title %}Users - Formeleon{% endblock %}
{% block content %}
<div class="d-flex justify-content-between align-items-center mb-4">
    <h2><i class="bi bi-people me-2"></i> Users</h2>
</div>

<div class="card shadow-sm">
    <div class="card-header bg-light d-flex justify-content-between align-items-center">
        <h5 class="mb-0">All Users</h5>
        <div class="input-group" style="width: 300px;">
            <input type="text" class="form-control form-control-sm" id="searchInput" placeholder="Search users...">
        </div>
    </div>
    <div class="card-body p-0">
        {% if users %}
        <div class="table-responsive">
            <table class="table table-hover align-middle mb-0">
                <thead class="table-light">
                    <tr>
                        <th class="ps-3">Name</th>
                        <th>Email</th>
                        <th>Role</th>
                        <th>Tenants</th>
                        <th>Last Login</th>
                        <th class="text-end pe-3">Actions</th>
                    </tr>
                </thead>
                <tbody>
                    {% for u in users %}
                    <tr>
                        <td class="ps-3"><strong>{{ u.name }}</strong></td>
                        <td>{{ u.email }}</td>
                        <td>
                            {% if u.role.value == 'admin' %}
                                <span class="badge bg-danger">Admin</span>
                            {% elif u.role.value == 'tenant_admin' %}
                                <span class="badge bg-primary">Tenant Admin</span>
                            {% elif u.role.value == 'user' %}
                                <span class="badge bg-info text-dark">User</span>
                            {% else %}
                                <span class="badge bg-secondary">{{ u.role.value }}</span>
                            {% endif %}
                        </td>
                        <td>
                            <span class="badge bg-secondary rounded-pill">{{ u.tenants|length }}</span>
                        </td>
                        <td><small class="text-muted">{{ u.last_login.strftime('%Y-%m-%d %H:%M') if u.last_login else 'Never' }}</small></td>
                        <td class="text-end pe-3">
                            <div class="btn-group btn-group-sm">
                                <a href="{{ url_for('admin.view_user', user_id=u.id) }}" class="btn btn-outline-secondary" title="View"><i class="bi bi-eye"></i></a>
                                <a href="{{ url_for('admin.manage_user_tenants', user_id=u.id) }}" class="btn btn-outline-primary" title="Manage Tenants"><i class="bi bi-buildings"></i></a>
                                <form action="{{ url_for('admin.delete_user', user_id=u.id) }}" method="POST" class="d-inline" onsubmit="return confirm('Delete user {{ u.email }}?');">
                                    <input type="hidden" name="csrf_token" value="{{ csrf_token() if csrf_token else '' }}">
                                    <button type="submit" class="btn btn-outline-danger" title="Delete"><i class="bi bi-trash"></i></button>
                                </form>
                            </div>
                        </td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
        {% else %}
        <div class="text-center py-5 text-muted">
            <i class="bi bi-people fs-1 d-block mb-3"></i>
            <p>No users found.</p>
        </div>
        {% endif %}
    </div>
</div>
{% endblock %}
{% block extra_js %}
<script>
$(document).ready(function() {
    $('#searchInput').on('input', function() {
        const term = $(this).val().toLowerCase();
        $('tbody tr').each(function() {
            const text = $(this).text().toLowerCase();
            $(this).toggle(text.includes(term));
        });
    });
});
</script>
{% endblock %}