{% extends "base.html" %}
{% block title %}{{ form_title }} — {{ space.title }} — {{ site_name }}{% endblock %}
{% block extra_head %}
<style>
  textarea {
    width: 100%;
    padding: 0.5rem 0.75rem;
    margin-top: 0.25rem;
    border: 1px solid #ccc;
    border-radius: 6px;
    font: inherit;
  }
  textarea.body-editor {
    min-height: 16rem;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.9rem;
    line-height: 1.45;
  }
  .form-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: 1.25rem;
    align-items: center;
  }
</style>
{% endblock %}
{% block content %}
  <p class="muted" style="margin:0 0 0.5rem;">
    <a href="{% url 'spaces:detail' space.slug %}{% if doc.slug and doc.slug != 'index' and not is_new %}?page={{ doc.slug }}{% endif %}">← {{ space.title }}</a>
  </p>
  <h1>{{ form_title }}</h1>
  <p class="muted">Change the title to rename the displayed protocol. Change the file name below to rename its Markdown file and page address.</p>

  {% if not is_new %}
  <section class="card" aria-labelledby="editor-attachments-title">
    <h2 id="editor-attachments-title">Attachments</h2>
    <p class="muted">Files on the saved page. Editing or renaming the page keeps its attachments.</p>
    {% if attachment_error %}
      <p>{{ attachment_error }}</p>
    {% else %}
      <ul>
      {% for file in saved_files %}
        <li>
          <strong>{{ file.name }}</strong>
          {% if file.open_url %}<a href="{{ file.open_url }}" target="_blank" rel="noopener">Open image</a>{% endif %}
          <a href="{{ file.download_url }}">Download</a>
        </li>
      {% empty %}
        <li>No attachments on this page.</li>
      {% endfor %}
      </ul>
    {% endif %}
    <a href="{% url 'spaces:page_attachments' space.slug doc.slug %}" target="_blank" rel="noopener">Manage attachments (new tab)</a>
    <p class="muted">Save your edits before adding or removing files, then reopen the editor.</p>
  </section>
  {% endif %}

  <form method="post" class="card" style="margin-top:1rem;">
    {% csrf_token %}
    <input type="hidden" name="revision" value="{{ doc.revision }}">
    <label for="id_title">Title</label>
    <input type="text" id="id_title" name="title" maxlength="255"
           value="{{ doc.title }}" autocomplete="off"
           placeholder="Page title">

    <label for="id_slug">File name (slug) {% if doc.slug == 'index' %}<span class="muted">(space index — fixed)</span>{% endif %}</label>
    {% if doc.slug == 'index' %}
      <input type="text" id="id_slug" name="slug" value="index" readonly maxlength="80">
    {% else %}
      <input type="text" id="id_slug" name="slug" maxlength="80"
             value="{{ submitted_slug|default:doc.slug }}"
             pattern="[a-z0-9]+(?:-[a-z0-9]+)*"
             placeholder="page-slug" autocomplete="off"
             {% if is_new %}required{% endif %}>
    {% endif %}

    <p class="muted">Enter the file name without .md, using lowercase letters,
      numbers and hyphens. Renaming keeps the protocol notes and attachments.
      An existing file will never be overwritten. The space index file is fixed.</p>

    <label for="id_abstractor">Abstract</label>
    <textarea id="id_abstractor" name="abstractor" rows="2"
              placeholder="Short abstract">{{ doc.abstractor }}</textarea>

    <label for="id_visual">Visual</label>
    <input type="text" id="id_visual" name="visual" maxlength="512"
           value="{{ doc.visual }}"
           placeholder="assets/page-cover.jpg" autocomplete="off">

    <label for="id_body">Body (markdown)</label>
    <textarea id="id_body" name="body" class="body-editor" rows="18">{{ doc.body }}</textarea>

    <div class="form-actions">
      <button type="submit" class="btn">{% if is_new %}Create page{% else %}Save page{% endif %}</button>
      <a class="btn secondary" href="{% url 'spaces:detail' space.slug %}">Cancel</a>
    </div>
  </form>
{% endblock %}