{% load duration i18n %}
{% if not empty or not hide_empty %}
    <div class="card card-dashboard card-statistics">
        <div class="card-header">
            <i class="icon-graph pull-left" aria-hidden="true"></i>
            {% trans "Statistics" %}
        </div>
        <div class="card-body text-center">
            {% if stats|length > 0 %}
                <div id="statistics-carousel"
                     class="carousel slide"
                     data-bs-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-bs-slide="prev">
                        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                        <span class="visually-hidden">{% trans "Previous" %}</span>
                    </a>
                    <a class="carousel-control-next"
                       href="#statistics-carousel"
                       role="button"
                       data-bs-slide="next">
                        <span class="carousel-control-next-icon" aria-hidden="true"></span>
                        <span class="visually-hidden">{% trans "Next" %}</span>
                    </a>
                </div>
            {% else %}
                <span class="card-title"><strong>{% trans "No data yet" %}</strong></span>
            {% endif %}
        </div>
    </div>
{% endif %}