{% 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>

<section class="fk-about mt-5 pt-4" aria-labelledby="fk-about-heading">
    <h2 class="fk-about-title" id="fk-about-heading">Warum diese Seite?</h2>
    <div class="fk-card fk-about-body">
        <p>
            Faktenkompass ist eine Datenbank mit Antworten und Belegen zu typischen Argumenten,
            die man immer wieder hört. Die Idee: In einer Diskussion schnell die passende Grafik
            oder die richtige Zahl parat zu haben – fundiert, nachvollziehbar und mit Quellen.
        </p>
    </div>
</section>
{% endblock %}