{# Inline-edit slug cell for pages. #}
<td id="page-slug-cell-{{ page.id }}"
    class="is-editable{% if mode == 'edit' %} is-editing{% endif %}"
    tabindex="0"
    role="gridcell"
    {# Focused-Enter / double-click enters edit mode: a VIEW-mode
       affordance only. In edit mode the form's Enter saves; keeping
       this trigger here would double-fire an edit GET that races the
       save and reverts the value (multi-worker prod). #}
    {% if mode != 'edit' %}hx-get="{{ url_for('page_admin.slug_cell', site_slug=site.slug, page_id=page.id, mode='edit') }}"
    hx-target="this"
    hx-swap="outerHTML"
    hx-trigger="dblclick, keyup[key=='Enter']"{% endif %}>
  {% if mode == 'edit' %}
    <form hx-patch="{{ url_for('page_admin.patch_slug', site_slug=site.slug, page_id=page.id) }}"
          hx-target="#page-slug-cell-{{ page.id }}"
          hx-swap="outerHTML"
          style="margin: 0;">
      <input type="hidden" name="_csrf_token" value="{{ csrf_token() }}">
      <input type="text" name="slug" value="{{ value if value is not none else page.slug }}"
             autofocus required maxlength="255"
             hx-get="{{ url_for('page_admin.slug_cell', site_slug=site.slug, page_id=page.id, mode='view') }}"
             hx-target="closest td"
             hx-swap="outerHTML"
             hx-trigger="keyup[key=='Escape']">
      {% if error %}<div class="inline-edit-error">{{ error }}</div>{% endif %}
      <div class="inline-edit-hint">&#9166; save &middot; esc cancel</div>
      <button type="button" class="btn secondary"
              hx-post="{{ url_for('page_admin.recompute_slug', site_slug=site.slug, page_id=page.id) }}"
              hx-target="#page-slug-cell-{{ page.id }}"
              hx-swap="outerHTML">Recompute from title</button>
    </form>
  {% else %}
    <code>{{ page.slug }}</code>
    {# Only show the full path when it conveys more than the bare slug:
       nested pages (/parent/child/) or the home page (shadowed to /).
       For a plain root page the path is just /<slug>/, which stacked
       under the slug reads as the page being nested under itself. #}
    {% if full_path and full_path != '/' ~ page.slug ~ '/' %}<div class="slug-cell-path"><small>{{ full_path }}</small></div>{% endif %}
  {% endif %}
</td>