{% load humanize %}
{% load naturalduration %}
{% load media_badges %}
<div class="d-flex flex-wrap gap-2 mb-3">
    {% for section in home_sections %}
    <a href="#home-{{ section.media_type|slugify }}" class="text-decoration-none">
        <div class="card summary-card">
        <div class="card-body py-2 px-3">
            <div class="d-flex align-items-center gap-2">
                {% with meta=section.media_type|media_type_meta %}
                {% if use_emojis %}
                <span class="badge media-badge" style="background:{{ meta.color }}">{{ meta.icon }}</span>
                {% else %}
                <span class="badge media-badge" style="background:{{ meta.color }}">{{ meta.initial }}</span>
                {% endif %}
                {% endwith %}
                <div>
                    <div class="small fw-bold">{{ section.media_type }}</div>
                    <div class="small text-muted">
                        {{ section.count }} {% if section.time %}&middot; {{ section.time|natural_duration }}{% endif %}{% if section.calories %} &middot; {{ section.calories }} cal{% endif %}
                    </div>
                </div>
            </div>
        </div>
        </div>
    </a>
    {% empty %}
    <p class="text-muted">Nothing scrobbled today.</p>
    {% endfor %}
</div>