{% extends 'base_admin.html.twig' %}

{% block body %}
    <div class="flex items-center justify-between mb-2">
        <h2 class="h2">Statistiques du club</h2>
    </div>

    <div class="tabs-container">
        <ul class="tabs">
            <li class="tab active" data-tab="licences">Licences</li>
            <li class="tab" data-tab="genres">Genres & Catégories</li>
            <li class="tab" data-tab="stages">Stages</li>
            <li class="tab" data-tab="manifestations">Manifestations</li>
        </ul>

        <div class="tab-content active" id="tab-licences">
            <stat-licence-type-register></stat-licence-type-register>
            <stat-role></stat-role>
        </div>

        <div class="tab-content" id="tab-genres">
            <stat-age-genre></stat-age-genre>
            <stat-category-genre></stat-category-genre>
        </div>

        <div class="tab-content" id="tab-stages">
            <stat-stage-participants></stat-stage-participants>
        </div>

        <div class="tab-content" id="tab-manifestations">
            <stat-manifestation-participants></stat-manifestation-participants>
        </div>
    </div>
{% endblock %}
{% block javascripts_end %}
<script>
    document.querySelectorAll('.tab').forEach(tab => {
        tab.addEventListener('click', () => {
            document.querySelectorAll('.tab').forEach(t => t.classList.remove('active'));
            document.querySelectorAll('.tab-content').forEach(c => c.classList.remove('active'));

            tab.classList.add('active');
            const targetId = tab.dataset.tab;
            document.getElementById('tab-' + targetId)?.classList.add('active');
        });
    });
</script>
{% endblock %}