{% load i18n tz %}

<div class="chassis-timeline">
    {% for group in timeline.groups %}
        <section class="chassis-timeline-group">
            <h3 class="chassis-timeline-group__date">{{ group.date_label }}</h3>
            <ol class="chassis-timeline-group__items">
                {% for item in group.items %}
                    <li
                        class="
                            chassis-timeline-item
                            {% if item.result_color %}chassis-timeline-item--{{ item.result_color }}{% endif %}
                        "
                    >
                        <span class="chassis-timeline-item__axis" aria-hidden="true">
                            <span class="chassis-timeline-item__node"></span>
                        </span>
                        <div class="chassis-timeline-item__body">
                            <p class="chassis-timeline-item__title">{{ item.title }}</p>
                            {% if item.subtitle %}
                                <p class="chassis-timeline-item__subtitle">{{ item.subtitle }}</p>
                            {% endif %}
                        </div>
                        <time
                            class="chassis-timeline-item__time"
                            datetime="{{ item.occurred_at|date:'c' }}"
                        >
                            {{ item.occurred_at|localtime|time }}
                        </time>
                    </li>
                {% endfor %}
            </ol>
        </section>
    {% empty %}
        <p class="chassis-timeline-empty">{{ timeline.empty_text }}</p>
    {% endfor %}
</div>