{% extends '@Commercial/commercial/layout.html.twig' %}

{% block commercial_title %}Les tops{% endblock %}

{% block stylesheets %}
    {{ parent() }}
    <style>
        .tops-page{--tops-accent:#5d5fef}.tops-hero{background:linear-gradient(135deg,#161b33,#303669);color:#fff;border-radius:1.25rem;padding:1.7rem}.tops-card{border:0;border-radius:1rem;box-shadow:0 .25rem 1.25rem rgba(28,39,60,.07)}.tops-rank{display:inline-grid;place-items:center;width:2rem;height:2rem;border-radius:50%;background:#eef0f7;font-weight:700}.tops-rank.is-podium{background:#fff1c2;color:#8a6200}.tops-share{height:.4rem;background:#edf0f5}.tops-share .progress-bar{background:var(--tops-accent)}.tops-kpi{border-left:.25rem solid var(--tops-accent)}.tops-table th{font-size:.74rem;text-transform:uppercase;letter-spacing:.035em;color:#748095;white-space:nowrap}.tops-table td{vertical-align:middle}.tops-entity{font-weight:600;color:#252b42}.tops-muted-panel{background:#f8f9fc;border:1px dashed #cbd2df;border-radius:.8rem}
    </style>
{% endblock %} 

{% block commercial_content %}
<div class="container-fluid py-4 tops-page">

    <header class="mileage-page-heading">
        <div class="d-flex align-items-center gap-3">
            <div>
                <h1 class="capsule-titre">Les tops</h1>
                <p class="capsule-sous-titre">Découvrez les clients, fournisseurs, catégories et produits les plus importants.</p>
            </div>
        </div>
        <div class="mileage-heading-actions">
            <span class="badge bg-white text-dark fs-6 px-3 py-2">{{ period.label }} · Top {{ filter.limit }}</span>
        </div>
    </header>

    {% include '@Commercial/commercial/tops/_filters.html.twig' %}
    {% include '@Commercial/commercial/tops/_summary.html.twig' %}

    <div class="row g-4">
        {% if showRevenue %}<div class="col-12">{% include '@Commercial/commercial/tops/_clients.html.twig' %}</div>{% endif %}
        {% if showExpenses %}
            <div class="col-12 col-xxl-6">{% include '@Commercial/commercial/tops/_suppliers.html.twig' %}</div>
            <div class="col-12 col-xxl-6">{% include '@Commercial/commercial/tops/_expense_categories.html.twig' %}</div>
        {% endif %}
        {% if not showRevenue or not showExpenses %}<div class="col-12"><div class="alert alert-light border mb-0"><i class="ti ti-lock me-2"></i>Certaines données financières sont masquées selon vos permissions.</div></div>{% endif %}
        <div class="col-12 col-xxl-6">{% include '@Commercial/commercial/tops/_product_categories.html.twig' %}</div>
        <div class="col-12 col-xxl-6">{% include '@Commercial/commercial/tops/_products.html.twig' %}</div>
    </div>
</div>
{% endblock %}