{% extends "admin/base.html" %}
{% block title %}{{ post.title }}{% endblock %}
{% block content %}
<form method="post" id="editor" class="editor" data-preview-url="{{ url_for('admin.preview', post_id=post.id) }}"
      data-upload-url="{{ url_for('admin.upload', post_id=post.id) }}" data-csrf="{{ csrf }}">
  <input type="hidden" name="csrf" value="{{ csrf }}">
  <div class="row">
    <label class="grow">Tittel <input name="title" value="{{ post.title }}" required autofocus></label>
    <label class="grow">Tagger <span class="hint" id="tags-hint">Kommaseparert, f.eks. «friluftsliv, skog»</span>
      <input name="tags" value="{{ post.tags|join(', ') }}" aria-describedby="tags-hint" autocapitalize="none"></label>
    <span class="meta">
      {% if post.draft %}<span class="badge">utkast</span> Publiseres på <code>{{ cfg.site_url }}/{{ post.url_path }}</code> (følger tittelen)
      {% else %}Publisert på <a href="{{ url_for('public', path=post.url_path) }}">{{ cfg.site_url }}/{{ post.url_path }}</a>
      · <a href="{{ url_for('admin.history', post_id=post.id) }}">Historikk</a>{% endif %}
    </span>
  </div>

  <div class="tabs" role="tablist" aria-label="Visning">
    <button type="button" role="tab" aria-selected="true" aria-controls="pane-write" id="tab-write" tabindex="0">Skriv</button>
    <button type="button" role="tab" aria-selected="false" aria-controls="pane-preview" id="tab-preview" tabindex="-1">Forhåndsvisning</button>
  </div>

  <div class="panes">
    <section id="pane-write" role="tabpanel" aria-labelledby="tab-write">
      <div class="toolbar" role="toolbar" aria-label="Formatering">
        <button type="button" data-wrap="**" aria-label="Fet" aria-keyshortcuts="Control+B" title="Fet (Ctrl+B)"><b>B</b></button>
        <button type="button" data-wrap="_" aria-label="Kursiv" aria-keyshortcuts="Control+I" title="Kursiv (Ctrl+I)"><i>I</i></button>
        <button type="button" data-prefix="## " aria-label="Overskrift">H2</button>
        <button type="button" data-prefix="- ">Liste</button>
        <button type="button" data-prefix="> ">Sitat</button>
        <button type="button" data-link>Lenke</button>
        <button type="button" id="btn-image">Bilde</button>
        <input type="file" id="file-input" accept="image/*" multiple hidden>
      </div>
      <label for="body" class="visually-hidden">Innhold</label>
      <textarea name="body" id="body" rows="18" spellcheck="true" aria-describedby="body-hint"
        placeholder="Skriv i Markdown.">{{ post.body }}</textarea>
      <p class="meta" id="body-hint">Markdown. Dra inn, lim inn eller trykk «Bilde» for å laste opp bilder.</p>
      <p class="meta" id="upload-status" role="status" aria-live="polite"></p>
    </section>
    <section id="pane-preview" role="tabpanel" aria-labelledby="tab-preview" hidden>
      <div class="preview body" id="preview"><p class="meta">Forhåndsvisningen kommer her.</p></div>
    </section>
  </div>

  <div class="row actions">
    <button type="submit" name="action" value="save" class="primary">Lagre</button>
    {% if post.draft %}
    <button type="submit" name="action" value="publish">Publiser</button>
    {% else %}
    <button type="submit" name="action" value="unpublish">Avpubliser</button>
    {% endif %}
    <span class="meta" id="dirty-status" role="status" aria-live="polite"></span>
  </div>
</form>

{% if post.images %}
<details class="images">
  <summary>Bilder i dette innlegget ({{ post.images|length }})</summary>
  <ul>
  {% for name in post.images %}
    <li>
      <img src="{{ url_for('admin.media', post_id=post.id, filename=name) }}" alt="" loading="lazy">
      <code>![]({{ name }})</code>
      <form method="post" action="{{ url_for('admin.delete_image', post_id=post.id) }}" class="inline" data-confirm="Slette {{ name }}?">
        <input type="hidden" name="csrf" value="{{ csrf }}">
        <input type="hidden" name="filename" value="{{ name }}">
        <button type="submit" class="link danger">Slett</button>
      </form>
    </li>
  {% endfor %}
  </ul>
</details>
{% endif %}

{% if post.draft %}<p><a href="{{ url_for('admin.history', post_id=post.id) }}">Historikk for dette innlegget</a></p>{% endif %}

<form method="post" action="{{ url_for('admin.delete', post_id=post.id) }}" class="danger-zone" data-confirm="Slette hele innlegget «{{ post.title }}»?">
  <input type="hidden" name="csrf" value="{{ csrf }}">
  <button type="submit" class="link danger">Slett innlegget</button>
</form>
<script src="{{ url_for('admin.static', filename='editor.js') }}"></script>
{% endblock %}