{% extends "base.html" %}

{% block title %}{{ category.name }} – Faktenkompass{% endblock %}

{% block content %}
<nav aria-label="Brotkrumen">
    <ol class="breadcrumb">
        <li class="breadcrumb-item"><a href="{% url 'claims:home' %}">Themen</a></li>
        <li class="breadcrumb-item active">{{ category.name }}</li>
    </ol>
</nav>

<div class="d-flex align-items-center gap-2 mb-4">
    <div class="category-tile-icon flex-shrink-0">
        <i class="bi {{ category.icon|default:'bi-book' }}"></i>
    </div>
    <div class="flex-grow-1 overflow-hidden">
        <h1 class="fk-page-title mb-0 text-truncate">{{ category.name }}</h1>
        <span class="small text-muted">{{ claims|length }} Behauptung{% if claims|length != 1 %}en{% endif %}</span>
    </div>
</div>

<form method="get" class="row g-2 mb-4" data-live-search data-live-target="#category-results">
    <div class="col-12 col-sm">
        <input type="search" id="q" name="q" class="form-control form-control-sm" placeholder="Suchen…" value="{{ query }}" autocomplete="off">
    </div>
    <div class="col-12 col-sm-auto">
        <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="category-results">
    {% include "claims/partials/claim_list.html" %}
</div>
{% endblock %}