{#
  About page edit form.

  Context:
    - user        : app.models.entities.User
    - page        : app.models.entities.Page
    - form        : dict {title, body_md}
    - errors      : dict {field_name: message}
    - csrf_token  : str
#}
{% extends "admin/base.html" %}

{% block title %}Edit About — Admin{% endblock %}

{% block content %}
  <section class="page-article">
    <header class="page-article__header">
      <h1 class="page-article__title">Edit About page</h1>
      <p>Slug: <code>{{ page.slug }}</code> &middot; slug is fixed.</p>
    </header>

    {% if errors %}
      <p class="admin-flash admin-flash--error" role="alert">
        {% for field, msg in errors.items() %}
          <span>{{ msg }}</span>
        {% endfor %}
      </p>
    {% endif %}

    <form class="editor" method="post" action="/admin/pages/about">
      <input type="hidden" name="csrf_token" value="{{ csrf_token }}">

      <div class="editor__field">
        <label for="page-title">Title</label>
        <input type="text"
               id="page-title"
               name="title"
               value="{{ form.title|e }}"
               required>
      </div>

      <div class="editor__split">
        <div class="editor__pane">
          <label for="page-body">Body (Markdown)</label>
          <textarea id="page-body"
                    name="body_md"
                    data-editor
                    data-preview-target="#page-preview"
                    rows="20">{{ form.body_md|e }}</textarea>

          <div class="drop-zone" data-drop-zone
               aria-label="Drag an image here to upload and insert it">
            Drop an image here to upload &amp; insert. Accepted: JPG, PNG, WebP up to 8&nbsp;MB.
          </div>
        </div>

        <div class="editor__pane">
          <span class="editor__label">Preview</span>
          <div id="page-preview" class="editor__preview" aria-live="polite">
            {{ page.body_html_cached|safe }}
          </div>
        </div>
      </div>

      <div class="editor__actions">
        <button type="submit" class="btn btn--primary">Save changes</button>
        <a class="btn btn--secondary" href="/admin">Cancel</a>
      </div>
    </form>
  </section>
{% endblock %}

{% block scripts %}
  <script defer src="{{ url_for('static', path='js/admin_editor.js') }}"></script>
{% endblock %}