{# @var stat \App\Dto\CompetitionStat #}
{# compact: bool — mobile : label + valeur uniquement #}
{% set compact = compact|default(false) %}
<article class="dashboard-random-stat__item{% if compact %} dashboard-random-stat__item--compact{% endif %}">
    {% if not compact %}
        <div class="dashboard-random-stat__item-icon">
            {% include 'competition/_stat_visual.html.twig' with {
                visual_src: stat.visualSrc,
                visual_alt: stat.visualAlt,
                visual_kind: stat.visualKind,
                icon: stat.icon,
            } %}
        </div>
    {% endif %}
    <div class="dashboard-random-stat__item-body">
        {% if stat.label %}
            <h3 class="dashboard-random-stat__label{% if not stat.value %} dashboard-random-stat__label--title{% endif %}">{{ stat.label }}</h3>
        {% endif %}
        {% if stat.value %}
            <p class="dashboard-random-stat__value">{{ stat.value }}</p>
        {% endif %}
        {% if not compact %}
            {% if stat.detail %}
                <p class="ta-card-text dashboard-random-stat__detail">{{ stat.detail }}</p>
            {% endif %}
            {% if stat.linkUrl %}
                <p class="dashboard-random-stat__external-link">
                    <a href="{{ stat.linkUrl }}" class="ta-link" target="_blank" rel="noopener noreferrer">
                        {{ stat.linkLabel ?: 'En savoir plus' }}
                        <i class="ti ti-external-link" aria-hidden="true"></i>
                    </a>
                </p>
            {% endif %}
            {% if stat.footnote %}
                <p class="dashboard-random-stat__footnote ta-card-text"><em>{{ stat.footnote }}</em></p>
            {% endif %}
        {% endif %}
    </div>
</article>