{% extends 'admin/base.html.twig' %}

{% block title %}Neues Dokument{% endblock %}

{% block body %}

    <div class="d-flex justify-content-between align-items-center mb-4 flex-wrap gap-2">
        <div>
            <h1 class="h3 mb-1">Neues Dokument</h1>
            <div class="small text-muted">
                Neuer Upload mit initialer Version und anschließendem asynchronen Ingest.
            </div>
        </div>

        <a href="{{ path('admin_documents') }}"
           class="btn btn-sm btn-outline-secondary">
            Zurück zur Übersicht
        </a>
    </div>

    {% for message in app.flashes('success') %}
        <div class="alert alert-success shadow-sm">
            {{ message }}
        </div>
    {% endfor %}

    {% for message in app.flashes('danger') %}
        <div class="alert alert-danger shadow-sm">
            {{ message }}
        </div>
    {% endfor %}

    {% for message in app.flashes('info') %}
        <div class="alert alert-info shadow-sm">
            {{ message }}
        </div>
    {% endfor %}

    <div class="card bg-dark border-secondary text-light mb-4 shadow-sm">
        <div class="card-body row g-4">
            <div class="col-lg-7">
                <h5 class="text-info mb-3">Warum ist der Titel wichtig?</h5>

                <ul class="small mb-0">
                    <li>Der Titel wird später Teil des fachlichen Kontexts des Dokuments.</li>
                    <li>Ein präziser Titel verbessert Retrieval, Chunk-Einordnung und spätere Tag-Pflege.</li>
                    <li>Generische Titel wie <code>Dokument 1</code> oder nur Dateinamen sind deutlich schwächer.</li>
                </ul>
            </div>

            <div class="col-lg-5">
                <h5 class="text-info mb-3">Gute Beispiele</h5>

                <ul class="small mb-0">
                    <li><code>Testomat 808 – Technisches Datenblatt</code></li>
                    <li><code>Resthärte-Messung – Produktübersicht</code></li>
                    <li><code>Indikator 300 – Anwendung und Dosierung</code></li>
                </ul>
            </div>
        </div>
    </div>

    <div class="card bg-black border-secondary text-light shadow-sm">
        <div class="card-body">

            <form method="post" enctype="multipart/form-data">

                <input type="hidden"
                       name="_token"
                       value="{{ csrf_token('create_document') }}">

                <div class="mb-4">
                    <label class="form-label">Titel</label>

                    <div class="alert alert-secondary small">
                        <strong>Hinweis zur Qualität:</strong><br>
                        Verwende einen fachlich präzisen Titel, der Produkt, Thema oder Dokumenttyp klar beschreibt.
                        Wenn kein Titel angegeben wird, wird automatisch der Dateiname verwendet.
                    </div>

                    <input class="form-control bg-dark text-light border-secondary"
                           name="title"
                           value="{{ app.request.get('title') }}"
                           placeholder="z. B. Testomat 808 – Technisches Datenblatt">

                    <div class="form-text text-secondary">
                        Der Titel muss nicht lang sein, aber fachlich eindeutig.
                    </div>
                </div>

                <div class="mb-4">
                    <label class="form-label">Datei</label>

                    <input type="file"
                           class="form-control bg-dark text-light border-secondary"
                           name="file"
                           required>

                    <div class="form-text text-secondary">
                        Unterstützte Formate: PDF, DOCX, TXT, MD.
                        Nach dem Upload wird automatisch Version 1 erstellt und ein Ingest-Job gestartet.
                    </div>
                </div>

                <div class="card bg-dark border-secondary mb-4">
                    <div class="card-body">
                        <h6 class="text-info mb-3">Was passiert nach dem Speichern?</h6>

                        <ul class="small mb-0">
                            <li>Das Dokument wird versioniert gespeichert.</li>
                            <li>Die erste Version wird als aktuelle Version gesetzt.</li>
                            <li>Ein asynchroner Ingest-Job verarbeitet das Dokument für den Wissensindex.</li>
                            <li>Später können dem Dokument gezielt Tags zugewiesen werden.</li>
                        </ul>
                    </div>
                </div>

                <div class="d-flex justify-content-end">
                    <button class="btn btn-outline-info">
                        Dokument speichern
                    </button>
                </div>

            </form>

        </div>
    </div>

    <div class="mt-4 small text-secondary">
        Hinweis: Ein sauber benanntes Dokument ist die beste Grundlage für gutes Retrieval und späteres präzises Tagging.
    </div>

{% endblock %}