{% 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></label>
    <span class="meta">
      {% if post.draft %}<span class="badge">utkast</span> URL: /{{ post.url_path }} (følger tittelen)
      {% else %}Publisert på <a href="{{ url_for('public', path=post.url_path) }}">/{{ post.url_path }}</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">Skriv</button>
    <button type="button" role="tab" aria-selected="false" aria-controls="pane-preview" id="tab-preview">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="**" title="Fet (Ctrl+B)"><b>B</b></button>
        <button type="button" data-wrap="_" title="Kursiv (Ctrl+I)"><i>I</i></button>
        <button type="button" data-prefix="## " title="Overskrift">H2</button>
        <button type="button" data-prefix="- " title="Liste">• liste</button>
        <button type="button" data-prefix="> " title="Sitat">“ sitat</button>
        <button type="button" data-link title="Lenke">🔗</button>
        <button type="button" id="btn-image" title="Last opp bilde">📷 Bilde</button>
        <input type="file" id="file-input" accept="image/*" multiple hidden>
      </div>
      <textarea name="body" id="body" rows="18" spellcheck="true"
        placeholder="Skriv i Markdown. Dra inn eller lim inn bilder for å laste dem opp.">{{ post.body }}</textarea>
      <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" aria-live="polite"><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 %}
  </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 %}

<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 %}