{% extends "layout.html" %}
{% set active = 'documents' %}
{% block page_title %}{{ document.title }} – AzA Intern{% endblock %}
{% block content %}
<div class="page-header doc-editor-header">
  <h2>Dokument bearbeiten</h2>
  <div class="doc-editor-actions">
    <span id="save-status" class="save-status save-status-saved">Gespeichert</span>
    <button type="button" id="btn-save" class="btn btn-primary">Speichern</button>
    <a href="/documents" class="btn btn-secondary">Zur Liste</a>
  </div>
</div>

<div class="hint-banner">
  Keine Patientendaten, API-Keys oder Passwörter in Dokumenten speichern.
</div>

<div class="card doc-meta-card">
  <div class="grid-3">
    <div class="form-group">
      <label for="doc-title">Titel</label>
      <input type="text" id="doc-title" value="{{ document.title }}" maxlength="200">
    </div>
    <div class="form-group">
      <label for="doc-category">Kategorie</label>
      <select id="doc-category">
        <option value="">–</option>
        {% for c in categories %}
        <option value="{{ c }}" {% if document.category == c %}selected{% endif %}>{{ c }}</option>
        {% endfor %}
      </select>
    </div>
    <div class="form-group">
      <label for="doc-task">Aufgabe</label>
      <select id="doc-task">
        <option value="">–</option>
        {% for t in tasks %}
        <option value="{{ t.id }}" {% if document.task_id == t.id %}selected{% endif %}>{{ t.title }}</option>
        {% endfor %}
      </select>
    </div>
  </div>
</div>

<div class="card doc-editor-card">
  <div class="doc-toolbar" role="toolbar" aria-label="Formatierung">
    <button type="button" class="doc-tb-btn" data-cmd="bold" title="Fett"><strong>B</strong></button>
    <button type="button" class="doc-tb-btn" data-cmd="italic" title="Kursiv"><em>I</em></button>
    <button type="button" class="doc-tb-btn" data-cmd="underline" title="Unterstrichen"><u>U</u></button>
    <span class="doc-tb-sep"></span>
    <button type="button" class="doc-tb-btn" data-cmd="formatBlock" data-value="h2" title="Überschrift">H</button>
    <span class="doc-tb-sep"></span>
    <button type="button" class="doc-tb-btn" data-cmd="insertUnorderedList" title="Aufzählung">Aufzählung</button>
    <button type="button" class="doc-tb-btn" data-cmd="insertOrderedList" title="Nummerierung">Nummerierung</button>
    <button type="button" class="doc-tb-btn" data-cmd="indent" title="Einrücken">Einrücken</button>
    <button type="button" class="doc-tb-btn" data-cmd="outdent" title="Ausrücken">Ausrücken</button>
    <span class="doc-tb-sep"></span>
    <button type="button" class="doc-tb-btn" data-cmd="link" title="Link">Link</button>
    <span class="doc-tb-sep"></span>
    <button type="button" class="doc-tb-btn" data-cmd="undo" title="Rückgängig">↶</button>
    <button type="button" class="doc-tb-btn" data-cmd="redo" title="Wiederholen">↷</button>
  </div>
  <div id="doc-editor" class="doc-editor-body" contenteditable="true">{{ document.content_html|safe }}</div>
</div>

<form id="doc-delete-form" method="post" action="/documents/{{ document.id }}/delete"
      onsubmit="return confirm('Dokument wirklich löschen?');" style="margin-top:1rem">
  <input type="hidden" name="csrf_token" value="{{ csrf_token }}">
  <button type="submit" class="btn btn-danger btn-sm">Dokument löschen</button>
</form>
{% endblock %}

{% block extra_scripts %}
<script>
  window.AZA_DOC = {
    id: {{ document.id }},
    csrf: {{ csrf_token|tojson }}
  };
</script>
<script src="/static/js/documents.js"></script>
{% endblock %}