{% extends '@EasyAdmin/page/content.html.twig' %}

{% block content_title %}Tableau de bord Global{% endblock %}

{% block main %}
    <h3 class="mb-3">Contenu & Interaction</h3>
    <div class="row mb-5">
        {{ _self.stat_card('Articles', stats.articles, 'bg-primary', 'fas fa-newspaper') }}
        {{ _self.stat_card('Projets', stats.projets, 'bg-success', 'fas fa-code') }}
        {{ _self.stat_card('Commentaires', stats.commentaires, 'bg-warning', 'fas fa-comments') }}
        {{ _self.stat_card('Veille Tech', stats.veille, 'bg-secondary', 'fas fa-microchip') }}
    </div>

    <h3 class="mb-3">Mon Parcours (CV)</h3>
    <div class="row">
        {{ _self.stat_card('Compétences', stats.competences, 'bg-info', 'fas fa-lightbulb') }}
        {{ _self.stat_card('Expériences', stats.experiences, 'bg-dark', 'fas fa-briefcase') }}
        {{ _self.stat_card('Formations', stats.formations, 'bg-danger', 'fas fa-graduation-cap') }}
        {{ _self.stat_card('Utilisateurs', stats.users, 'bg-muted', 'fas fa-users') }}
    </div>

    {# Petite macro Twig pour éviter de répéter le code des cartes #}
    {% macro stat_card(title, count, color, icon) %}
        <div class="col-md-3">
            <div class="card {{ color }} text-white mb-4 shadow">
                <div class="card-body">
                    <div class="d-flex justify-content-between align-items-center">
                        <div>
                            <h5 class="card-title mb-0">{{ title }}</h5>
                            <h2 class="display-4 fw-bold mb-0">{{ count }}</h2>
                        </div>
                        <i class="{{ icon }} fa-3x opacity-50"></i>
                    </div>
                </div>
            </div>
        </div>
    {% endmacro %}
{% endblock %}