{% 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 fk-search-form" data-live-search data-live-target="#search-results">
    <div class="col-12">
        {% include "claims/partials/search_input.html" with value=query placeholder="Behauptung suchen…" autofocus=True aria_label="Behauptung suchen" %}
    </div>
    <div class="col-6">
        <select id="kategorie" name="kategorie" class="form-select fk-search-filter">
            <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 fk-search-filter">
            <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 %}