{% extends 'core/base.html' %}
{% block content %}
<a class="btn btn-sm btn-outline-secondary mb-3" href="/">← zurück</a>
<form class="card item-card shadow-sm position-relative" method="post" enctype="multipart/form-data" x-data="quickComposer([{% for tag in tags %}'{{ tag.name|escapejs }}'{% if not forloop.last %},{% endif %}{% endfor %}])">
  {% csrf_token %}
  <div class="card-body vstack gap-3">
    <h1 class="h4">Erweiterter Editor</h1>
    <textarea class="form-control" name="content" rows="16" placeholder="Längeres Dokument … /todo /link /journal /public #tag [[  ![[" x-model="text" @keydown="onKeydown($event)" @input="onInput($event)" @paste="handlePaste($event)"></textarea>
    <div class="slash-menu list-group shadow" x-show="open" @click.outside="open=false" x-cloak>
      <template x-for="(cmd, idx) in filtered" :key="cmd.token"><button type="button" class="list-group-item list-group-item-action" :class="{'active': idx === active}" @mouseenter="active=idx" @mousedown.prevent="insert(cmd.token)"><strong x-text="cmd.token"></strong> <span class="text-muted" x-text="cmd.label"></span></button></template>
    </div>
    <div>
      <label class="form-label">Bilder/Dateien</label>
      <input class="form-control" type="file" name="files" multiple x-ref="fileInput" @change="previewFile($event)">
      <div class="form-text">Mit <code>![[</code> können hochgeladene oder gepastete Bilder im Text eingefügt werden.</div>
    </div>
    <template x-if="preview"><div class="small"><span class="text-muted">Bildvorschau:</span><br><img :src="preview" class="img-thumbnail mt-1" style="max-height:180px"></div></template>
    <button class="btn btn-dark align-self-start">Speichern</button>
  </div>
</form>
{% endblock %}