{% extends "base.html" %}
{% block title %}Copy page — {{ space.title }} — {{ site_name }}{% endblock %}
{% block extra_head %}
<style>
  select {
    width: 100%;
    padding: 0.5rem 0.75rem;
    margin-top: 0.25rem;
    border: 1px solid #ccc;
    border-radius: 6px;
    font: inherit;
    background: #fff;
  }
  .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 %}?page={{ page_slug }}">← {{ space.title }}</a>
  </p>
  <h1>Copy page</h1>
  <p class="muted">
    Create an independent copy of <strong>{{ page_slug }}</strong>.
    Relative visual assets are duplicated when present.
  </p>

  <form method="post" class="card" style="margin-top:1rem;">
    {% csrf_token %}
    <label for="id_dest_space">Destination space</label>
    <select id="id_dest_space" name="dest_space">
      {% for s in all_spaces %}
        <option value="{{ s.slug }}" {% if s.slug == space.slug %}selected{% endif %}>{{ s.title }} ({{ s.slug }})</option>
      {% endfor %}
    </select>

    <label for="id_dest_slug">New page slug</label>
    <input type="text" id="id_dest_slug" name="dest_slug" required maxlength="80"
           value="{{ default_dest }}"
           pattern="[a-z0-9]+(?:-[a-z0-9]+)*" autocomplete="off">

    <label for="id_title">Title <span class="muted">(optional — defaults to “Original (copy)”)</span></label>
    <input type="text" id="id_title" name="title" maxlength="255" value="" autocomplete="off">

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