{% load i18n static %}
<div class="slide-canvas slide-team" {% if slide.background_color %}style="background:{{ slide.background_color }}"{% endif %}>
    <div class="slide-team__header">
        <h1 class="slide-team__title">{{ slide.title }}</h1>
        {% if slide.subtitle %}
        <p style="font:var(--px-caption);color:var(--px-muted);">{{ slide.subtitle }}</p>
        {% endif %}
    </div>

    <div class="slide-team__grid">
        {% for member in slide.content.members %}
        <div class="slide-team__card">
            <div class="slide-team__avatar">
                {% if member.initials %}{{ member.initials }}{% else %}{{ member.name|make_list|first }}{% endif %}
            </div>
            <div class="slide-team__name">{{ member.name }}</div>
            <div class="slide-team__role">{{ member.role }}</div>

            {% if member.metric_value %}
            <div class="slide-team__metric">
                <div class="slide-team__metric-value">{{ member.metric_value }}</div>
                <div class="slide-team__metric-label">{{ member.metric_label }}</div>
            </div>
            {% endif %}
        </div>
        {% endfor %}
    </div>

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