{#
 # ============================================================================
 # MOLECULE: TOKEN WIDGET
 # ============================================================================
 # Affichage du solde de tokens : titre + description à gauche,
 # solde numérique + barre de progression à droite.
 # Partagé entre B2B et B2C — seuls les données et la couleur varient.
 #
 # Paramètres
 # ----------
 # description : string  Texte descriptif (HTML autorisé via |raw)   (requis)
 # balance     : int     Solde affiché (numérateur)
 # max         : int     Maximum affiché (dénominateur)
 # pct         : float   Pourcentage de remplissage de la barre (0–100)
 # barVariant  : string  'primary' | 'warning'                        (défaut : 'primary')
 # ============================================================================
 #}
{% set description = description ?? '' %}
{% set balance     = balance     ?? 0 %}
{% set max         = max         ?? 0 %}
{% set pct         = pct         ?? 0 %}
{% set barVariant  = barVariant  ?? 'primary' %}

{% set barColor = barVariant == 'warning'
    ? 'bg-gradient-to-r from-amber-400 to-amber-300'
    : 'bg-gradient-to-r from-primary to-primary-light' %}

<div class="grid grid-cols-1 sm:grid-cols-2 gap-6 sm:gap-10 items-start sm:items-center">
    <div>
        <h2 class="text-xl font-bold text-gray-900">Tokens</h2>
        <p class="text-sm text-gray-500 mt-2 leading-relaxed">{{ description|raw }}</p>
    </div>
    <div class="space-y-3">
        <div>
            <p class="text-xs font-medium text-gray-400 mb-1">Solde actuel</p>
            <p class="text-2xl font-bold text-gray-900 tabular-nums">
                {{ balance|number_format(0, ',', ' ') }}<span class="text-sm font-normal text-gray-400 ml-1">/ {{ max|number_format(0, ',', ' ') }}</span>
            </p>
        </div>
        <div class="space-y-1">
            <div class="w-full bg-gray-100 rounded-full h-2 overflow-hidden">
                <div class="h-2 rounded-full transition-all duration-700 {{ barColor }}"
                     style="width: {{ pct }}%"></div>
            </div>
        </div>
    </div>
</div>