35 lines
1.7 KiB
HTML
35 lines
1.7 KiB
HTML
{% 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' %}▲{% elif metric.change_direction == 'down' %}▼{% 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>
|