{% extends 'superadmin/layout.twig' %}

{% block content %}
<div class="sa-header">
    <h1>Пользователи</h1>
</div>

{% for alert in get_alerts() %}
    <div class="alert alert-{{ alert.type }}">{{ alert.message }}</div>
{% endfor %}

<div class="sa-card">
    <div class="sa-card-body">
        <div id="users-table">
            {# Динамическая таблица #}
            {{ tableHtml|raw }}
            {# CSRF токен для AJAX запросов #}
            {{ csrf_field()|raw }}
        </div>
    </div>
</div>

<link rel="stylesheet" href="/assets/css/modules/data-table.css">
<script src="/assets/js/modules/DataTable.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function() {
    // Инициализация DataTable
    document.querySelectorAll('.data-table').forEach(function(container) {
        const id = container.id;
        const url = container.dataset.url;
        const perPage = parseInt(container.dataset.perPage) || 10;

        if (window.dataTables && window.dataTables[id]) {
            return;
        }

        const table = new DataTable(id, {
            url: url,
            perPage: perPage
        });

        window.dataTables = window.dataTables || {};
        window.dataTables[id] = table;
    });
});
</script>
{% endblock %}