{#
    SAM KPI Card Component - Dashboard statistic card

    Parameters:
    - value: string|number (required) - Main value to display
    - label: string (required) - KPI label
    - icon: string - Icon name from icon.html.twig
    - entity: string - Entity type for color: 'users', 'cohorts', 'courses', 'activities'
    - total: string|number - Secondary value (e.g., "120 inscrits")
    - progress: number - Optional progress percentage (0-100)
    - url: string - Makes the card clickable
    - trend: object - Trend indicator {value: "+12%", direction: "up"|"down"}
    - highlight: bool - Highlight the card

    Usage:
    {% include 'sam/_components/kpi_card.html.twig' with {
        value: 156,
        label: 'Apprenants actifs',
        icon: 'users',
        entity: 'users',
        total: 'inscrits',
        url: path('app_sam_users'),
        trend: {value: '+12%', direction: 'up'}
    } %}
#}

{% set entityType = entity|default('stats') %}
{% set isClickable = url is defined and url %}

{% set cardClasses = ['sam-kpi-card'] %}
{% if isClickable %}
    {% set cardClasses = cardClasses|merge(['sam-kpi-card--clickable', 'sam-kpi-card--' ~ entityType]) %}
{% endif %}
{% if highlight|default(false) %}
    {% set cardClasses = cardClasses|merge(['sam-kpi-card--highlight']) %}
{% endif %}

{% set tag = isClickable ? 'a' : 'div' %}

<{{ tag }}{% if isClickable %} href="{{ url }}"{% endif %} class="{{ cardClasses|join(' ') }}">
    {% if icon is defined %}
    <div class="sam-kpi-card__icon sam-kpi-card__icon--{{ entityType }}">
        {% include 'sam/_components/icon.html.twig' with {name: icon, size: 20} %}
    </div>
    {% endif %}

    <div class="sam-kpi-card__content">
        <div class="sam-kpi-card__label">{{ label }}</div>
        <div class="sam-kpi-card__value-row">
            <span class="sam-kpi-card__value">{{ value }}</span>
            {% if total is defined %}
                <span class="sam-kpi-card__total">{{ total }}</span>
            {% endif %}
        </div>

        {% if progress is defined %}
        <div class="sam-kpi-card__progress">
            <div class="sam-kpi-card__progress-bar" style="width: {{ progress }}%"></div>
        </div>
        {% endif %}
    </div>

    {% if isClickable %}
    <div class="sam-kpi-card__arrow sam-kpi-card__arrow--{{ entityType }}">
        {% include 'sam/_components/icon.html.twig' with {name: 'chevron-right', size: 16} %}
    </div>
    {% endif %}
</{{ tag }}>