{% load i18n static %}
<div class="slide-canvas slide-comparison" {% if slide.background_color %}style="background:{{ slide.background_color }}"{% endif %}>
    <div class="slide-comparison__header">
        <h1 class="slide-comparison__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-comparison__panels">
        <div class="slide-comparison__panel {% if slide.content.left_highlight %}slide-comparison__panel--highlight{% endif %}">
            {% if slide.content.left_label %}
            <div class="slide-comparison__panel-label">{{ slide.content.left_label }}</div>
            {% endif %}

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

            {% if slide.content.left_stats %}
            <div style="margin-top:auto;display:grid;grid-template-columns:1fr 1fr;gap:16px;">
                {% for stat in slide.content.left_stats %}
                <div style="padding:16px;background:var(--px-white);border-radius:12px;">
                    <div style="font:700 28px/1 var(--px-font);color:var(--px-navy);">{{ stat.value }}</div>
                    <div style="font:var(--px-caption);color:var(--px-muted);margin-top:4px;">{{ stat.label }}</div>
                </div>
                {% endfor %}
            </div>
            {% endif %}
        </div>

        <div class="slide-comparison__divider">
            <div class="slide-comparison__vs">{% if slide.content.vs_text %}{{ slide.content.vs_text }}{% else %}vs{% endif %}</div>
        </div>

        <div class="slide-comparison__panel {% if slide.content.right_highlight %}slide-comparison__panel--highlight{% endif %}">
            {% if slide.content.right_label %}
            <div class="slide-comparison__panel-label">{{ slide.content.right_label }}</div>
            {% endif %}

            {% if slide.content.right_items %}
            <ul class="slide-list">
                {% for item in slide.content.right_items %}
                <li class="slide-list__item">
                    <span class="slide-list__item-bullet slide-list__item-bullet--teal"></span>
                    <span>{{ item.text|default:item }}</span>
                </li>
                {% endfor %}
            </ul>
            {% endif %}

            {% if slide.content.right_stats %}
            <div style="margin-top:auto;display:grid;grid-template-columns:1fr 1fr;gap:16px;">
                {% for stat in slide.content.right_stats %}
                <div style="padding:16px;background:var(--px-white);border-radius:12px;">
                    <div style="font:700 28px/1 var(--px-font);color:var(--px-teal);">{{ stat.value }}</div>
                    <div style="font:var(--px-caption);color:var(--px-muted);margin-top:4px;">{{ stat.label }}</div>
                </div>
                {% endfor %}
            </div>
            {% endif %}
        </div>
    </div>

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