initial commit

templates/claims/category_detail.html

@@ -0,0 +1,54 @@
+{% 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 %}

templates/claims/claim_detail.html

@@ -0,0 +1,145 @@
+{% extends "base.html" %}
+
+{% block title %}{{ claim.title }} – Faktenkompass{% endblock %}
+{% block meta_description %}{{ claim.short_answer|truncatewords:30 }}{% 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"><a href="{{ claim.category.get_absolute_url }}">{{ claim.category.name }}</a></li>
+        <li class="breadcrumb-item active text-truncate" style="max-width: 10rem;">Behauptung</li>
+    </ol>
+</nav>
+
+<article>
+    <div class="d-flex flex-wrap gap-1 mb-2">
+        <span class="badge text-bg-{{ claim.get_status_badge_class }}">{{ claim.get_status_display }}</span>
+        <span class="badge text-bg-light border text-dark">Evidenz: {{ claim.get_evidence_level_display }}</span>
+    </div>
+
+    <h1 class="h5 fw-semibold mb-3">{{ claim.title }}</h1>
+
+    <div class="card mb-3 border-start border-3 border-primary">
+        <div class="card-body py-3">
+            <p class="small text-muted text-uppercase fw-semibold mb-1">Kurzantwort</p>
+            <p class="mb-0">{{ claim.short_answer }}</p>
+        </div>
+    </div>
+
+    {% if claim.evidence_files.all %}
+    <section class="mb-3">
+        <p class="small text-muted text-uppercase fw-semibold mb-2">Nachweise</p>
+        <div class="d-flex flex-column gap-2">
+            {% for evidence in claim.evidence_files.all %}
+            {% if evidence.is_image %}
+            <figure class="card mb-0 evidence-card">
+                <img src="{{ evidence.file.url }}" alt="{{ evidence.caption|default:evidence.display_title }}"
+                     class="evidence-img w-100" loading="lazy">
+                {% if evidence.title or evidence.caption %}
+                <figcaption class="card-body py-2 px-3 small">
+                    {% if evidence.title %}<strong class="d-block">{{ evidence.title }}</strong>{% endif %}
+                    {% if evidence.caption %}<span class="text-muted">{{ evidence.caption }}</span>{% endif %}
+                </figcaption>
+                {% endif %}
+            </figure>
+            {% elif evidence.is_pdf %}
+            <a href="{{ evidence.file.url }}" target="_blank" rel="noopener noreferrer" class="text-decoration-none">
+                <div class="card evidence-card">
+                    <div class="card-body py-2 px-3 d-flex align-items-center gap-3">
+                        <i class="bi bi-file-earmark-pdf text-danger fs-3 flex-shrink-0"></i>
+                        <div class="min-w-0">
+                            <span class="small fw-medium text-dark d-block">{{ evidence.display_title }}</span>
+                            {% if evidence.caption %}<span class="small text-muted">{{ evidence.caption }}</span>{% endif %}
+                            <span class="small text-primary">PDF öffnen</span>
+                        </div>
+                    </div>
+                </div>
+            </a>
+            {% endif %}
+            {% endfor %}
+        </div>
+    </section>
+    {% endif %}
+
+    {% if claim.detailed_explanation %}
+    <section class="card mb-3">
+        <div class="card-body py-3">
+            <p class="small text-muted text-uppercase fw-semibold mb-1">Erklärung</p>
+            <div class="small">{{ claim.detailed_explanation|linebreaks }}</div>
+        </div>
+    </section>
+    {% endif %}
+
+    {% if claim.sources.all %}
+    <section class="mb-3">
+        <p class="small text-muted text-uppercase fw-semibold mb-2">Quellen</p>
+        <div class="d-flex flex-column gap-2">
+            {% for source in claim.sources.all %}
+            <div class="card">
+                <div class="card-body py-2 px-3">
+                    <a href="{{ source.url }}" target="_blank" rel="noopener noreferrer" class="text-decoration-none fw-medium small">
+                        {{ source.title }} <i class="bi bi-box-arrow-up-right"></i>
+                    </a>
+                    <p class="text-muted small mb-0">{{ source.organization }}</p>
+                    {% if source.description %}
+                    <p class="small mb-0 mt-1">{{ source.description }}</p>
+                    {% endif %}
+                </div>
+            </div>
+            {% endfor %}
+        </div>
+    </section>
+    {% endif %}
+
+    {% if claim.counter_arguments.all %}
+    <section class="mb-3">
+        <p class="small text-muted text-uppercase fw-semibold mb-2">Gegenargumente</p>
+        <div class="accordion accordion-flush" id="counterArgs">
+            {% for ca in claim.counter_arguments.all %}
+            <div class="accordion-item border mb-1 rounded">
+                <h2 class="accordion-header">
+                    <button class="accordion-button collapsed py-2 small" type="button"
+                            data-bs-toggle="collapse" data-bs-target="#collapse{{ forloop.counter }}">
+                        {{ ca.argument }}
+                    </button>
+                </h2>
+                <div id="collapse{{ forloop.counter }}" class="accordion-collapse collapse"
+                     data-bs-parent="#counterArgs">
+                    <div class="accordion-body py-2 small text-muted">
+                        {{ ca.response|linebreaks }}
+                    </div>
+                </div>
+            </div>
+            {% endfor %}
+        </div>
+    </section>
+    {% endif %}
+
+    {% if claim.tags.all %}
+    <div class="d-flex flex-wrap gap-1">
+        {% for tag in claim.tags.all %}
+        <span class="badge text-bg-light border text-secondary">#{{ tag.name }}</span>
+        {% endfor %}
+    </div>
+    {% endif %}
+</article>
+
+{% if related_claims %}
+<aside class="mt-4 pt-3 border-top">
+    <p class="small text-muted text-uppercase fw-semibold mb-2">Mehr zu {{ claim.category.name }}</p>
+    <div class="d-flex flex-column gap-2">
+        {% for related in related_claims %}
+        <a href="{{ related.get_absolute_url }}" class="text-decoration-none">
+            <div class="card claim-card">
+                <div class="card-body py-2 d-flex align-items-start gap-2">
+                    <span class="badge text-bg-{{ related.get_status_badge_class }} flex-shrink-0">{{ related.get_status_display }}</span>
+                    <span class="small text-dark">{{ related.title }}</span>
+                </div>
+            </div>
+        </a>
+        {% endfor %}
+    </div>
+</aside>
+{% endif %}
+{% endblock %}

templates/claims/home.html

@@ -0,0 +1,47 @@
+{% extends "base.html" %}
+
+{% block title %}Faktenkompass{% endblock %}
+
+{% block content %}
+<header class="page-header mb-3">
+    <h1 class="h4 mb-3">Themen</h1>
+    <form method="get" action="{% url 'claims:home' %}" class="mb-2">
+        <div class="input-group">
+            <span class="input-group-text bg-white border-end-0"><i class="bi bi-search text-muted"></i></span>
+            <input type="search" name="q" class="form-control border-start-0 ps-0" placeholder="Suchen…" value="{{ query }}" aria-label="Kategorien durchsuchen">
+        </div>
+    </form>
+    <div class="d-flex justify-content-between align-items-center">
+        <a href="{% url 'claims:search' %}" class="small text-muted text-decoration-none">Alle Behauptungen</a>
+        {% if total_claims %}<span class="small text-muted">{{ total_claims }} Einträge</span>{% endif %}
+    </div>
+</header>
+
+{% if query and not categories %}
+<p class="text-muted small mb-3">Keine Kategorien für „{{ query }}".</p>
+{% endif %}
+
+<div class="row g-2 g-sm-3">
+    {% for category in categories %}
+    <div class="col-6 col-md-4 col-lg-3">
+        <a href="{{ category.get_absolute_url }}" class="text-decoration-none d-block h-100">
+            <div class="card category-tile h-100 text-center">
+                <div class="card-body d-flex flex-column align-items-center justify-content-center py-3 py-sm-4">
+                    <div class="category-tile-icon mb-2">
+                        <i class="bi {{ category.icon|default:'bi-book' }}"></i>
+                    </div>
+                    <h2 class="h6 card-title text-dark mb-0">{{ category.name }}</h2>
+                    <span class="small text-muted mt-1">{{ category.claim_count }}</span>
+                </div>
+            </div>
+        </a>
+    </div>
+    {% empty %}
+    {% if not query %}
+    <div class="col-12">
+        <p class="text-muted text-center py-5 mb-0">Noch keine Kategorien vorhanden.</p>
+    </div>
+    {% endif %}
+    {% endfor %}
+</div>
+{% endblock %}

templates/claims/search.html

@@ -0,0 +1,60 @@
+{% 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 %}