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

  <form method="post" class="card" style="margin-top:1rem;">
    {% csrf_token %}
    <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="{{ 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 %}