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

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

{% block main %}
    {% if kpis.pending > 0 %}
        <div class="alert alert-warning d-flex align-items-center justify-content-between flex-wrap gap-2">
            <span><span class="fa fa-inbox me-2"></span><strong>{{ kpis.pending }}</strong> proposition(s) en attente de modération.</span>
            <a class="btn btn-sm btn-warning" href="{{ ea_url().setController('App\\Controller\\Admin\\BookRequestCrudController').setAction('index').generateUrl() }}">Traiter</a>
        </div>
    {% endif %}

    <div class="row">
        {% set cards = [
            { label: 'Utilisateurs', value: kpis.users, icon: 'fa-users' },
            { label: 'Livres', value: kpis.works, icon: 'fa-book' },
            { label: 'Critiques', value: kpis.reviews, icon: 'fa-comment' },
            { label: 'Listes', value: kpis.lists, icon: 'fa-layer-group' },
            { label: 'Propositions en attente', value: kpis.pending, icon: 'fa-inbox' },
        ] %}
        {% for c in cards %}
            <div class="col-6 col-xl-4 mb-3">
                <div class="card h-100">
                    <div class="card-body d-flex align-items-center">
                        <span class="fa {{ c.icon }} fa-2x text-muted me-3"></span>
                        <div>
                            <div class="fs-2 fw-bold">{{ c.value }}</div>
                            <div class="text-muted small">{{ c.label }}</div>
                        </div>
                    </div>
                </div>
            </div>
        {% endfor %}
    </div>

    <div class="row mt-2">
        <div class="col-lg-6 mb-3">
            <div class="card h-100">
                <div class="card-header fw-bold"><span class="fa fa-user-plus me-2 text-muted"></span>Derniers inscrits</div>
                <ul class="list-group list-group-flush">
                    {% for u in recentUsers %}
                        <li class="list-group-item d-flex align-items-center gap-2">
                            {% if u.avatarPath %}
                                <img src="/covers/{{ u.avatarPath }}" alt="" style="height:32px;width:32px;border-radius:50%;object-fit:cover">
                            {% else %}
                                <span class="d-inline-flex align-items-center justify-content-center text-muted" style="height:32px;width:32px;border-radius:50%;background:rgba(128,128,128,.2)">{{ (u.displayName ?: u.userIdentifier)|first|upper }}</span>
                            {% endif %}
                            <span class="flex-grow-1 text-truncate">{{ u.displayName ?: u.userIdentifier }}</span>
                            <small class="text-muted">{{ u.createdAt ? u.createdAt|date('d/m') : '' }}</small>
                        </li>
                    {% else %}
                        <li class="list-group-item text-muted">Aucun</li>
                    {% endfor %}
                </ul>
            </div>
        </div>

        <div class="col-lg-6 mb-3">
            <div class="card h-100">
                <div class="card-header fw-bold"><span class="fa fa-comment me-2 text-muted"></span>Dernières critiques</div>
                <ul class="list-group list-group-flush">
                    {% for r in recentReviews %}
                        <li class="list-group-item">
                            <div class="d-flex justify-content-between gap-2">
                                <strong class="text-truncate">{{ r.work.title }}</strong>
                                <small class="text-muted text-nowrap">{{ r.author.displayName ?? r.author.userIdentifier }}</small>
                            </div>
                            <div class="text-muted small text-truncate">{{ r.body }}</div>
                        </li>
                    {% else %}
                        <li class="list-group-item text-muted">Aucune</li>
                    {% endfor %}
                </ul>
            </div>
        </div>
    </div>
{% endblock %}