Faktenkompass/templates/admin/claims/assistant.html

{% extends "admin/base_site.html" %}
{% load i18n %}

{% block extrastyle %}
{{ block.super }}
<style>
    .assistant-wrap { max-width: 820px; }
    .chat-box {
        background: #f8f9fa;
        border: 1px solid #dee2e6;
        border-radius: 8px;
        padding: 1rem;
        min-height: 120px;
        margin-bottom: 1.5rem;
    }
    .chat-hint { color: #6c757d; font-size: 0.9rem; }
    .assistant-card {
        border: 1px solid #dee2e6;
        border-radius: 8px;
        padding: 1.25rem;
        background: #fff;
    }
</style>
{% endblock %}

{% block breadcrumbs %}
<div class="breadcrumbs">
    <a href="{% url 'admin:index' %}">Start</a>
    &rsaquo; <a href="{% url 'admin:claims_claimdraft_changelist' %}">Fakten-Entwürfe</a>
    &rsaquo; Assistent
</div>
{% endblock %}

{% block content %}
<div class="assistant-wrap">
    <h1>Fakten-Assistent</h1>
    <p class="chat-hint">
        Link, Bild und/oder Beschreibung eingeben. Die KI erstellt einen <strong>Entwurf zur Prüfung</strong> –
        nichts wird automatisch veröffentlicht.
    </p>

    <div class="chat-box">
        <p class="mb-1"><strong>So funktioniert es:</strong></p>
        <ol class="mb-0 ps-3">
            <li>Eingaben senden (Artikel-URL, Beschreibung, optional Bild/PDF)</li>
            <li>KI analysiert den Kontext und schlägt Kategorie &amp; Fakteneintrag vor</li>
            <li>Sie prüfen, bearbeiten und veröffentlichen erst nach Freigabe</li>
        </ol>
    </div>

    <div class="assistant-card">
        <form method="post" enctype="multipart/form-data" novalidate>
            {% csrf_token %}
            {% if form.non_field_errors %}
            <div class="alert alert-danger">{{ form.non_field_errors }}</div>
            {% endif %}

            <div class="mb-3">
                <label class="form-label" for="{{ form.article_url.id_for_label }}">{{ form.article_url.label }}</label>
                {{ form.article_url }}
                {% if form.article_url.errors %}<div class="text-danger small">{{ form.article_url.errors }}</div>{% endif %}
            </div>

            <div class="mb-3">
                <label class="form-label" for="{{ form.user_notes.id_for_label }}">{{ form.user_notes.label }}</label>
                {{ form.user_notes }}
                {% if form.user_notes.errors %}<div class="text-danger small">{{ form.user_notes.errors }}</div>{% endif %}
            </div>

            <div class="mb-3">
                <label class="form-label" for="{{ form.uploaded_file.id_for_label }}">{{ form.uploaded_file.label }}</label>
                {{ form.uploaded_file }}
                <div class="form-text">JPG, PNG, GIF, WebP, SVG oder PDF. SVG wird für die KI intern in PNG umgewandelt.</div>
            </div>

            <button type="submit" class="button default">Entwurf generieren</button>
        </form>
    </div>

    {% if recent_drafts %}
    <div class="mt-4">
        <h2 class="h6 text-muted">Letzte Entwürfe</h2>
        <ul>
            {% for draft in recent_drafts %}
            <li>
                <a href="{% url 'admin:claims_claimdraft_review' draft.pk %}">
                    {{ draft.title|default:"(ohne Titel)" }}
                </a>
                – {{ draft.get_status_display }}
                <span class="text-muted">({{ draft.created_at|date:"d.m.Y H:i" }})</span>
            </li>
            {% endfor %}
        </ul>
    </div>
    {% endif %}
</div>
{% endblock %}