{% load l10n %}
<div id="cahier-recette-stats" class="cr-jauge">
    <div class="cr-jauge-barre-zone">
        {# unlocalize : la locale fr rendrait "33,3" et casserait le CSS (width: 33,3% invalide) #}
        <div class="cr-jauge-barre" role="progressbar" aria-label="Progression du cahier de tests"
             aria-valuenow="{{ pct_valides|unlocalize }}" aria-valuemin="0" aria-valuemax="100">
            <span class="cr-jauge-seg cr-jauge-seg--valide" style="width: {{ pct_valides|unlocalize }}%;" title="{{ valides }} validé{{ valides|pluralize }}"></span>
            <span class="cr-jauge-seg cr-jauge-seg--refuse" style="width: {{ pct_refuses|unlocalize }}%;" title="{{ refuses }} refusé{{ refuses|pluralize }}"></span>
            <span class="cr-jauge-seg cr-jauge-seg--attente" style="width: {{ pct_attente|unlocalize }}%;" title="{{ en_attente }} en attente"></span>
        </div>
        <div class="cr-jauge-total">{{ total }} test{{ total|pluralize }} au total</div>
    </div>
    <div class="cr-compteurs">
        <span class="cr-compteur cr-compteur--valide"><strong>{{ valides }}</strong> Validé{{ valides|pluralize }}</span>
        <span class="cr-compteur cr-compteur--refuse"><strong>{{ refuses }}</strong> Refusé{{ refuses|pluralize }}</span>
        <span class="cr-compteur cr-compteur--attente"><strong>{{ en_attente }}</strong> En attente</span>
    </div>
</div>