{% extends "base.html" %}
{% block title %}{{ form_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;
    min-height: 5rem;
  }
  .form-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: 1.25rem;
    align-items: center;
  }
  .danger-zone {
    margin-top: 2rem;
    padding-top: 1.25rem;
    border-top: 1px solid #e5e5e5;
  }
</style>
{% endblock %}
{% block content %}
  <p class="muted" style="margin:0 0 0.5rem;">
    <a href="{% if space %}{% url 'spaces:detail' space.slug %}{% else %}{% url 'core:app_home' %}{% endif %}">← Back</a>
  </p>
  <h1>{{ form_title }}</h1>
  <p class="muted">Title and Abstract describe the space; Visual is a cover path under the space tree (e.g. <code>assets/cover.jpg</code>).</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" required maxlength="255"
           value="{% if space %}{{ space.title }}{% endif %}" autocomplete="off">

    <label for="id_slug">Slug {% if space %}<span class="muted">(fixed)</span>{% else %}<span class="muted">(optional — from title)</span>{% endif %}</label>
    <input type="text" id="id_slug" name="slug" maxlength="80"
           value="{% if space %}{{ space.slug }}{% endif %}"
           {% if space %}readonly{% endif %}
           pattern="[a-z0-9]+(?:-[a-z0-9]+)*"
           placeholder="my-space" autocomplete="off">

    <label for="id_abstractor">Abstract</label>
    <textarea id="id_abstractor" name="abstractor" rows="3"
              placeholder="Short description of this space">{% if space %}{{ space.description }}{% endif %}</textarea>

    <label for="id_visual">Visual</label>
    <input type="text" id="id_visual" name="visual" maxlength="512"
           value="{% if space %}{{ space.visual }}{% endif %}"
           placeholder="assets/cover.jpg" autocomplete="off">

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

  {% if space %}
    <div class="danger-zone">
      <h2 style="margin-top:0;font-size:1.1rem;">Archive space</h2>
      <p class="muted">Hides the space from the list. Content tree is soft-archived on disk.</p>
      <form method="post" action="{% url 'spaces:archive' space.slug %}"
            onsubmit="return confirm('Archive this space?');">
        {% csrf_token %}
        <button type="submit" class="btn secondary small">Archive space</button>
      </form>
    </div>
  {% endif %}
{% endblock %}