{% load i18n static %}
<div class="slide-canvas slide-two-col" {% if slide.background_color %}style="background:{{ slide.background_color }}"{% endif %}>
    <div class="slide-two-col__col">
        {% if slide.content.left_title %}
        <h1 class="slide-two-col__title">{{ slide.content.left_title }}</h1>
        {% elif slide.title %}
        <h1 class="slide-two-col__title">{{ slide.title }}</h1>
        {% endif %}

        <div class="slide-two-col__body">
            {% if slide.content.left_body %}
            {% for paragraph in slide.content.left_body %}
            <p>{{ paragraph }}</p>
            {% endfor %}
            {% endif %}

            {% if slide.content.left_bullets %}
            <ul class="slide-list">
                {% for item in slide.content.left_bullets %}
                <li class="slide-list__item">
                    <span class="slide-list__item-bullet {% if item.color %}slide-list__item-bullet--{{ item.color }}{% endif %}"></span>
                    <span>{{ item.text }}</span>
                </li>
                {% endfor %}
            </ul>
            {% endif %}
        </div>
    </div>

    <div class="slide-two-col__col">
        {% if slide.content.right_title %}
        <h2 class="slide-two-col__title">{{ slide.content.right_title }}</h2>
        {% endif %}

        <div class="slide-two-col__body">
            {% if slide.content.right_body %}
            {% for paragraph in slide.content.right_body %}
            <p>{{ paragraph }}</p>
            {% endfor %}
            {% endif %}

            {% if slide.content.right_bullets %}
            <ul class="slide-list">
                {% for item in slide.content.right_bullets %}
                <li class="slide-list__item">
                    <span class="slide-list__item-bullet {% if item.color %}slide-list__item-bullet--{{ item.color }}{% endif %}"></span>
                    <span>{{ item.text }}</span>
                </li>
                {% endfor %}
            </ul>
            {% endif %}

            {% if slide.content.right_stats %}
            <div style="display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:32px;">
                {% for stat in slide.content.right_stats %}
                <div style="padding:20px;background:var(--px-surface);border-radius:var(--px-radius);">
                    <div style="font:800 32px/1 var(--px-font);color:var(--px-navy);font-variant-numeric:tabular-nums;">{{ stat.value }}</div>
                    <div style="font:var(--px-caption);color:var(--px-muted);margin-top:6px;">{{ stat.label }}</div>
                </div>
                {% endfor %}
            </div>
            {% endif %}
        </div>
    </div>

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