{% extends "base.html" %}

{% block title %}Faktenkompass{% endblock %}

{% block content %}
<header class="page-header mb-3">
    <h1 class="h4 mb-3">Themen</h1>
    <form method="get" action="{% url 'claims:home' %}" class="mb-2">
        <div class="input-group">
            <span class="input-group-text bg-white border-end-0"><i class="bi bi-search text-muted"></i></span>
            <input type="search" name="q" class="form-control border-start-0 ps-0" placeholder="Suchen…" value="{{ query }}" aria-label="Kategorien durchsuchen">
        </div>
    </form>
    <div class="d-flex justify-content-between align-items-center">
        <a href="{% url 'claims:search' %}" class="small text-muted text-decoration-none">Alle Behauptungen</a>
        {% if total_claims %}<span class="small text-muted">{{ total_claims }} Einträge</span>{% endif %}
    </div>
</header>

{% 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="card 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 text-dark 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>
{% endblock %}