{% load i18n static %}
<div class="slide-canvas slide-timeline" {% if slide.background_color %}style="background:{{ slide.background_color }}"{% endif %}>
    <div class="slide-timeline__header">
        <h1 class="slide-timeline__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-timeline__track">
        {% for event in slide.content.events %}
        <div class="slide-timeline__item {% if event.active %}slide-timeline__item--active{% endif %}">
            <div class="slide-timeline__dot"></div>
            <div class="slide-timeline__date">{{ event.date }}</div>
            <div class="slide-timeline__event-title">{{ event.title }}</div>
            {% if event.description %}
            <div class="slide-timeline__event-desc">{{ event.description }}</div>
            {% endif %}
        </div>
        {% endfor %}
    </div>

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