{% 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">Markdown body is the source of truth. Title, Abstract, and Visual are stored in frontmatter.</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">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 %}

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