{#
    Catalogue des widgets × formules.

    Un seul partial pour toutes les surfaces (Mon abonnement, changement d'offre,
    tarifs publics, création de site) : l'utilisateur voit exactement la règle
    que l'éditeur et le site public appliquent (WidgetCatalog).

    Paramètres (tous optionnels) :
      - plans       : SubscriptionPlan[] — colonnes (défaut : formules actives)
      - highlight   : SubscriptionPlan|null — colonne mise en avant (offre actuelle)
      - collapsible : bool — replié dans un <details>
      - title       : string — libellé du résumé si collapsible

    Autonome : ses styles sont préfixés `wc-` et n'ont besoin ni de Bootstrap
    ni du design system de la vitrine.
#}
{% set plans = (plans is defined and plans) ? plans : active_plans() %}
{% set highlight = highlight|default(null) %}
{% set collapsible = collapsible|default(false) %}
{% set counts = widget_counts() %}
{% set catalog = widget_catalog(plans) %}

<style>
    .wc { --wc-line: #e2e8f0; --wc-muted: #64748b; --wc-ink: #0f172a; --wc-ok: #15803d; --wc-lock: #94a3b8; --wc-hl: #eff6ff; font-size: 0.92rem; color: var(--wc-ink); }
    .wc details > summary { cursor: pointer; font-weight: 600; padding: 0.6rem 0.9rem; border: 1px solid var(--wc-line); border-radius: 8px; background: #fff; list-style: none; display: flex; align-items: center; gap: 0.6rem; }
    .wc details > summary::-webkit-details-marker { display: none; }
    .wc details > summary::before { content: '▸'; color: var(--wc-muted); }
    .wc details[open] > summary::before { content: '▾'; }
    .wc__scroll { overflow-x: auto; border: 1px solid var(--wc-line); border-radius: 8px; background: #fff; margin-top: 0.6rem; }
    .wc table { width: 100%; border-collapse: collapse; min-width: 520px; margin: 0; }
    .wc th, .wc td { padding: 0.45rem 0.8rem; border-bottom: 1px solid var(--wc-line); text-align: left; vertical-align: middle; }
    .wc thead th { font-size: 0.72rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--wc-muted); background: #f8fafc; }
    .wc th.wc__plan, .wc td.wc__plan { text-align: center; white-space: nowrap; width: 1%; }
    .wc .wc__hl { background: var(--wc-hl); }
    .wc thead th.wc__hl { color: #1d4ed8; }
    .wc thead th small { display: block; font-weight: 400; text-transform: none; letter-spacing: 0; font-size: 0.78rem; }
    .wc tr.wc__group td { background: #f8fafc; font-weight: 700; padding-top: 0.6rem; }
    .wc tr.wc__group td small { font-weight: 400; color: var(--wc-muted); margin-left: 0.5rem; }
    .wc .wc__yes { color: var(--wc-ok); font-weight: 700; }
    .wc .wc__lock { color: var(--wc-lock); }
    .wc .wc__tier { display: inline-block; margin-left: 0.4rem; padding: 0.05em 0.45em; border-radius: 3px; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: #fff; vertical-align: middle; }
    .wc .wc__tier--essential { background: #2563eb; }
    .wc .wc__tier--pro { background: #d97706; }
    .wc__legend { display: flex; flex-wrap: wrap; gap: 0.4rem 1.2rem; font-size: 0.8rem; color: var(--wc-muted); margin: 0.5rem 0 0; }
</style>

<div class="wc">
    {% if collapsible %}
    <details>
        <summary>{{ title|default('Voir la liste des ' ~ counts.total ~ ' widgets par formule') }}</summary>
    {% endif %}
    <div class="wc__scroll">
        <table>
            <thead>
                <tr>
                    <th scope="col">Widget</th>
                    {% for plan in plans %}
                    <th scope="col" class="wc__plan{% if highlight and plan.id == highlight.id %} wc__hl{% endif %}">
                        {{ plan.name }}
                        <small>{{ widget_count_for_plan(plan) }} / {{ counts.total }}</small>
                    </th>
                    {% endfor %}
                </tr>
            </thead>
            <tbody>
                {% for group in catalog %}
                <tr class="wc__group">
                    <td colspan="{{ plans|length + 1 }}">{{ group.label }}<small>{{ group.widgets|length }} widget{{ group.widgets|length > 1 ? 's' : '' }}</small></td>
                </tr>
                {% for w in group.widgets %}
                {% set tierName = w.requiredPlanName|default(plan_name_for_tier(w.plan)) %}
                <tr>
                    <td>
                        {{ w.label }}
                        {% if w.plan %}<span class="wc__tier wc__tier--{{ w.plan }}" title="Inclus à partir de l'offre {{ tierName }}">{{ tierName }}</span>{% endif %}
                    </td>
                    {% for plan in plans %}
                    <td class="wc__plan{% if highlight and plan.id == highlight.id %} wc__hl{% endif %}">
                        {% if w.included[plan.id] %}<span class="wc__yes" role="img" aria-label="Inclus">✓</span>{% else %}<span class="wc__lock" role="img" aria-label="Non inclus">🔒</span>{% endif %}
                    </td>
                    {% endfor %}
                </tr>
                {% endfor %}
                {% endfor %}
            </tbody>
        </table>
    </div>
    <p class="wc__legend">
        <span><span class="wc__yes">✓</span> inclus</span>
        <span><span class="wc__lock">🔒</span> non inclus dans la formule</span>
        <span>Sans badge : inclus dans toutes les formules, même sans abonnement.</span>
    </p>
    {% if collapsible %}
    </details>
    {% endif %}
</div>