{# Slug field for the page edit/new form. Wrapped in a stable id so the
   recompute-preview endpoint can swap the whole field + preview.

   Variables (passed via `with` from page_edit.html, or directly by the
   recompute_slug_preview endpoint):
     slug       : current slug string
     full_path  : full path the slug resolves to (optional)
     error      : recompute error message (optional)
     is_edit    : whether this is an existing page (button only then)
     page_id    : the page id (for the button's hx-post URL; edit only)
     site_slug  : the site slug (for the button's hx-post URL)
#}
<div id="page-slug-field">
  {% set parent_path = page_parent_prefix(parent_id, site_id) %}
  <label for="slug">Slug</label>
  {# When the page is nested, show the parent path as a read-only prefix so
     the bare leaf slug reads in context (/about/ + team), not as a
     standalone /team/. #}
  <div class="slug-input-row">
    {% if parent_path %}<span class="slug-prefix" aria-hidden="true"><code>{{ parent_path }}</code></span>{% endif %}
    <input type="text" name="slug" id="slug" required pattern="[a-z0-9-]+"
           value="{{ slug }}">
    {% if is_edit %}
    <button type="button" class="btn secondary"
            hx-post="{{ url_for('page_admin.recompute_slug_preview', site_slug=site_slug, page_id=page_id) }}"
            hx-include="closest form"
            hx-target="#page-slug-field"
            hx-swap="outerHTML"
            hx-on:htmx:after-request="if(event.detail.successful){document.getElementById('skip_redirect').checked = true}">
      Recompute from title
    </button>
    {% endif %}
  </div>
  {% if error %}<div class="inline-edit-error">{{ error }}</div>{% endif %}
  {% if full_path %}<p class="slug-cell-path"><small>Will live at: <code>{{ full_path }}</code></small></p>{% endif %}
</div>