{% extends "base.html" %}

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

{% block content %}
<h1 class="h5 mb-3">Suche</h1>

<form method="get" class="row g-2 mb-3">
    <div class="col-12">
        <input type="search" id="q" name="q" class="form-control form-control-sm"
               placeholder="Behauptung suchen…" value="{{ query }}" autofocus>
    </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>
    <div class="col-12">
        <button type="submit" class="btn btn-primary btn-sm w-100">Suchen</button>
    </div>
</form>

{% if claims is not None %}
<div class="d-flex justify-content-between align-items-center mb-2">
    <span class="small text-muted">{{ result_count }} Ergebnis{% if result_count != 1 %}se{% endif %}</span>
    {% if query or category_slug or status %}
    <a href="{% url 'claims:search' %}" class="small text-muted">Zurücksetzen</a>
    {% endif %}
</div>

<div class="d-flex flex-column gap-2">
    {% for claim in claims %}
    <a href="{{ claim.get_absolute_url }}" class="text-decoration-none">
        <div class="card claim-card">
            <div class="card-body">
                <div class="d-flex flex-wrap gap-1 mb-1">
                    <span class="badge text-bg-secondary">{{ claim.category.name }}</span>
                    <span class="badge text-bg-{{ claim.get_status_badge_class }}">{{ claim.get_status_display }}</span>
                </div>
                <span class="text-dark">{{ claim.title }}</span>
            </div>
        </div>
    </a>
    {% empty %}
    <p class="text-muted text-center py-4 mb-0">Keine Ergebnisse.</p>
    {% endfor %}
</div>
{% endif %}
{% endblock %}