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

{% block title %}Month Range Filter — Design System{% endblock %}

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

    {% include '_molecules/page-header/page-header.html.twig' with {
        title: 'Month Range Filter',
        subtitle: 'Barre de filtre de période, au mois. Émet toujours du et au en GET, au format YYYY-MM.',
        icon: 'calendar',
        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>

    {% set moisDemo = ['2026-07', '2026-06', '2026-05', '2026-04', '2026-03', '2026-02', '2026-01'] %}

    <h2 class="text-sm font-semibold text-gray-900 mb-3">Sans filtre actif</h2>
    <div class="bg-gray-50 rounded-2xl p-5 mb-8">
        {% include '_molecules/month-range-filter/month-range-filter.html.twig' with {
            action: path('admin_design_system_month_range_filter'),
            months: moisDemo
        } only %}
    </div>

    <h2 class="text-sm font-semibold text-gray-900 mb-3">Sous filtre — le lien de réinitialisation apparaît</h2>
    <div class="bg-gray-50 rounded-2xl p-5 mb-8">
        {% include '_molecules/month-range-filter/month-range-filter.html.twig' with {
            action: path('admin_design_system_month_range_filter'),
            months: moisDemo,
            start: '2026-01', end: '2026-07'
        } only %}
    </div>

    <h2 class="text-sm font-semibold text-gray-900 mb-3">Aucun mois à proposer — rien n'est rendu</h2>
    <p class="text-sm text-gray-500 mb-3">Un filtre sans choix est du bruit : la molécule s'efface d'elle-même.</p>
    <div class="bg-gray-50 rounded-2xl p-5">
        {% include '_molecules/month-range-filter/month-range-filter.html.twig' with {
            action: path('admin_design_system_month_range_filter'),
            months: []
        } only %}
    </div>
</div>
{% endblock %}