{% load i18n static %}
<div class="slide-canvas slide-kpi" {% if slide.background_color %}style="background:{{ slide.background_color }}"{% endif %}>
    <div class="slide-kpi__header">
        <h1 class="slide-kpi__title">{{ slide.title }}</h1>
        {% if slide.subtitle %}
        <p class="slide-kpi__subtitle">{{ slide.subtitle }}</p>
        {% endif %}
    </div>

    <div class="slide-kpi__grid">
        {% for metric in slide.content.metrics %}
        <div class="slide-kpi__card {% if metric.variant %}slide-kpi__card--{{ metric.variant }}{% endif %}">
            {% if metric.icon %}
            <div class="slide-kpi__card-icon">
                <i data-lucide="{{ metric.icon }}" style="width:24px;height:24px;"></i>
            </div>
            {% endif %}
            <div class="slide-kpi__card-label">{{ metric.label }}</div>
            <div class="slide-kpi__card-value">{{ metric.value }}</div>
            {% if metric.change %}
            <div class="slide-kpi__card-change {% if metric.change_direction == 'up' %}slide-kpi__card-change--up{% elif metric.change_direction == 'down' %}slide-kpi__card-change--down{% else %}slide-kpi__card-change--neutral{% endif %}">
                {% if metric.change_direction == 'up' %}&#9650;{% elif metric.change_direction == 'down' %}&#9660;{% endif %}
                {{ metric.change }}
            </div>
            {% endif %}
            {% if metric.description %}
            <div style="font:var(--px-caption);color:var(--px-light-muted);margin-top:8px;">{{ metric.description }}</div>
            {% endif %}
        </div>
        {% endfor %}
    </div>

    <img src="{% static 'img/HH_R_H_Logo.png' %}" alt="" class="slide-logo--footer">
</div>