<!doctype html>
<html lang="de">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Minerva Platform</title>
<link rel="stylesheet" href="/static/vendor/fontawesome/css/fontawesome.min.css">
<link rel="stylesheet" href="/static/vendor/fontawesome/css/solid.min.css">
<link rel="stylesheet" href="/static/vendor/fontawesome/css/regular.min.css">
<link rel="stylesheet" href="/static/app.css?v={{ v() }}">
<link rel="stylesheet" href="/static/schale.css?v={{ v() }}">
{% for url in stile %}<link rel="stylesheet" href="{{ url }}?v={{ v() }}">
{% endfor %}</head>
<body{% if einzelnutzer() %} data-einzelnutzer="1"{% endif %}>
{# Die Beiträge der wirksamen Erweiterungen - Jinja zeichnet daraus die Leisten, schale.js belebt sie. #}
<script id="beitraege" type="application/json">{{ beitraege | tojson }}</script>
<div class="shell" id="schale">
  <nav class="aktiv" id="aktiv" aria-label="Kategorien">
    <a class="aktiv__marke" href="/app" title="Minerva Platform"><i class="fa-solid fa-diagram-project"></i></a>
    {% for a in beitraege.aktivitaeten %}
    <button type="button" data-aktivitaet="{{ a.id }}" title="{{ a.titel }}" aria-label="{{ a.titel }}"><i class="fa-solid fa-{{ a.symbol }}"></i></button>
    {% endfor %}
    <span class="aktiv__unten">
      <button type="button" id="kontoname" class="klickbar" title="Konto und Arbeitszeit: {{ nutzer.anzeigename }}">
        <i class="fa-regular fa-user"></i></button>
      <a href="/install" target="_blank" title="Desktop-App und Installation">
        <i class="fa-solid fa-box-open"></i></a>
      {# Die Desktop-App kennt nur ein Konto ohne Passwort: Abmelden führte in
         eine Anmeldemaske, aus der es kein Zurück gibt. #}
      {% if not einzelnutzer() %}
      <form method="post" action="/logout">
        <button type="submit" title="Abmelden">
          <i class="fa-solid fa-right-from-bracket"></i></button></form>
      {% endif %}
    </span>
  </nav>

  <aside class="panel" id="panel">
    {% for a in beitraege.aktivitaeten %}
    <div class="panel__gruppe" data-aktivitaet="{{ a.id }}" hidden>
      <div class="panel__titel">{{ a.titel }}</div>
      {% for ab in a.abschnitte %}
      <details class="abschnitt" data-abschnitt="{{ ab.id }}" data-art="{{ ab.art or 'liste' }}" open>
        <summary><i class="fa-solid fa-chevron-right abschnitt__pfeil"></i><span>{{ ab.titel }}</span>
          <span class="abschnitt__aktionen"></span></summary>
        <div class="abschnitt__inhalt">
          {% for an in ab.ansichten %}
          <a href="#{{ an.id }}" data-view="{{ an.id }}"><i class="fa-solid fa-{{ an.symbol }}"></i><span>{{ an.titel }}</span></a>
          {% endfor %}
        </div>
      </details>
      {% endfor %}
    </div>
    {% endfor %}
    <div class="griff griff--senkrecht" id="panel-griff" title="Breite ändern"></div>
  </aside>

  <main class="editor">
    <div class="reiter" id="reiter" role="tablist"></div>
    <header class="head">
      <div>
        <div class="head__crumb" id="crumb"></div>
        <h1 id="projektname">…</h1>
      </div>
      <div class="kpis" id="kpis"></div>
      <div class="head__actions">
        <button class="btn" id="btn-assistent"><i class="fa-solid fa-robot"></i> Assistent</button>
        <button class="btn" id="btn-projekt"><i class="fa-solid fa-plus"></i> Projekt</button>
        <button class="btn" id="btn-bericht"><i class="fa-solid fa-file-lines"></i> Bericht</button>
        <button class="btn" id="btn-ki"><i class="fa-solid fa-wand-magic-sparkles"></i> KI-Entwurf</button>
        <button class="btn btn--primary" id="btn-vorgang"><i class="fa-solid fa-plus"></i> Vorgang</button>
      </div>
    </header>
    <div class="tab-inhalte" id="tab-inhalte"></div>
    <section class="unten" id="unten" hidden>
      <div class="griff griff--waagerecht" id="unten-griff" title="Höhe ändern"></div>
      <div class="reiter reiter--unten" id="unten-reiter" role="tablist"></div>
      <div class="unten__inhalt" id="unten-inhalt"></div>
    </section>
  </main>

  <!-- Seitenleiste statt Dialog: eine Antwort dauert Minuten, in denen man
       weiterarbeiten können muss. -->
  <aside class="assistent" id="assistent" hidden>
    <div class="assistent__kopf">
      <b><i class="fa-solid fa-robot"></i> Assistent</b>
      <span>
        <button type="button" id="as-leeren" title="Gespräch leeren">
          <i class="fa-solid fa-broom"></i></button>
        <button type="button" id="as-zu" title="Schließen">
          <i class="fa-solid fa-xmark"></i></button></span>
    </div>
    <div class="assistent__anbieter muted" id="as-anbieter"></div>
    <div class="assistent__schnell" id="as-schnell"></div>
    <div class="assistent__verlauf" id="as-verlauf"></div>
    <div class="assistent__vorschlaege" id="as-vorschlaege" hidden></div>
    <form class="assistent__eingabe" id="as-form">
      <textarea id="as-frage" rows="2" maxlength="4000" required
        placeholder="Frage oder Auftrag, z. B. „Was ist überfällig?“"></textarea>
      <button class="btn btn--primary" id="as-senden" type="submit"
        title="Senden"><i class="fa-solid fa-paper-plane"></i></button>
      <button class="btn" id="as-stopp" type="button" hidden
        title="Abbrechen"><i class="fa-solid fa-stop"></i></button>
    </form>
  </aside>
  <footer class="status" id="status"></footer>
</div>

<!-- Vorgang: links Stammdaten, rechts Kommentare und Checklisten -->
<dialog id="dlg-vorgang" class="weit"><form method="dialog" class="modal">
  <h3 id="vorgang-titel"><i class="fa-solid fa-list-check"></i> Vorgang</h3>
  <p class="sub">Dauer 0 bedeutet Meilenstein. Sammelvorgänge leiten ihre Werte
     aus den Untervorgängen ab.</p>
  <div class="split">
    <div>
      <label for="v-title">Bezeichnung</label>
      <input id="v-title" type="text" required maxlength="200">
      <div class="row2">
        <div><label for="v-parent">Übergeordneter Vorgang</label>
          <select id="v-parent"></select></div>
        <div><label for="v-status">Status</label><select id="v-status"></select></div>
      </div>
      <div class="row2">
        <div><label for="v-duration">Dauer in Tagen</label>
          <input id="v-duration" type="number" min="0" max="365" value="1"></div>
        <div><label for="v-anchor">Frühester Start</label>
          <input id="v-anchor" type="date"></div>
      </div>
      <div class="row2">
        <div><label for="v-assignee">Verantwortlich</label><select id="v-assignee"></select></div>
        <div><label for="v-effort">Aufwand in Stunden</label>
          <input id="v-effort" type="number" min="0" step="0.5" value="0"></div>
      </div>
      <div class="row2">
        <div><label for="v-progress">Fortschritt in %</label>
          <input id="v-progress" type="number" min="0" max="100" value="0"></div>
        <div><label for="v-key">Kennung</label>
          <input id="v-key" type="text" maxlength="20" placeholder="automatisch"></div>
      </div>
      <label>Vorgänger</label>
      <div class="chips" id="v-deps"></div>
      <label for="v-note">Notiz</label>
      <textarea id="v-note" rows="2"></textarea>
      <div id="v-dok-block" hidden>
        <label><i class="fa-solid fa-paperclip"></i> Angehängte Dokumente</label>
        <div class="anhang" id="v-dokumente"></div>
      </div>
    </div>
    <div class="komm" id="komm-spalte">
      <label><i class="fa-regular fa-comment-dots"></i> Kommentare und Checklisten</label>
      <div class="komm__liste" id="komm-liste"></div>
      <textarea id="komm-neu" rows="3"
        placeholder="Kommentar … Checkliste mit Zeilen wie&#10;- [ ] Sicherung geprüft"></textarea>
      <div class="komm__foot">
        <button type="button" class="btn btn--ghost" id="komm-vorlage"><i class="fa-solid fa-list-check"></i> Checkliste einfügen</button>
        <button type="button" class="btn" id="komm-senden"><i class="fa-solid fa-paper-plane"></i> Kommentar speichern</button>
      </div>
    </div>
  </div>
  <div class="modal__foot">
    <button class="btn btn--danger left" id="v-delete" type="button" hidden><i class="fa-solid fa-trash"></i> Löschen</button>
    <button class="btn" type="button" data-schliessen>Schließen</button>
    <button class="btn btn--primary" id="v-save" type="submit">Speichern</button>
  </div>
</form></dialog>

<dialog id="dlg-projekt"><form method="dialog" class="modal">
  <h3 id="projekt-titel"><i class="fa-solid fa-diagram-project"></i> Neues Projekt</h3>
  <p class="sub" id="projekt-sub">Der Projektstart ist der früheste Termin aller Vorgänge.</p>
  <div id="p-ws-zeile"><label for="p-ws">Arbeitsbereich</label>
    <select id="p-ws"></select></div>
  <label for="p-name">Projektname</label>
  <input id="p-name" type="text" required maxlength="120">
  <div class="row2">
    <div><label for="p-client">Auftraggeber</label>
      <input id="p-client" type="text" maxlength="120"></div>
    <div><label for="p-start">Projektstart</label><input id="p-start" type="date"></div>
  </div>
  <label for="p-deadline">Wunschtermin des Auftraggebers (freiwillig)</label>
  <input id="p-deadline" type="date">
  <label for="p-columns">Kanban-Spalten (durch Komma getrennt)</label>
  <input id="p-columns" type="text" value="Backlog, In Arbeit, Review, Fertig">
  <div id="p-github-zeile" hidden>
    <label for="p-github">GitHub-Repository (owner/name) – Issues werden zu Vorgängen</label>
    <input id="p-github" type="text" maxlength="120" placeholder="z. B. firma/projekt">
  </div>
  <div id="p-vorlage-zeile">
    <label for="p-vorlage">Projektvorlage (freiwillig) – Dokumentation und Phasen zum Start</label>
    <select id="p-vorlage"></select>
  </div>
  <div class="modal__foot">
    <button class="btn btn--danger left" id="p-delete" type="button" hidden><i class="fa-solid fa-trash"></i> Projekt löschen</button>
    <button class="btn" type="button" data-schliessen>Abbrechen</button>
    <button class="btn btn--primary" id="p-save" type="submit">Speichern</button>
  </div>
</form></dialog>

<dialog id="dlg-org"><form method="dialog" class="modal">
  <h3 id="org-titel"><i class="fa-solid fa-sitemap"></i> Organisationseinheit</h3>
  <p class="sub" id="org-sub"></p>
  <label for="o-name">Bezeichnung</label>
  <input id="o-name" type="text" required maxlength="120">
  <label for="o-kind">Art</label>
  <select id="o-kind">
    <option value="company">Unternehmen</option>
    <option value="branch">Niederlassung</option>
    <option value="office">Büro</option>
    <option value="department">Abteilung</option>
  </select>
  <div class="modal__foot">
    <button class="btn btn--danger left" id="o-delete" type="button" hidden><i class="fa-solid fa-trash"></i> Löschen</button>
    <button class="btn" type="button" data-schliessen>Abbrechen</button>
    <button class="btn btn--primary" id="o-save" type="submit">Speichern</button>
  </div>
</form></dialog>

<dialog id="dlg-ws"><form method="dialog" class="modal">
  <h3 id="ws-titel"><i class="fa-solid fa-layer-group"></i> Arbeitsbereich</h3>
  <p class="sub">Ein Arbeitsbereich bündelt Projekte. „Persönlich“ braucht keine
     Organisation – er entsteht in deinem eigenen Bereich.</p>
  <div class="row2">
    <div><label for="w-kind">Art</label>
      <select id="w-kind">
        <option value="work">Arbeit</option>
        <option value="freelance">Freelance</option>
        <option value="personal">Persönlich</option>
      </select></div>
    <div><label for="w-unit">Organisationseinheit</label>
      <select id="w-unit"></select></div>
  </div>
  <label for="w-name">Bezeichnung</label>
  <input id="w-name" type="text" required maxlength="120">
  <label for="w-desc">Beschreibung</label>
  <textarea id="w-desc" rows="2" maxlength="2000"></textarea>
  <div class="modal__foot">
    <button class="btn btn--danger left" id="w-delete" type="button" hidden><i class="fa-solid fa-trash"></i> Löschen</button>
    <button class="btn" type="button" data-schliessen>Abbrechen</button>
    <button class="btn btn--primary" id="w-save" type="submit">Speichern</button>
  </div>
</form></dialog>

<dialog id="dlg-markt"><form method="dialog" class="modal">
  <h3 id="markt-titel"><i class="fa-solid fa-handshake"></i> Ausschreibung</h3>
  <p class="sub">Sichtbar für alle Angemeldeten. Die Gebote sieht nur die Leitung
     des Arbeitsbereichs.</p>
  <div class="row2">
    <div><label for="m-kind">Art</label>
      <select id="m-kind">
        <option value="work">Arbeit im Haus</option>
        <option value="freelance">Freelance-Auftrag</option>
      </select></div>
    <div><label for="m-ws">Arbeitsbereich</label><select id="m-ws"></select></div>
  </div>
  <label for="m-title">Titel</label>
  <input id="m-title" type="text" required maxlength="200">
  <label for="m-desc">Beschreibung</label>
  <textarea id="m-desc" rows="4" maxlength="8000"
    placeholder="Was ist zu tun, welche Fähigkeiten werden gebraucht?"></textarea>
  <div class="row2">
    <div><label for="m-budget">Budget</label>
      <input id="m-budget" type="number" min="0" step="50" value="0"></div>
    <div><label for="m-effort">Aufwand in Stunden</label>
      <input id="m-effort" type="number" min="0" step="0.5" value="0"></div>
  </div>
  <div class="row2">
    <div><label for="m-deadline">Frist</label><input id="m-deadline" type="date"></div>
    <div><label for="m-projekt">Projekt (wird beim Zuschlag bestückt)</label>
      <select id="m-projekt"></select></div>
  </div>
  <div class="row2" id="m-skill-zeile" hidden>
    <div><label for="m-skill">Verlangter Nachweis (Wissenstest)</label>
      <select id="m-skill"></select></div>
    <div><label for="m-stufe">Mindeststufe</label>
      <select id="m-stufe">
        <option value="1">Stufe 1</option><option value="2">Stufe 2</option>
        <option value="3">Stufe 3</option>
      </select></div>
  </div>
  <div class="modal__foot">
    <button class="btn btn--danger left" id="m-delete" type="button" hidden><i class="fa-solid fa-trash"></i> Löschen</button>
    <button class="btn" type="button" data-schliessen>Abbrechen</button>
    <button class="btn btn--primary" id="m-save" type="submit">Speichern</button>
  </div>
</form></dialog>

<dialog id="dlg-gebot"><form method="dialog" class="modal">
  <h3 id="gebot-titel"><i class="fa-solid fa-gavel"></i> Gebot abgeben</h3>
  <p class="sub" id="gebot-sub"></p>
  <label for="g-price">Preis</label>
  <input id="g-price" type="number" min="0" step="50" value="0">
  <label for="g-message">Warum du?</label>
  <textarea id="g-message" rows="3" maxlength="4000"
    placeholder="Erfahrung, Verfügbarkeit, Vorgehen"></textarea>
  <div class="modal__foot">
    <button class="btn btn--danger left" id="g-delete" type="button" hidden><i class="fa-solid fa-xmark"></i> Gebot zurückziehen</button>
    <button class="btn" type="button" data-schliessen>Abbrechen</button>
    <button class="btn btn--primary" id="g-save" type="submit">Gebot senden</button>
  </div>
</form></dialog>

<dialog id="dlg-personen"><form method="dialog" class="modal">
  <h3 id="pe-titel"><i class="fa-solid fa-users"></i> Personen</h3>
  <p class="sub">Rollen vererben sich nach unten. Der Einladungslink gilt sieben Tage.</p>
  <div id="pe-liste"></div>
  <div class="row2">
    <div><label for="pe-name">Benutzername oder E-Mail</label>
      <input id="pe-name" type="text" maxlength="120"></div>
    <div><label for="pe-rolle">Rolle</label><select id="pe-rolle"></select></div>
  </div>
  <label for="pe-url">Einladungslink</label>
  <input id="pe-url" type="text" readonly placeholder="über „Einladungslink“ erzeugen">
  <div class="modal__foot">
    <button class="btn left" id="pe-link" type="button"><i class="fa-solid fa-link"></i> Einladungslink</button>
    <button class="btn" type="button" data-schliessen>Schließen</button>
    <button class="btn btn--primary" id="pe-add" type="submit"><i class="fa-solid fa-user-plus"></i> Hinzufügen</button>
  </div>
</form></dialog>

<dialog id="dlg-bericht" class="weit"><form method="dialog" class="modal">
  <h3><i class="fa-solid fa-file-lines"></i> Bericht</h3>
  <p class="sub">Kennzahlen, Risiken und Veränderungen sind gerechnet. Der
     Erzählteil kommt auf Wunsch vom lokalen Modell und dauert ein bis drei Minuten.</p>
  <div class="row2">
    <div><label for="b-art">Art</label>
      <select id="b-art">
        <option value="status">Statusbericht (intern)</option>
        <option value="beschreibung">Projektbeschreibung für den Auftraggeber</option>
      </select></div>
    <div><label for="b-seit">Veränderungen seit</label>
      <input id="b-seit" type="date"></div>
  </div>
  <label><input type="checkbox" id="b-ki"> Zusammenfassung und Empfehlungen vom
    lokalen Modell schreiben lassen</label>
  <label for="b-text">Bericht</label>
  <textarea id="b-text" rows="18" spellcheck="false"></textarea>
  <div class="modal__foot">
    <button class="btn left" id="b-neu" type="button"><i class="fa-solid fa-rotate"></i> Neu erzeugen</button>
    <button class="btn" type="button" data-schliessen>Schließen</button>
    <button class="btn btn--primary" id="b-laden" type="submit"><i class="fa-solid fa-download"></i> Herunterladen</button>
  </div>
</form></dialog>

<dialog id="dlg-ki"><form method="dialog" class="modal">
  <h3><i class="fa-solid fa-wand-magic-sparkles"></i> Projektentwurf durch das lokale Modell</h3>
  <p class="sub" id="ki-status">Verbindung wird geprüft …</p>
  <label for="ki-text">Was soll geplant werden?</label>
  <textarea id="ki-text" rows="4" maxlength="4000"
    placeholder="z. B. Einführung eines Ticketsystems im IT-Support mit Migration der Altdaten und Schulung der Mitarbeiter"></textarea>
  <label><input type="checkbox" id="ki-replace"> vorhandene Vorgänge vorher entfernen</label>
  <div class="modal__foot">
    <button class="btn" type="button" data-schliessen>Abbrechen</button>
    <button class="btn btn--primary" id="ki-go" type="submit">Entwurf erzeugen</button>
  </div>
</form></dialog>

<dialog id="dlg-meeting"><form method="dialog" class="modal">
  <h3 id="mt-titel"><i class="fa-solid fa-calendar-plus"></i> Besprechung</h3>
  <p class="sub">Die Vorschläge berücksichtigen die Arbeitszeiten und bereits
     vereinbarten Termine aller Beteiligten.</p>
  <label for="mt-title">Thema</label>
  <input id="mt-title" type="text" required maxlength="200">
  <div class="row2">
    <div><label for="mt-start">Beginn</label>
      <input id="mt-start" type="datetime-local"></div>
    <div><label for="mt-dauer">Dauer in Minuten</label>
      <input id="mt-dauer" type="number" min="5" max="720" step="15" value="60"></div>
  </div>
  <div class="row2">
    <div><label for="mt-ort">Ort oder Link</label>
      <input id="mt-ort" type="text" maxlength="200"></div>
    <div><label for="mt-projekt">Projektbezug</label>
      <select id="mt-projekt"></select></div>
  </div>
  <label>Beteiligte</label>
  <div class="chips" id="mt-leute"></div>
  <label for="mt-notiz">Notizen</label>
  <textarea id="mt-notiz" rows="2" maxlength="4000"></textarea>
  <div class="vorschlag" id="mt-vorschlaege"></div>
  <div class="modal__foot">
    <button class="btn btn--danger left" id="mt-delete" type="button" hidden><i class="fa-solid fa-xmark"></i> Absagen</button>
    <button class="btn left" id="mt-ableiten" type="button"><i class="fa-solid fa-wand-magic-sparkles"></i> Aufgaben ableiten</button>
    <button class="btn left" id="mt-agenda" type="button"><i class="fa-solid fa-list-ul"></i> Agenda vorschlagen</button>
    <button class="btn left" id="mt-suchen" type="button"><i class="fa-solid fa-magnifying-glass"></i> Freie Termine suchen</button>
    <button class="btn" type="button" data-schliessen>Abbrechen</button>
    <button class="btn btn--primary" id="mt-save" type="submit">Speichern</button>
  </div>
</form></dialog>

<dialog id="dlg-dok"><form method="dialog" class="modal">
  <h3 id="dok-titel"><i class="fa-solid fa-file-arrow-up"></i> Dokument</h3>
  <p class="sub" id="dok-sub">Neue Fassungen ersetzen nichts – die alten bleiben abrufbar.</p>
  <label for="dk-title">Bezeichnung</label>
  <input id="dk-title" type="text" maxlength="200">
  <div class="row2">
    <div><label for="dk-task">Zu Vorgang</label><select id="dk-task"></select></div>
    <div><label for="dk-note">Notiz zur Fassung</label>
      <input id="dk-note" type="text" maxlength="300"></div>
  </div>
  <div class="row2">
    <div><label for="dk-ordner">Ordner</label>
      <input id="dk-ordner" type="text" maxlength="200" list="dk-ordner-liste" placeholder="z. B. Verträge/2026">
      <datalist id="dk-ordner-liste"></datalist></div>
    <div><label for="dk-tags">Schlagwörter (durch Komma getrennt)</label>
      <input id="dk-tags" type="text" maxlength="400" placeholder="wichtig, kunde"></div>
  </div>
  <label for="dk-datei" id="dk-datei-label">Datei</label>
  <input id="dk-datei" type="file">
  <div id="dk-status" class="dms__statuszeile"></div>
  <div id="dk-historie"></div>
  <div id="dk-verlauf"></div>
  <div class="modal__foot">
    <button class="btn btn--danger left" id="dk-delete" type="button" hidden><i class="fa-solid fa-trash"></i> Löschen</button>
    <button class="btn" type="button" data-schliessen>Abbrechen</button>
    <button class="btn btn--primary" id="dk-save" type="submit">Speichern</button>
  </div>
</form></dialog>

<!-- Profil einer anderen Person: nur lesen. Die Adresszeile kennt keine
     Personen, deshalb ein Dialog statt einer Ansicht. -->
<dialog id="dlg-profil"><form method="dialog" class="modal">
  <h3 id="pr-titel"><i class="fa-regular fa-user"></i> Profil</h3>
  <div id="pr-inhalt"></div>
  <div class="modal__foot">
    <span id="pr-aktionen" class="left"></span>
    <button class="btn btn--primary" type="submit">Schließen</button>
  </div>
</form></dialog>

<!-- Ersteinrichtung: drei Schritte in einem Formular. Die Eingabetaste führt
     zum nächsten Schritt, zuletzt zum Abschluss. -->
<dialog id="dlg-einrichtung"><form method="dialog" class="modal">
  <h3><i class="fa-solid fa-wand-magic-sparkles"></i> Willkommen bei Minerva</h3>
  <p class="sub">Drei kurze Schritte – alles lässt sich später in den Einstellungen ändern.</p>
  <fieldset id="e-schritt-1">
    <legend>Wofür willst du Minerva nutzen?</legend>
    <label class="wahl"><input type="radio" name="e-zweck" value="work" checked>
      <span><b>Arbeit</b> – im Unternehmen, mit Team und Organisation</span></label>
    <label class="wahl"><input type="radio" name="e-zweck" value="freelance">
      <span><b>Freelance</b> – Aufträge, Börse, Kundenprojekte</span></label>
    <label class="wahl"><input type="radio" name="e-zweck" value="personal">
      <span><b>Persönlich</b> – eigene Vorhaben und Planung</span></label>
    <div id="e-firma-zeile">
      <label for="e-firma">Name des Unternehmens (freiwillig)</label>
      <input id="e-firma" type="text" maxlength="120" placeholder="Du wirst dessen Administration">
    </div>
  </fieldset>
  <fieldset id="e-schritt-2" hidden>
    <legend>Erweiterungen</legend>
    <p class="muted">Lokal von Haus aus. Was Daten nach außen sendet, ist markiert und
      nie vorausgewählt.</p>
    <div id="e-module"></div>
  </fieldset>
  <fieldset id="e-schritt-3" hidden>
    <legend>Dein Profil</legend>
    <label for="e-name">Anzeigename</label>
    <input id="e-name" type="text" maxlength="120">
    <label for="e-bio">Über dich</label>
    <textarea id="e-bio" rows="3" maxlength="2000"
      placeholder="Womit du arbeitest, was du suchst"></textarea>
    <label for="e-skills">Fähigkeiten (durch Komma getrennt)</label>
    <input id="e-skills" type="text" placeholder="Python, Projektleitung, Design">
  </fieldset>
  <div class="modal__foot">
    <button class="btn btn--ghost left" id="e-skip" type="button">Überspringen</button>
    <button class="btn" id="e-zurueck" type="button" hidden>Zurück</button>
    <button class="btn btn--primary" id="e-fertig" type="submit">Weiter</button>
  </div>
</form></dialog>

<!-- Agent: Auftrag in Worten, erlaubte Aktionen, Auslöser. Was etwas ändert,
     wartet auf Freigabe - außer Kommentare, wenn „autonom“ gesetzt ist. -->
<dialog id="dlg-agent"><form method="dialog" class="modal">
  <h3 id="agent-titel"><i class="fa-solid fa-robot"></i> Agent</h3>
  <p class="sub">Der Agent läuft mit deinen Rechten und schreibt in den Projektkanal.
     Vorschläge, die etwas ändern, warten in der Zentrale auf Freigabe.</p>
  <label for="ag-name">Name (im Kanal als @name erreichbar)</label>
  <input id="ag-name" type="text" required maxlength="80">
  <label for="ag-prompt">Auftrag in Worten</label>
  <textarea id="ag-prompt" rows="4" maxlength="4000"
    placeholder="z. B. Nenne überfällige Vorgänge und schlage vor, wer entlastet werden sollte."></textarea>
  <label>Darf vorschlagen</label>
  <div class="chips" id="ag-aktionen">
    <label><input type="checkbox" value="kommentar"> Kommentar</label>
    <label><input type="checkbox" value="vorgang_anlegen"> Vorgang anlegen</label>
    <label><input type="checkbox" value="vorgang_aendern"> Vorgang ändern</label>
    <label><input type="checkbox" value="besprechung"> Besprechung</label>
  </div>
  <div class="row2">
    <div><label for="ag-ausloeser">Auslöser</label>
      <select id="ag-ausloeser">
        <option value="manuell">von Hand</option>
        <option value="taeglich">täglich</option>
        <option value="woechentlich">wöchentlich</option>
        <option value="erwaehnung">bei @Erwähnung im Projektkanal</option>
        <option value="besprechung">nach einer Besprechung (Notizen)</option>
      </select></div>
    <div id="ag-zeit"><div class="row2">
      <div><label for="ag-uhrzeit">Uhrzeit</label><input id="ag-uhrzeit" type="time" value="07:00"></div>
      <div><label for="ag-wochentag">Wochentag</label>
        <select id="ag-wochentag">
          <option value="0">Montag</option><option value="1">Dienstag</option>
          <option value="2">Mittwoch</option><option value="3">Donnerstag</option>
          <option value="4">Freitag</option><option value="5">Samstag</option>
          <option value="6">Sonntag</option>
        </select></div>
    </div></div>
  </div>
  <label><input type="checkbox" id="ag-autonom"> Kommentare selbst übernehmen (ohne Freigabe)</label>
  <label><input type="checkbox" id="ag-aktiv" checked> Aktiv</label>
  <div class="modal__foot">
    <button class="btn btn--danger left" id="ag-delete" type="button" hidden><i class="fa-solid fa-trash"></i> Löschen</button>
    <button class="btn" type="button" data-schliessen>Abbrechen</button>
    <button class="btn btn--primary" id="ag-save" type="submit">Speichern</button>
  </div>
</form></dialog>

<!-- Mail schreiben oder beantworten - über das eigene Postfach. -->
<dialog id="dlg-mail"><form method="dialog" class="modal">
  <h3 id="mail-titel"><i class="fa-solid fa-envelope"></i> Neue Mail</h3>
  <p class="sub">Geht über dein Postfach; eine Kopie im Ordner „Gesendet“ legt Minerva nicht an.</p>
  <label for="ml-an">An</label>
  <input id="ml-an" type="email" required maxlength="120">
  <label for="ml-betreff">Betreff</label>
  <input id="ml-betreff" type="text" maxlength="200">
  <label for="ml-text">Text</label>
  <textarea id="ml-text" rows="10" maxlength="20000"></textarea>
  <div class="modal__foot">
    <button class="btn" type="button" data-schliessen>Abbrechen</button>
    <button class="btn btn--primary" id="ml-senden" type="submit"><i class="fa-solid fa-paper-plane"></i> Senden</button>
  </div>
</form></dialog>

<!-- Befehlspalette: Strg+Umschalt+P Befehle, Strg+P Dateien -->
<dialog id="dlg-palette" class="palette"><form method="dialog" class="palette__form">
  <input id="pal-feld" type="text" autocomplete="off" spellcheck="false" placeholder="Befehl oder Ansicht …"
    aria-label="Befehlspalette">
  <div id="pal-liste" class="palette__liste" role="listbox"></div>
  <button class="btn btn--primary" type="submit" hidden>Ausführen</button>
</form></dialog>

<!-- Vorlagen: Dokumentation je Projektart in die Ablage oder den Arbeitsordner -->
<dialog id="dlg-vorlagen"><form method="dialog" class="modal">
  <h3><i class="fa-solid fa-file-lines"></i> Vorlagen</h3>
  <p class="sub">Gefüllt mit Projektname, Auftraggeber, Leitung und Datum. Alles ist Markdown und
     lässt sich im Editor weiterschreiben.</p>
  <label for="vl-typ">Projektart</label>
  <select id="vl-typ"></select>
  <div id="vl-liste" class="vorlagen"></div>
  <div class="vorlagen__ziel">
    <label><input type="radio" name="vl-ziel" id="vl-ablage" checked> In die Ablage (Ordner „Dokumentation“)</label>
    <label><input type="radio" name="vl-ziel" id="vl-arbeitsordner"> In den Arbeitsordner (Editor)</label>
  </div>
  <div class="modal__foot">
    <button class="btn" type="button" id="vl-alle" hidden><i class="fa-solid fa-layer-group"></i> Alle dieser Art + Phasen</button>
    <button class="btn" type="button" data-schliessen>Abbrechen</button>
    <button class="btn btn--primary" type="submit"><i class="fa-solid fa-plus"></i> Anlegen</button>
  </div>
</form></dialog>

<!-- Werkstatt: ein Name für neue Datei, neuen Ordner, Umbenennen -->
<dialog id="dlg-name"><form method="dialog" class="modal">
  <h3 id="dn-titel"><i class="fa-solid fa-pen"></i> Name</h3>
  <p class="sub" id="dn-hinweis"></p>
  <label for="dn-wert">Name</label>
  <input id="dn-wert" type="text" required maxlength="200" autocomplete="off">
  <div class="modal__foot">
    <button class="btn" type="button" data-schliessen>Abbrechen</button>
    <button class="btn btn--primary" type="submit" value="ok">Übernehmen</button>
  </div>
</form></dialog>

<!-- Werkstatt: die Datei wurde inzwischen geändert -->
<dialog id="dlg-konflikt"><form method="dialog" class="modal">
  <h3><i class="fa-solid fa-code-compare"></i> Auf dem Server geändert</h3>
  <p class="sub">Jemand hat diese Datei inzwischen gespeichert. Überschreiben verwirft den
     fremden Stand, Neu laden verwirft deine Änderungen.</p>
  <div class="modal__foot">
    <button class="btn" type="button" data-schliessen>Abbrechen</button>
    <button class="btn" type="button" id="konflikt-laden">Neu laden</button>
    <button class="btn btn--primary" type="submit" value="ueberschreiben">Überschreiben</button>
  </div>
</form></dialog>

<!-- Konnektor: eine Anbindung nach außen. Geheimnisse werden beim Bearbeiten
     maskiert gezeigt und nur ersetzt, wenn ein neuer Wert eingegeben wird. -->
<dialog id="dlg-konnektor"><form method="dialog" class="modal">
  <h3 id="konnektor-titel"><i class="fa-solid fa-plug"></i> Konnektor</h3>
  <p class="sub"><span class="pill pill--extern"><i class="fa-solid fa-cloud-arrow-up"></i> sendet Daten nach außen</span>
     Nur eingeschaltete Konnektoren werden benutzt.</p>
  <div class="row2">
    <div><label for="kn-kind">Art</label>
      <select id="kn-kind">
        <option value="openai">Modellanbieter (OpenAI-kompatibel)</option>
        <option value="github">GitHub</option>
        <option value="webhook">Webhook (ausgehend)</option>
      </select></div>
    <div><label for="kn-name">Bezeichnung</label>
      <input id="kn-name" type="text" required maxlength="80"></div>
  </div>
  <div id="kn-openai">
    <label for="kn-url">Adresse der Schnittstelle</label>
    <input id="kn-url" type="text" maxlength="300" placeholder="https://api.openai.com/v1">
    <div class="row2">
      <div><label for="kn-key">API-Schlüssel</label>
        <input id="kn-key" type="password" maxlength="300" autocomplete="off"></div>
      <div><label for="kn-model">Modell (leer = erstes verfügbares)</label>
        <input id="kn-model" type="text" maxlength="120" placeholder="gpt-4o-mini"></div>
    </div>
  </div>
  <div id="kn-github" hidden>
    <label for="kn-token">Personal Access Token (Leserecht auf Issues und Commits)</label>
    <input id="kn-token" type="password" maxlength="300" autocomplete="off">
  </div>
  <div id="kn-webhook" hidden>
    <label for="kn-whurl">Adresse</label>
    <input id="kn-whurl" type="text" maxlength="300" placeholder="https://n8n.beispiel.de/webhook/…">
    <label for="kn-secret">Geheimnis (signiert jede Sendung, mindestens 8 Zeichen)</label>
    <input id="kn-secret" type="password" maxlength="200" autocomplete="off">
    <label>Ereignisse</label>
    <div class="chips" id="kn-ereignisse">
      <label><input type="checkbox" value="job.done" checked> Auftrag fertig</label>
      <label><input type="checkbox" value="job.failed" checked> Auftrag gescheitert</label>
      <label><input type="checkbox" value="job.wartet" checked> Freigabe nötig</label>
      <label><input type="checkbox" value="agent.nachricht" checked> Agent hat geantwortet</label>
    </div>
  </div>
  <label><input type="checkbox" id="kn-aktiv" checked> Eingeschaltet</label>
  <div class="modal__foot">
    <button class="btn btn--danger left" id="kn-delete" type="button" hidden><i class="fa-solid fa-trash"></i> Löschen</button>
    <button class="btn" type="button" data-schliessen>Abbrechen</button>
    <button class="btn btn--primary" id="kn-save" type="submit">Speichern</button>
  </div>
</form></dialog>

<!-- Wissenstest: alle Fragen auf einmal, eine Abgabe. Lösungen kennt nur der Dienst. -->
<dialog id="dlg-test" class="weit"><form method="dialog" class="modal">
  <h3 id="test-titel"><i class="fa-solid fa-graduation-cap"></i> Wissenstest</h3>
  <div id="test-inhalt"></div>
  <div class="modal__foot">
    <button class="btn" type="button" data-schliessen>Schließen</button>
    <button class="btn btn--primary" id="test-abgeben" type="submit">Abgeben</button>
  </div>
</form></dialog>

<div id="meldungen" aria-live="polite"></div>

<script src="/static/app.js?v={{ v() }}"></script>
<script src="/static/schale.js?v={{ v() }}"></script>
<script src="/static/leiste.js?v={{ v() }}"></script>
<script src="/static/palette.js?v={{ v() }}"></script>
<script src="/static/dms.js?v={{ v() }}"></script>
{# Die Skripte der wirksamen Erweiterungen - sie tragen sich in app.js und schale.js ein. #}
{% for url in skripte %}<script src="{{ url }}?v={{ v() }}"></script>
{% endfor %}
</body>
</html>
