{% extends "base.html" %}

{% block title %}Suche – Faktenkompass{% endblock %}

{% block content %}
<h1 class="fk-page-title">Suche</h1>

<form method="get" action="{% url 'claims:search' %}" class="row g-2 mb-4" data-live-search data-live-target="#search-results">
    <div class="col-12">
        <input type="search" id="q" name="q" class="form-control form-control-sm"
               placeholder="Behauptung suchen…" value="{{ query }}" autofocus autocomplete="off">
    </div>
    <div class="col-6">
        <select id="kategorie" name="kategorie" class="form-select form-select-sm">
            <option value="">Alle Themen</option>
            {% for cat in categories %}
            <option value="{{ cat.slug }}"{% if category_slug == cat.slug %} selected{% endif %}>{{ cat.name }}</option>
            {% endfor %}
        </select>
    </div>
    <div class="col-6">
        <select id="status" name="status" class="form-select form-select-sm">
            <option value="">Alle Status</option>
            {% for value, label in status_choices %}
            <option value="{{ value }}"{% if status == value %} selected{% endif %}>{{ label }}</option>
            {% endfor %}
        </select>
    </div>
</form>

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