{% 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-3">
    <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="h5 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-3">
    <div class="col-12 col-sm">
        <input type="search" id="q" name="q" class="form-control form-control-sm" placeholder="Suchen…" value="{{ query }}">
    </div>
    <div class="col-7 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>
    <div class="col-5 col-sm-auto">
        <button type="submit" class="btn btn-primary btn-sm w-100">Filtern</button>
    </div>
</form>

<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 d-flex align-items-start gap-2">
                <span class="badge text-bg-{{ claim.get_status_badge_class }} flex-shrink-0 mt-1">{{ claim.get_status_display }}</span>
                <span class="text-dark">{{ claim.title }}</span>
            </div>
        </div>
    </a>
    {% empty %}
    <p class="text-muted text-center py-4 mb-0">Keine Behauptungen gefunden.</p>
    {% endfor %}
</div>
{% endblock %}