{% extends "base.html" %}

{% block title %}Manage Users - National Medlab Cooperative{% endblock %}

{% block extra_css %}
<style>
.user-row:hover {
    background-color: var(--light-green) !important;
}
</style>
{% endblock %}

{% block content %}
<div class="d-flex justify-content-between align-items-center mb-4">
    <h2>Manage Users</h2>
    <span class="badge bg-primary">{{ users|length }} Total Users</span>
</div>

<div class="card">
    <div class="card-header">
        <h5 class="mb-0">User List</h5>
    </div>
    <div class="card-body">
        {% if users %}
            <div class="table-responsive">
                <table class="table table-hover">
                    <thead>
                        <tr>
                            <th>Reg. Number</th>
                            <th>Name</th>
                            <th>Email</th>
                            <th>Phone</th>
                            <th>Role</th>
                            <th>Verified</th>
                            <th>Joined</th>
                            <th>Actions</th>
                        </tr>
                    </thead>
                    <tbody>
                        {% for user in users %}
                        <tr class="user-row" onclick="window.location.href='{{ url_for('view_user_details', user_id=user.id) }}'" style="cursor: pointer;">
                            <td><strong>{{ user.registration_number }}</strong></td>
                            <td>{{ user.full_name }}</td>
                            <td>{{ user.email }}</td>
                            <td>{{ user.phone }}</td>
                            <td>
                                <span class="badge badge-{{ 'dark' if user.role == 'Super Admin' else 'warning' if user.role == 'Admin' else 'info' if user.role == 'Treasurer' else 'secondary' if user.role == 'Loan Officer' else 'primary' }}">
                                    {{ user.role }}
                                </span>
                            </td>
                            <td>
                                <span class="badge badge-{{ 'success' if user.is_verified else 'warning' }}">
                                    {{ 'Yes' if user.is_verified else 'No' }}
                                </span>
                            </td>
                            <td>{{ user.created_at.strftime('%d/%m/%Y') }}</td>
                            <td onclick="event.stopPropagation()">
                                <div class="btn-group btn-group-sm" role="group">
                                    <a href="{{ url_for('view_user_details', user_id=user.id) }}" class="btn btn-outline-info" title="View Details">
                                        <i class="fas fa-eye"></i>
                                    </a>
                                    <a href="{{ url_for('edit_user', user_id=user.id) }}" class="btn btn-outline-primary">
                                        <i class="fas fa-edit"></i>
                                    </a>
                                    <a href="{{ url_for('toggle_verification', user_id=user.id) }}" class="btn btn-outline-{{ 'warning' if user.is_verified else 'success' }}" title="{{ 'Unverify' if user.is_verified else 'Verify' }}">
                                        <i class="fas fa-{{ 'times' if user.is_verified else 'check' }}"></i>
                                    </a>
                                    {% if current_user.role == 'Super Admin' and user.id != current_user.id %}
                                    <a href="{{ url_for('delete_user', user_id=user.id) }}" class="btn btn-outline-danger" onclick="return confirm('Are you sure you want to delete {{ user.full_name }}?')">
                                        <i class="fas fa-trash"></i>
                                    </a>
                                    {% endif %}
                                </div>
                            </td>
                        </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>
        {% else %}
            <div class="text-center py-4">
                <i class="fas fa-users fa-3x text-muted mb-3"></i>
                <h5 class="text-muted">No users found</h5>
                <p class="text-muted">No users have registered yet.</p>
            </div>
        {% endif %}
    </div>
</div>

<div class="mt-3">
    <a href="{{ url_for('admin_dashboard') }}" class="btn btn-secondary">
        <i class="fas fa-arrow-left me-2"></i>Back to Dashboard
    </a>
</div>
{% endblock %}