{% extends "base.html" %}
{% block title %}Transfer 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>Transfer page</h1>
  <p class="muted">
    Move <strong>{{ page_slug }}</strong> out of this space into another space you can access.
    The source page is removed after a successful move. The space index cannot be transferred.
  </p>

  {% if not all_spaces %}
    <div class="card">
      <p style="margin:0;">No other spaces available. Create another space first, then transfer.</p>
    </div>
  {% else %}
    <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" required>
        <option value="">— choose —</option>
        {% for s in all_spaces %}
          <option value="{{ s.slug }}">{{ s.title }} ({{ s.slug }})</option>
        {% endfor %}
      </select>

      <label for="id_dest_slug">Slug in destination <span class="muted">(optional)</span></label>
      <input type="text" id="id_dest_slug" name="dest_slug" maxlength="80"
             value="{{ page_slug }}"
             pattern="[a-z0-9]+(?:-[a-z0-9]+)*" autocomplete="off">

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