{% extends "base.html" %}

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

{% block content %}
<header class="mb-4">
    <h1 class="fk-page-title">Themen</h1>
    <form method="get" action="{% url 'claims:home' %}" class="mb-2" data-live-search data-live-target="#home-results">
        <div class="input-group">
            <span class="input-group-text border-end-0"><i class="bi bi-search"></i></span>
            <input type="search" name="q" class="form-control border-start-0 ps-0" placeholder="Suchen…" value="{{ query }}" aria-label="Kategorien durchsuchen" autocomplete="off">
        </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>

<div id="home-results">
    {% include "claims/partials/category_list.html" %}
</div>
{% endblock %}