{% load duration i18n %}

<div class="card card-dashboard card-statistics">
    <div class="card-header">
         <i class="icon icon-graph pull-left" aria-hidden="true"></i>
        {% trans "Statistics" %}
    </div>
    <div class="card-body text-center">
        <div id="statistics-carousel" class="carousel slide" data-interval="false">
            <div class="carousel-inner">
                {% for stat in stats %}
                    <div class="carousel-item{% if forloop.counter == 1 %} active{% endif %}">
                        <span class="card-title">
                            {% if stat.stat %}
                                {% if stat.type == 'duration' %}
                                    {{ stat.stat|duration_string:'m' }}
                                {% elif stat.type == 'float' %}
                                    {{ stat.stat|floatformat }}
                                {% else %}
                                    {{ stat.stat }}
                                {% endif %}
                            {% else %}
                                <em>{% trans "Not enough data" %}</em>
                            {% endif %}
                        </span>
                        <div class="card-text">{{ stat.title }}</div>
                    </div>
                {% endfor %}
            </div>
            <a class="carousel-control-prev" href="#statistics-carousel" role="button" data-slide="prev">
                <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                <span class="sr-only">{% trans "Previous" %}</span>
            </a>
            <a class="carousel-control-next" href="#statistics-carousel" role="button" data-slide="next">
                <span class="carousel-control-next-icon" aria-hidden="true"></span>
                <span class="sr-only">{% trans "Next" %}</span>
            </a>
        </div>
    </div>
</div>