{% extends 'administration/base.html.twig' %}

{% block title %}{{ 'admin.users_management'|trans }}{% endblock %}

{% block body %}
    {% set canUserCreate = has_permission('ALLOW_USER_CREATE', app.user) %}
    {% set canUserEdit = has_permission('ALLOW_USER_EDIT', app.user) %}
    {% set canUserDelete = has_permission('ALLOW_USER_DELETE', app.user) %}
    <div class="container-fluid">
        <div class="row mb-3">
            <div class="col-12">
                <div class="admin-card p-4">
                    <div class="d-flex flex-column flex-lg-row justify-content-between align-items-start gap-3">
                        <div>
                            <h2 class="gradient-text fw-bold mb-2">
                                <i class="bi bi-people-fill me-2"></i>
                                {{ 'admin.users_management'|trans }}
                            </h2>
                            <p class="text-muted mb-0">{{ 'admin.users_list_hint'|trans }}</p>
                        </div>
                        {% if canUserCreate %}
                        <a href="{{ path('admin_new_user') }}" class="btn btn-success">
                            <i class="bi bi-person-plus me-1"></i>
                            {{ 'admin.create_user'|trans }}
                        </a>
                        {% endif %}
                    </div>
                </div>
            </div>
        </div>

        <div class="row mb-3">
            <div class="col-12">
                <div class="admin-card p-3">
                    <form method="get" action="{{ path('admin_users') }}" class="row g-2 g-lg-3 align-items-end">
                        <div class="col-12 col-md-8 col-xl-6">
                            <label for="searchInput" class="form-label small text-muted mb-1">{{ 'admin.search'|trans }}</label>
                            <div class="input-group">
                                <span class="input-group-text"><i class="bi bi-search"></i></span>
                                <input type="text" id="searchInput" name="search" class="form-control"
                                       placeholder="{{ 'admin.search_placeholder'|trans }}" value="{{ search }}">
                            </div>
                        </div>
                        <div class="col-12 col-md-4 col-xl-3 d-flex gap-2">
                            <button type="submit" class="btn btn-primary flex-grow-1">
                                <i class="bi bi-funnel me-1"></i>{{ 'admin.search_button'|trans }}
                            </button>
                            <a href="{{ path('admin_users') }}" class="btn btn-outline-secondary" title="{{ 'admin.users_reset_filters'|trans }}">
                                <i class="bi bi-x-lg"></i>
                            </a>
                        </div>
                    </form>
                </div>
            </div>
        </div>

        {% if users|length > 0 %}
            <div class="row">
                <div class="col-12">
                    <div class="admin-card p-0 overflow-hidden">
                        <div class="table-responsive">
                            <table class="table table-hover table-striped align-middle mb-0">
                                <thead class="table-light">
                                    <tr>
                                        <th scope="col" class="ps-4">{{ 'admin.users_table_user'|trans }}</th>
                                        <th scope="col" class="d-none d-md-table-cell">{{ 'admin.users_table_email'|trans }}</th>
                                        <th scope="col" class="d-none d-lg-table-cell">{{ 'admin.users_table_roles'|trans }}</th>
                                        <th scope="col" class="d-none d-xl-table-cell text-nowrap">{{ 'admin.users_table_created'|trans }}</th>
                                        <th scope="col" class="text-end pe-4" style="width: 1%;">{{ 'admin.actions'|trans }}</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    {% for user in users %}
                                        <tr>
                                            <td class="ps-4">
                                                <div class="fw-semibold">
                                                    {{ user.username }}
                                                    {% if app.user and user.id == app.user.id %}
                                                        <span class="badge bg-info ms-2">{{ 'admin.you'|trans }}</span>
                                                    {% endif %}
                                                </div>
                                                <div class="d-md-none small text-muted mt-1">
                                                    <i class="bi bi-envelope me-1"></i>{{ user.email }}
                                                </div>
                                                <div class="d-lg-none small mt-1">
                                                    {% for role in user.rolesNew %}
                                                        <span class="badge bg-light text-dark border me-1 mb-1">{{ role.name }}</span>
                                                    {% else %}
                                                        <span class="text-muted">-</span>
                                                    {% endfor %}
                                                </div>
                                            </td>
                                            <td class="d-none d-md-table-cell small">
                                                <a href="mailto:{{ user.email }}" class="text-decoration-none">{{ user.email }}</a>
                                            </td>
                                            <td class="d-none d-lg-table-cell">
                                                {% for role in user.rolesNew %}
                                                    <span class="badge bg-secondary me-1">{{ role.name }}</span>
                                                {% else %}
                                                    <span class="text-muted small">-</span>
                                                {% endfor %}
                                            </td>
                                            <td class="d-none d-xl-table-cell small text-muted text-nowrap">
                                                {{ user.createdAt ? user.createdAt|date('d.m.Y H:i') : '-' }}
                                            </td>
                                            <td class="text-end pe-4">
                                                <div class="btn-group btn-group-sm">
                                                    {% if canUserEdit %}
                                                    <a href="{{ path('admin_edit_user', {id: user.id}) }}" class="btn btn-outline-primary" title="{{ 'admin.edit'|trans }}">
                                                        <i class="bi bi-pencil"></i>
                                                    </a>
                                                    {% endif %}
                                                    {% if canUserDelete %}
                                                    <button type="button" class="btn btn-outline-danger" title="{{ 'admin.delete'|trans }}"
                                                            onclick="handleDeleteUser('{{ user.id }}', '{{ user.username|e('js') }}')">
                                                        <i class="bi bi-trash"></i>
                                                    </button>
                                                    {% endif %}
                                                </div>
                                            </td>
                                        </tr>
                                    {% endfor %}
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>

            <div class="row mt-3">
                <div class="col-12">
                    {% include 'administration/pagination.html.twig' with {
                        'paginationPath': 'admin_users',
                        'totalPages': totalPages,
                        'currentPage': currentPage,
                        'search': search
                    } %}
                </div>
            </div>
        {% else %}
            <div class="row">
                <div class="col-12">
                    <div class="empty-state admin-card py-5">
                        <div class="empty-state-icon"><i class="bi bi-people"></i></div>
                        <h4 class="text-muted mb-2">{{ 'admin.no_users_found'|trans }}</h4>
                        <p class="text-muted mb-4">{{ 'admin.users_empty_filtered'|trans }}</p>
                        <div class="d-flex flex-wrap gap-2 justify-content-center">
                            <a href="{{ path('admin_users') }}" class="btn btn-outline-primary">{{ 'admin.users_reset_filters'|trans }}</a>
                            {% if canUserCreate %}
                            <a href="{{ path('admin_new_user') }}" class="btn btn-primary">
                                <i class="bi bi-person-plus me-1"></i>{{ 'admin.create_user'|trans }}
                            </a>
                            {% endif %}
                        </div>
                    </div>
                </div>
            </div>
        {% endif %}
    </div>

    <script>
        async function handleDeleteUser(userId, username) {
            const confirmed = await showDeleteConfirm(`{{ 'admin.user.delete_confirm_prefix'|trans }} "${username}"`);
            
            if (confirmed) {
                window.location.href = '{{ path('admin_delete_user', {id: '__ID__'}) }}'.replace('__ID__', userId);
            }
        }
    </script>
{% endblock %}