mybuddy/reports/templates/reports/timeline.html

{% extends 'reports/report_base.html' %}
{% load static %}

{% block title %}Timeline - {{ object }}{% endblock %}

{% block breadcrumbs %}
    {{ block.super }}
    <li class="breadcrumb-item active" aria-current="page">Timeline</li>
{% endblock %}

{% block content %}
    <h1 class="text-center">Timeline</h1>
    <h2 class="text-center text-muted">{{ object }}</h2>
    <h3 class="text-center">
        <a class="btn btn-sm btn-default" href="?date={{ date_previous|date:"Y-m-d" }}" aria-label="Previous">
            <i class="icon icon-chevron-left" aria-hidden="true"></i>
            <span class="sr-only">Previous</span>
        </a>
        {{ date|date }}
        <a class="btn btn-sm btn-default" href="?date={{ date_next|date:"Y-m-d" }}" aria-label="Next">
            <i class="icon icon-chevron-right" aria-hidden="true"></i>
            <span class="sr-only">Next</span>
        </a>
    </h3>
    <ul class="timeline m-auto">
        {% for object in objects %}
            <li{% cycle "" ' class="timeline-inverted"' %}>
                <div class="timeline-badge {% if object.type == "start" %}bg-success{% elif object.type == "end" %}bg-danger{% else %}bg-info{% endif %}">
                    <i class="icon icon-{{ object.model_name }}"></i>
                </div>
                <div class="card text-right">
                    <div class="card-body">
                        {{ object.event }}
                    </div>
                    <div class="card-footer text-muted">
                        {{ object.time|timesince }} ago ({{ object.time|time }})
                    </div>
                </div>
            </li>
        {% endfor %}
    </ul>
{% endblock %}