{% 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>
{% 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 %}