{% extends "base.html" %}
{% block title %}{{ 'New page' if is_new else 'Editing ' + page.title }} — Waikiki{% endblock %}
{% block content %}
  {% if missing %}
    <p class="muted note">No page “{{ missing }}” yet — create it below.</p>
  {% endif %}

  {% if collab %}
    <div class="presence-bar">
      <span class="muted">Live editing</span>
      <span id="presence" class="presence"></span>
    </div>
  {% endif %}

  {# Pin the target wiki explicitly. Without it these writes resolve via the
     cookie, so opening this editor with ?wiki=X while the cookie says Y would
     silently save your work into Y. #}
  <form id="editform" method="post" action="/wiki/save?wiki={{ current_wiki }}">
    <input type="hidden" name="slug" value="{{ page.slug }}">
    <input class="title-input" type="text" name="title" placeholder="Page title"
           value="{{ page.title }}" required>

    <div class="ai-bar">
      {%- if cap_state.generation == 'unavailable' %}
      {# No id="ai-go": the editor script binds on that id, and there is nothing
         here for it to bind to. The control stays visible, greyed, and points at
         the fix instead of streaming an error into the page. #}
      <input id="ai-prompt" type="text" disabled
             placeholder="Generation isn't set up on this machine">
      <a class="btn cap-off" href="/settings#capabilities" role="button"
         aria-disabled="true"
         title="Nothing here can answer a generation — Settings › Capabilities says what's missing"
         >✦ Generate</a>
      {# Guests can't open Settings (auth.guest_may), so pointing one there would
         be a dead end. They get the state without the link. #}
      <span id="ai-status" class="muted">unavailable{% if role != 'guest' %} —
        <a href="/settings#capabilities">see Capabilities</a>{% endif %}</span>
      {%- else %}
      <input id="ai-prompt" type="text"
             placeholder="Ask AI to draft/expand… (pull a one-off draft via API)">
      <label class="rag-toggle"><input type="checkbox" id="ai-rag" checked> use RAG</label>
      <button type="button" id="ai-go" class="btn">✦ Generate</button>
      <span id="ai-status" class="muted"></span>
      {%- endif %}
    </div>

    <div class="edit-tabs">
      <button type="button" class="tab on" data-tab="content">Content</button>
      <button type="button" class="tab" data-tab="meta">Metadata</button>
    </div>
    <div id="meta-panel" hidden>
      <p class="muted">Structured properties, stored as frontmatter. Reference them
        elsewhere as <code>{{ '{{Slug.Key}}' }}</code> (or <code>{{ '{{Key}}' }}</code>
        on this page).</p>
      <table id="meta-rows"></table>
      <div class="editor-actions">
        <button type="button" class="btn" id="meta-add">+ property</button>
        <button type="button" class="btn primary" id="meta-apply">Apply to page</button>
      </div>
    </div>

    {# In collab mode the textarea starts empty; the CRDT room delivers the content. #}
    <textarea id="editor" name="markdown">{% if not collab %}{{ page.markdown }}{% endif %}</textarea>

    <div class="editor-actions">
      <button class="btn primary" type="submit">Save</button>
      {% if not is_new %}<a class="btn" href="/wiki/{{ page.slug }}">Done</a>{% endif %}
      <span id="save-status" class="savestatus" aria-live="polite"></span>
    </div>
  </form>

  {# Where a page sits in the tree is part of writing it, so it lives here rather
     than in Page options. Its own form on purpose: nested forms are invalid
     HTML, and moving a page is a separate action from saving its text. #}
  {% if not is_new %}
    <form method="post" action="/wiki/{{ page.slug }}/parent" class="editparent">
      <label>Parent page
        <select name="parent">
          <option value="">— none (top-level) —</option>
          {% for p in parent_options %}
            <option value="{{ p.slug }}" {{ 'selected' if parent and parent.slug == p.slug }}>{{ p.title }}</option>
          {% endfor %}
        </select>
      </label>
      <button class="btn" type="submit">Move</button>
      <span class="muted note">Children are hidden from the sidebar and the main
        search.</span>
    </form>
  {% endif %}
{% endblock %}

{% block scripts %}
  <link rel="stylesheet" href="https://unpkg.com/easymde/dist/easymde.min.css">
  <script src="https://unpkg.com/easymde/dist/easymde.min.js"></script>
  <script type="importmap">
  {
    "imports": {
      "yjs": "https://esm.sh/yjs@13.6.27",
      "y-websocket": "https://esm.sh/y-websocket@2.1.0?external=yjs",
      "y-codemirror": "https://esm.sh/y-codemirror@3.0.1?external=yjs"
    }
  }
  </script>
  <script>
    window.WAIKIKI = {
      collab: {{ 'true' if collab else 'false' }},
      slug: {{ page.slug | tojson }},
      wiki: {{ current_wiki | tojson }},
      wsBase: (location.protocol === 'https:' ? 'wss://' : 'ws://') + location.host
              + '/collab/' + {{ current_wiki | tojson }},
      imageStyle: {{ (image_style_prompt or '') | tojson }},
      // Probed server-side (waikiki/capabilities.py). The toolbar reads it so a
      // tool that cannot run renders disabled instead of failing on click.
      caps: {{ cap_state | tojson }}
    };
  </script>
  <script type="module" src="/static/app.js"></script>
{% endblock %}