{% extends "admin_layout.html" %}

{% block title %}{{ t('entities.users','Users') }} - {{ app_settings.title if app_settings else t('app.name','Survey Manager') }}{% endblock %}

{% block admin_content %}
<div class="d-flex justify-content-between align-items-center mb-4">
    <h1 class="h3">{{ t('users.management','Users Management') }}</h1>
    <a href="{{ url_for('user.create') }}" class="btn btn-primary">
        <i class="fas fa-plus me-2"></i>{{ t('users.add_user','Add User') }}
    </a>
</div>

<div class="card">
    <div class="card-header">
        <h5 class="mb-0">
            <i class="fas fa-users me-2"></i>{{ t('users.all_users','All Users') }} ({{ users|length }})
        </h5>
    </div>
    <div class="card-body">
        {% if users %}
            <div class="table-responsive">
                <table class="table table-hover data-table">
                    <thead>
                        <tr>
                            <th>ID</th>
                            <th>{{ t('users.avatar','Avatar') }}</th>
                            <th>{{ t('users.name','Name') }}</th>
                            <th>{{ t('common.email','Email') }}</th>
                            <th>{{ t('profile.role','Role') }}</th>
                            <th>{{ t('common.created','Created') }}</th>
                            <th>{{ t('common.actions','Actions') }}</th>
                        </tr>
                    </thead>
                    <tbody>
                        {% for user in users %}
                        <tr>
                            <td>{{ user.id }}</td>
                            <td>
                                <img src="https://ui-avatars.com/api/?name={{ user.name }}&background=007bff&color=fff&size=40" 
                                     class="rounded-circle" width="40" height="40" alt="{{ user.name }}">
                            </td>
                            <td>
                                <div class="fw-semibold">{{ user.name }}</div>
                            </td>
                            <td>{{ user.email }}</td>
                            <td>
                                <span class="badge bg-{{ 'primary' if user.role == 'admin' else 'secondary' }}">
                                    {{ user.role|title }}
                                </span>
                            </td>
                            <td>
                                <small class="text-muted">
                                    {{ user.created_at.strftime('%b %d, %Y') }}
                                </small>
                            </td>
                            <td>
                                <div class="btn-group btn-group-sm" role="group">
                                    <a href="{{ url_for('user.edit', user_id=user.id) }}" 
                                       class="btn btn-outline-primary" 
                                       data-bs-toggle="tooltip" title="{{ t('users.edit_user','Edit User') }}">
                                        <i class="fas fa-edit"></i>
                                    </a>
                                    <a href="{{ url_for('user.delete', user_id=user.id) }}" 
                                       class="btn btn-outline-danger btn-delete" 
                                       data-name="{{ user.name }}"
                                       data-bs-toggle="tooltip" title="{{ t('users.delete_user','Delete User') }}">
                                        <i class="fas fa-trash"></i>
                                    </a>
                                </div>
                            </td>
                        </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>
        {% else %}
            <div class="text-center py-5">
                <i class="fas fa-users fa-3x text-muted mb-3"></i>
                <h5 class="text-muted">{{ t('dashboard.no_users','No users found') }}</h5>
                <p class="text-muted">{{ t('users.create_first','Get started by creating your first user.') }}</p>
                <a href="{{ url_for('user.create') }}" class="btn btn-primary">
                    <i class="fas fa-plus me-2"></i>{{ t('users.add_first','Add First User') }}
                </a>
            </div>
        {% endif %}
    </div>
</div>

<!-- Statistics Cards -->
<div class="row mt-4">
    <div class="col-12 col-md-4">
        <div class="card bg-primary text-white">
            <div class="card-body">
                <div class="d-flex justify-content-between align-items-center">
                    <div>
                        <h6 class="card-title mb-0">{{ t('users.total_users','Total Users') }}</h6>
                        <h3 class="mb-0">{{ users|length }}</h3>
                    </div>
                    <i class="fas fa-users fa-2x opacity-75"></i>
                </div>
            </div>
        </div>
    </div>
    <div class="col-12 col-md-4">
        <div class="card bg-success text-white">
            <div class="card-body">
                <div class="d-flex justify-content-between align-items-center">
                    <div>
                        <h6 class="card-title mb-0">{{ t('users.admins','Admins') }}</h6>
                        <h3 class="mb-0">{{ users|selectattr('role', 'equalto', 'admin')|list|length }}</h3>
                    </div>
                    <i class="fas fa-user-shield fa-2x opacity-75"></i>
                </div>
            </div>
        </div>
    </div>
    <div class="col-12 col-md-4">
        <div class="card bg-info text-white">
            <div class="card-body">
                <div class="d-flex justify-content-between align-items-center">
                    <div>
                        <h6 class="card-title mb-0">{{ t('users.regular_users','Regular Users') }}</h6>
                        <h3 class="mb-0">{{ users|selectattr('role', 'equalto', 'user')|list|length }}</h3>
                    </div>
                    <i class="fas fa-user fa-2x opacity-75"></i>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
$(document).ready(function() {
    // Custom configuration for users DataTable
    if ($('.data-table').length > 0) {
        // Destroy existing if any and reinitialize with custom config
        if ($.fn.DataTable.isDataTable('.data-table')) {
            $('.data-table').DataTable().destroy();
        }
        
        $('.data-table').DataTable({
            responsive: true,
            order: [[0, 'desc']],
            columnDefs: [
                { orderable: false, targets: [1, 6] }, // Disable sorting for avatar and actions
                { searchable: false, targets: [1, 6] }  // Disable search for avatar and actions
            ],
            language: {
                search: "{{ t('datatable.search_users','Search users:') }}",
                lengthMenu: "{{ t('datatable.length_menu','Show _MENU_ users per page') }}",
                info: "{{ t('datatable.info','Showing _START_ to _END_ of _TOTAL_ users') }}",
                emptyTable: "{{ t('datatable.empty','No users available') }}"
            },
            pageLength: 10,
            lengthMenu: [[10, 25, 50, -1], [10, 25, 50, "All"]]
        });
    }
});
</script>
{% endblock %}