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

{% block title %}Chart Card — Design System{% endblock %}

{% block body %}
<div class="max-w-[1200px] mx-auto">

    {% include '_molecules/page-header/page-header.html.twig' with {
        title: 'Chart Card',
        subtitle: 'Carte enveloppant un graphique : en-tête, actions, canvas, état vide.',
        icon: 'chart',
        backHref: path('admin_design_system'),
        backLabel: 'Design System'
    } only %}

    <h2 class="text-sm font-semibold text-gray-900 mt-8 mb-3">Composition</h2>
    <p class="text-sm text-gray-500 mb-6">Atomes utilisés : <code class="text-primary">icon</code>.</p>

    <h2 class="text-sm font-semibold text-gray-900 mb-3">Avec sous-titre et bloc d'actions</h2>
    <div class="grid grid-cols-1 lg:grid-cols-[1fr_300px] gap-6 mb-10">
        {% embed '_molecules/chart-card/chart-card.html.twig' with {
            title: 'Commissions & chiffre d\'affaires',
            subtitle: '1 842,00 € acquis sur douze mois',
            icon: 'chart',
            iconColor: 'primary'
        } only %}
            {% block actions %}
                {% include '_molecules/filter-tabs/filter-tabs.html.twig' with {
                    filters: [
                        { id: '3', label: '3 mois' },
                        { id: '6', label: '6 mois' },
                        { id: '12', label: '12 mois' }
                    ],
                    active: '12', size: 'sm', clientToggle: true
                } only %}
            {% endblock %}
        {% endembed %}

        {% embed '_molecules/chart-card/chart-card.html.twig' with {
            title: 'Filleuls par offre', icon: 'users-group', iconColor: 'info', height: 'sm'
        } only %}
            {% block aside %}
                <div class="mt-4 space-y-2">
                    <div class="flex items-center justify-between py-1">
                        <div class="flex items-center gap-2">
                            <span class="w-2.5 h-2.5 rounded-full bg-primary"></span>
                            <span class="text-sm text-gray-500">Pro</span>
                        </div>
                        <span class="text-sm font-bold text-gray-800">8</span>
                    </div>
                </div>
            {% endblock %}
        {% endembed %}
    </div>

    <h2 class="text-sm font-semibold text-gray-900 mb-3">Hauteurs</h2>
    <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
        {% for h in ['sm', 'md', 'lg'] %}
            {% include '_molecules/chart-card/chart-card.html.twig' with {
                title: 'height: ' ~ h, icon: 'chart', height: h
            } only %}
        {% endfor %}
    </div>
</div>
{% endblock %}