{% if query and not categories %}
<p class="text-muted small mb-3">Keine Kategorien für „{{ query }}".</p>
{% endif %}

<div class="row g-2 g-sm-3">
    {% for category in categories %}
    <div class="col-6 col-md-4 col-lg-3">
        <a href="{{ category.get_absolute_url }}" class="text-decoration-none d-block h-100">
            <div class="category-tile h-100 text-center">
                <div class="card-body d-flex flex-column align-items-center justify-content-center py-3 py-sm-4">
                    <div class="category-tile-icon mb-2">
                        <i class="bi {{ category.icon|default:'bi-book' }}"></i>
                    </div>
                    <h2 class="h6 card-title mb-0">{{ category.name }}</h2>
                    <span class="small text-muted mt-1">{{ category.claim_count }}</span>
                </div>
            </div>
        </a>
    </div>
    {% empty %}
    {% if not query %}
    <div class="col-12">
        <p class="text-muted text-center py-5 mb-0">Noch keine Kategorien vorhanden.</p>
    </div>
    {% endif %}
    {% endfor %}
</div>