source: Klonkt/src/views/pages/post-edit.ejs@ 5a394e5

<%
// Post editor — split into card sections for visual hierarchy:
//   - Identity   : title, slug, excerpt
//   - Cover      : thumbnail + URL + custom upload button
//   - Content    : markdown textarea with attached toolbar
//   - Meta       : status, type, pin, noindex, tags
//
// All behavior (IDs, names, upload endpoints) is preserved — only layout
// and styling changed.
const _hasCover = !!post.cover_image_url;
// In hub-modus moeten save/create/cancel de /user/<slug>/-prefix dragen, anders
// valt de request terug op de primaire site (siteUrlBase leeg) en rendert de
// post na opslaan headerless (bareChrome). In solo is _base leeg.
const _base = (typeof siteUrlBase !== 'undefined' && siteUrlBase) ? siteUrlBase : '';
%>
<div class="container post-edit-page">
  <h1><%= isNew ? t('pedit.title_new') : t('pedit.title_edit') %></h1>

  <form method="post" action="<%= _base %><%= isNew ? '/posts/create' : '/posts/' + post.slug + '/save' %>" class="post-edit-form">

    <%# ── IDENTITY ─────────────────────────────────────────────── %>
    <section class="pe-card">
      <label class="pe-field">
        <span><%= t('pedit.f_title') %></span>
        <input type="text" name="title" value="<%= post.title %>" required>
      </label>
      <div class="pe-row pe-row-2">
        <label class="pe-field">
          <span><%= t('pedit.f_slug') %></span>
          <input type="text" name="slug" value="<%= post.slug %>" placeholder="<%= t('pedit.slug_placeholder') %>">
        </label>
        <label class="pe-field">
          <span><%= t('pedit.f_tags') %> <small><%= t('pedit.tags_hint') %></small></span>
          <input type="text" name="tags" value="<%= Array.isArray(post.tags) ? post.tags.join(', ') : '' %>">
        </label>
      </div>
      <label class="pe-field">
        <span><%= t('pedit.f_excerpt') %></span>
        <textarea name="excerpt" rows="2"><%= post.excerpt %></textarea>
        <small class="pe-hint" style="opacity:.7"><%- t('pedit.excerpt_hint') %></small>
      </label>
    </section>

    <%# ── COVER ────────────────────────────────────────────────── %>
    <section class="pe-card">
      <div class="pe-section-title"><%= t('pedit.s_cover') %></div>
      <div class="pe-cover-row">
        <div class="pe-cover-thumb" id="cover-preview-wrap" <%= _hasCover ? '' : 'data-empty' %>>
          <img src="<%= _hasCover ? post.cover_image_url : '' %>" alt="" id="cover-preview-img" <%= _hasCover ? '' : 'hidden' %>>
          <% if (!_hasCover) { %><span class="pe-cover-empty">🖼</span><% } %>
        </div>
        <div class="pe-cover-actions">
          <label class="pe-field">
            <span><%= t('pedit.f_cover_url') %></span>
            <input type="text" name="cover_image_url" id="cover-url-field"
                   value="<%= post.cover_image_url || '' %>"
                   inputmode="url" autocapitalize="none" spellcheck="false"
                   placeholder="<%= t('pedit.cover_url_placeholder') %>">
          </label>
          <div class="pe-cover-upload">
            <button type="button" class="pe-btn pe-btn-secondary" id="cover-upload-trigger">
              📷 <%= t('pedit.cover_upload_btn') %>
            </button>
            <input type="file" id="cover-upload-field" accept="image/jpeg,image/png,image/webp,image/gif" hidden>
            <small id="cover-upload-status" class="pe-status"></small>
          </div>
        </div>
      </div>
    </section>

    <%# ── CONTENT ──────────────────────────────────────────────── %>
    <section class="pe-card pe-card-content">
      <div class="pe-section-title">
        <%= t('pedit.s_content') %>
        <small class="pe-content-hint"><%= t('pedit.content_hint') %></small>
      </div>
      <div class="pe-editor-frame">
        <div class="pe-toolbar" id="pe-toolbar" role="toolbar" aria-label="Format">
          <button type="button" id="pe-fs-done" class="pe-fs-done" title="<%= t('pedit.tb_done_title') %>">✓ <%= t('pedit.tb_done') %></button>
          <button type="button" data-cmd="bold" title="<%= t('pedit.tb_bold_title') %>" aria-label="<%= t('pedit.tb_bold') %>">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M6 4h8a4 4 0 0 1 0 8H6z"/><path d="M6 12h9a4 4 0 0 1 0 8H6z"/></svg>
          </button>
          <button type="button" data-cmd="italic" title="<%= t('pedit.tb_italic_title') %>" aria-label="<%= t('pedit.tb_italic') %>">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><line x1="19" y1="4" x2="10" y2="4"/><line x1="14" y1="20" x2="5" y2="20"/><line x1="15" y1="4" x2="9" y2="20"/></svg>
          </button>
          <button type="button" data-cmd="underline" title="<%= t('pedit.tb_underline') %>" aria-label="<%= t('pedit.tb_underline') %>">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M6 4v6a6 6 0 0 0 12 0V4"/><line x1="4" y1="20" x2="20" y2="20"/></svg>
          </button>
          <span class="pe-toolbar-sep" aria-hidden="true"></span>
          <button type="button" class="pe-tb-text" data-cmd="formatBlock" data-arg="h2" title="<%= t('pedit.tb_h2') %>">H2</button>
          <button type="button" class="pe-tb-text" data-cmd="formatBlock" data-arg="h3" title="<%= t('pedit.tb_h3') %>">H3</button>
          <button type="button" class="pe-tb-text" data-cmd="formatBlock" data-arg="p"  title="<%= t('pedit.tb_p') %>">¶</button>
          <span class="pe-toolbar-sep" aria-hidden="true"></span>
          <button type="button" data-cmd="insertUnorderedList" title="<%= t('pedit.tb_ul') %>" aria-label="<%= t('pedit.tb_ul') %>">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><line x1="9" y1="6" x2="20" y2="6"/><line x1="9" y1="12" x2="20" y2="12"/><line x1="9" y1="18" x2="20" y2="18"/><circle cx="4.5" cy="6" r="1.2"/><circle cx="4.5" cy="12" r="1.2"/><circle cx="4.5" cy="18" r="1.2"/></svg>
          </button>
          <button type="button" data-cmd="insertOrderedList" title="<%= t('pedit.tb_ol') %>" aria-label="<%= t('pedit.tb_ol') %>">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><line x1="10" y1="6" x2="21" y2="6"/><line x1="10" y1="12" x2="21" y2="12"/><line x1="10" y1="18" x2="21" y2="18"/><path d="M4 6h1v4"/><path d="M4 10h2"/><path d="M6 18H4c0-1 2-2 2-3s-1-1.5-2-1"/></svg>
          </button>
          <button type="button" data-cmd="formatBlock" data-arg="blockquote" title="<%= t('pedit.tb_quote') %>" aria-label="<%= t('pedit.tb_quote') %>">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3 21c3 0 7-1 7-8V5c0-1.25-.75-2-2-2H4c-1.25 0-2 .75-2 2v6c0 1.25.75 2 2 2h2.5C6 17.5 4 19 3 19v2z"/><path d="M14 21c3 0 7-1 7-8V5c0-1.25-.75-2-2-2h-4c-1.25 0-2 .75-2 2v6c0 1.25.75 2 2 2h2.5c-.5 4.5-2.5 6-3.5 6v2z"/></svg>
          </button>
          <button type="button" data-cmd="link-prompt" title="<%= t('pedit.tb_link_title') %>" aria-label="<%= t('pedit.tb_link') %>">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"/><path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"/></svg>
          </button>
          <button type="button" data-cmd="code-wrap" title="<%= t('pedit.tb_code_title') %>" aria-label="<%= t('pedit.tb_code') %>">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polyline points="16 18 22 12 16 6"/><polyline points="8 6 2 12 8 18"/></svg>
          </button>
          <span class="pe-toolbar-sep" aria-hidden="true"></span>
          <button type="button" id="insert-image-btn" title="<%= t('pedit.tb_image_title') %>" aria-label="<%= t('pedit.tb_image') %>">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="3" y="3" width="18" height="18" rx="2"/><circle cx="8.5" cy="8.5" r="1.5"/><path d="M21 15l-5-5L5 21"/></svg>
          </button>
          <button type="button" id="insert-track-btn" title="<%= t('pedit.tb_track_title') %>" aria-label="<%= t('pedit.tb_track') %>">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M9 18V5l12-2v13"/><circle cx="6" cy="18" r="3"/><circle cx="18" cy="16" r="3"/></svg>
          </button>
          <button type="button" id="insert-playlist-btn" title="<%= t('pedit.tb_playlist_title') %>" aria-label="<%= t('pedit.tb_playlist') %>">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><line x1="8" y1="6" x2="21" y2="6"/><line x1="8" y1="12" x2="21" y2="12"/><line x1="8" y1="18" x2="15" y2="18"/><polygon points="3 5 3 13 9 9"/></svg>
          </button>
          <button type="button" id="insert-embed-btn" title="<%= t('pedit.tb_embed_title') %>" aria-label="<%= t('pedit.tb_embed') %>">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="2" y="4" width="20" height="16" rx="2"/><polygon points="10 9 15.5 12 10 15"/></svg>
          </button>
          <span class="pe-toolbar-spacer"></span>
          <button type="button" data-cmd="removeFormat" title="<%= t('pedit.tb_clear') %>" aria-label="<%= t('pedit.tb_clear') %>">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 7V4h16v3"/><path d="M9 20h6"/><path d="M5 5l14 14" stroke-linecap="round"/></svg>
          </button>
          <button type="button" id="pe-fullscreen-btn" title="<%= t('pedit.tb_fullscreen') %>" aria-label="<%= t('pedit.tb_fullscreen') %>" aria-pressed="false">
            <svg class="fs-icon-expand" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polyline points="15 3 21 3 21 9"/><polyline points="9 21 3 21 3 15"/><line x1="21" y1="3" x2="14" y2="10"/><line x1="3" y1="21" x2="10" y2="14"/></svg>
            <svg class="fs-icon-compress" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polyline points="4 14 10 14 10 20"/><polyline points="20 10 14 10 14 4"/><line x1="14" y1="10" x2="21" y2="3"/><line x1="3" y1="21" x2="10" y2="14"/></svg>
          </button>
        </div>

        <div id="content-editor"
             class="pe-editor"
             contenteditable="true"
             role="textbox"
             aria-multiline="true"
             aria-label="<%= t('pedit.editor_aria') %>"
             data-placeholder="<%= t('pedit.editor_placeholder') %>"></div>

        <%# Sticky "tik om te bewerken"-hint (alleen zichtbaar op touch + niet-fullscreen
            via CSS). Puur visueel (pointer-events:none); de tik op het veld opent fullscreen. %>
        <div class="pe-edit-hint" aria-hidden="true">✎ <%= t('pedit.tap_to_edit') %></div>

        <%# Hidden field is what actually submits to the server. The visible
            contenteditable's serialized HTML is copied here on submit. %>
        <input type="hidden" name="content" id="content-hidden" value="">

        <%# Initial content is injected as a JSON string in a script tag so we
            can set innerHTML safely from JS. EJS-escaping HTML directly into
            the editor would render entity-escaped tags as text. %>
        <script id="initial-content" type="application/json"><%- JSON.stringify(post.content || '').replace(/</g, '\\u003c') %></script>

        <div class="pe-editor-status">
          <small id="content-upload-status" class="pe-status"></small>
          <span class="pe-char-count"><span id="char-count">0</span> <%= t('pedit.chars') %></span>
        </div>

        <input type="file" id="content-upload-field" accept="image/jpeg,image/png,image/webp,image/gif" hidden>
      </div>
    </section>

    <%# ── META ─────────────────────────────────────────────────── %>
    <section class="pe-card">
      <div class="pe-section-title"><%= t('pedit.s_publication') %></div>
      <div class="pe-row pe-row-2">
        <label class="pe-field">
          <span><%= t('pedit.f_status') %></span>
          <% var _st = isNew ? 'published' : (post.status || 'draft'); %>
          <select name="status">
            <option value="published" <%= _st === 'published' ? 'selected' : '' %>><%= t('pedit.status_published') %></option>
            <option value="draft"     <%= _st === 'draft'     ? 'selected' : '' %>><%= t('pedit.status_draft') %></option>
            <option value="archived"  <%= _st === 'archived'  ? 'selected' : '' %>><%= t('pedit.status_archived') %></option>
          </select>
        </label>
        <label class="pe-field">
          <span><%= t('pedit.f_type') %></span>
          <select name="type">
            <% var ptype = post.type || 'post'; %>
            <option value="post"  <%= ptype === 'post'  ? 'selected' : '' %>><%= t('pedit.type_post') %></option>
            <option value="foto"  <%= ptype === 'foto'  ? 'selected' : '' %>><%= t('pedit.type_foto') %></option>
            <option value="video" <%= ptype === 'video' ? 'selected' : '' %>><%= t('pedit.type_video') %></option>
            <option value="audio" <%= ptype === 'audio' ? 'selected' : '' %>><%= t('pedit.type_audio') %></option>
          </select>
        </label>
      </div>
      <div class="pe-checkboxes">
        <div class="pe-pin">
          <label class="pe-checkbox">
            <input type="checkbox" id="pin-toggle" <%= (Number(post.pinned) > 0) ? 'checked' : '' %>>
            <span>📌 <%= t('pedit.pin_label') %></span>
          </label>
          <input type="hidden" name="pinned" id="pin-rank" value="<%= post.pinned || 0 %>">
          <div class="pe-pin-pos" id="pin-pos" <%= (Number(post.pinned) > 0) ? '' : 'hidden' %>>
            <span class="pe-pin-steps">
              <button type="button" class="pe-pin-btn" id="pin-up" aria-label="<%= t('pedit.pin_up') %>">▲</button>
              <button type="button" class="pe-pin-btn" id="pin-down" aria-label="<%= t('pedit.pin_down') %>">▼</button>
            </span>
            <span class="pe-pin-label" id="pin-label"></span>
          </div>
        </div>
        <label class="pe-checkbox">
          <input type="checkbox" name="noindex" value="1" <%= post.noindex ? 'checked' : '' %>>
          <span>🚫 <%= t('pedit.noindex_label') %></span>
        </label>
        <% if (typeof premiumUnlocked === 'undefined' || premiumUnlocked) { %>
          <label class="pe-checkbox">
            <input type="checkbox" name="fan_only" value="1" <%= post.fan_only ? 'checked' : '' %>>
            <span>🔒 <%= t('pedit.fan_only_label') %></span>
          </label>
          <% var _scheduled = !!(post.publish_at && (post.status === 'scheduled' || Date.parse(String(post.publish_at).replace(' ', 'T')) > Date.now())); %>
          <label class="pe-checkbox" style="margin-top:8px">
            <input type="checkbox" name="schedule_enabled" value="1" id="pe-sched-toggle" <%= _scheduled ? 'checked' : '' %>>
            <span>📅 <%= t('pedit.schedule_label') %></span>
          </label>
          <div id="pe-sched-fields" style="margin-top:6px;<%= _scheduled ? '' : 'display:none' %>">
            <label style="display:block;font-size:12.5px;opacity:.8;margin-bottom:4px"><%= t('pedit.publish_at_label') %></label>
            <input type="datetime-local" name="publish_at" <%= _scheduled ? '' : 'disabled' %> value="<%= post.publish_at ? String(post.publish_at).replace(' ','T').slice(0,16) : '' %>" style="padding:8px 10px;border-radius:8px;border:1px solid var(--rule,rgba(128,128,128,.4));background:transparent;color:inherit">
            <% if (post.status === 'scheduled' && post.publish_at) { %><div style="font-size:12px;opacity:.7;margin-top:4px">⏳ <%= t('pedit.scheduled_for', { d: post.publish_at }) %></div><% } %>
            <div style="font-size:11.5px;opacity:.65;margin-top:4px"><%= t('pedit.schedule_hint') %></div>
          </div>
          <script>
            (function () {
              var cb = document.getElementById('pe-sched-toggle');
              var box = document.getElementById('pe-sched-fields');
              if (!cb || !box) return;
              var inp = box.querySelector('input[name="publish_at"]');
              function sync() { box.style.display = cb.checked ? '' : 'none'; if (inp) inp.disabled = !cb.checked; }
              cb.addEventListener('change', sync); sync();
            })();
          </script>
        <% } %>
      </div>
    </section>

    <%# ── ACTIONS (sticky at bottom) ──────────────────────────── %>
    <div class="pe-actions">
      <a href="<%= _base %><%= isNew ? '/' : '/' + post.slug %>" class="pe-btn"><%= t('pedit.cancel') %></a>
      <div class="pe-actions-spacer"></div>
      <% if (!isNew && post.status !== 'published') { %>
        <button type="submit" name="action" value="publish" class="pe-btn pe-btn-success">📤 <%= t('pedit.publish') %></button>
      <% } %>
      <button type="submit" class="pe-btn pe-btn-primary">💾 <%= t('pedit.save') %></button>
    </div>
  </form>
</div>

<style>
/* ─── Page wrapper ──────────────────────────────────────────────── */
.post-edit-page {
  max-width: 880px;
  margin: 1.5rem auto 6rem;   /* extra bottom for sticky-actions clearance */
  padding: 0 1rem;
}
.post-edit-page h1 {
  font-family: var(--font-display, serif);
  margin: 0 0 1.25rem;
  font-size: 1.75rem;
}

.post-edit-form {
  display: flex; flex-direction: column;
  gap: 1rem;
}

/* ─── Card sections ─────────────────────────────────────────────── */
.pe-card {
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 12px;
  padding: 1.25rem;
  display: flex; flex-direction: column;
  gap: 0.85rem;
}
.pe-card-content { padding-bottom: 0; overflow: hidden; }  /* editor flush to bottom */
.pe-section-title {
  font-size: 0.8rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--ink-soft);
  display: flex; align-items: baseline; gap: 0.5rem;
  flex-wrap: wrap;
}
.pe-section-title small {
  font-size: 0.75rem; font-weight: 400;
  letter-spacing: 0; text-transform: none;
  color: var(--ink-muted, var(--ink-soft));
}

/* ─── Field primitives ──────────────────────────────────────────── */
.pe-field {
  display: flex; flex-direction: column;
  gap: 0.35rem;
  min-width: 0;       /* allow grid items to shrink */
}
.pe-field > span {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--ink-soft);
  display: flex; align-items: baseline; gap: 0.4rem;
}
.pe-field > span small {
  font-weight: 400; color: var(--ink-muted);
}
.pe-field input,
.pe-field textarea,
.pe-field select {
  width: 100%;
  box-sizing: border-box;
  display: block;
  padding: 0.6rem 0.75rem;
  border: 1px solid var(--rule);
  border-radius: 6px;
  background: var(--paper-2);
  color: var(--ink);
  font-family: var(--font-ui, system-ui), sans-serif;
  font-size: 0.95rem;
  -webkit-appearance: none;
  appearance: none;
  transition: border-color 120ms;
}
.pe-field input:focus,
.pe-field textarea:focus,
.pe-field select:focus {
  outline: 2px solid var(--accent);
  outline-offset: -1px;
  border-color: var(--accent);
}
.pe-field textarea {
  font-family: var(--font-mono, monospace);
  resize: vertical;
}
.pe-field select {
  /* Restore the dropdown arrow we removed with appearance:none */
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23999' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  padding-right: 2rem;
}

.pe-row {
  display: grid;
  gap: 0.75rem;
}
.pe-row-2 { grid-template-columns: 1fr 1fr; }
@media (max-width: 600px) {
  .pe-row-2 { grid-template-columns: 1fr; }
}

/* ─── Cover field ───────────────────────────────────────────────── */
.pe-cover-row {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 1rem;
  align-items: start;
}
.pe-cover-thumb {
  width: 120px; height: 120px;
  border-radius: 10px;
  overflow: hidden;
  background: var(--paper-2);
  border: 1px solid var(--rule);
  display: flex; align-items: center; justify-content: center;
  position: relative;
}
.pe-cover-thumb[data-empty] {
  border-style: dashed;
}
.pe-cover-thumb img {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
}
/* Honor HTML hidden — our display:block above otherwise renders an empty
   broken-image icon when no cover is set. */
.pe-cover-thumb img[hidden] { display: none; }
.pe-cover-empty {
  font-size: 2rem;
  color: var(--ink-muted, var(--ink-soft));
  opacity: 0.5;
}
.pe-cover-actions {
  display: flex; flex-direction: column;
  gap: 0.6rem;
  min-width: 0;
}
.pe-cover-upload {
  display: flex; align-items: center; gap: 0.6rem;
  flex-wrap: wrap;
}
@media (max-width: 600px) {
  .pe-cover-row { grid-template-columns: 88px 1fr; }
  .pe-cover-thumb { width: 88px; height: 88px; }
}

/* ─── Editor frame (WYSIWYG: top toolbar, contenteditable body, status bar) ─── */
.pe-editor-frame {
  margin: 0 -1.25rem -1.25rem;   /* break out of card padding for flush edges */
  border-top: 1px solid var(--rule);
  background: var(--paper);
  display: flex; flex-direction: column;
}

/* Top toolbar — sticks to the top of the viewport while editing */
.pe-toolbar {
  display: flex; align-items: center; gap: .15rem;
  flex-wrap: wrap;
  padding: .4rem .75rem;
  background: color-mix(in srgb, var(--paper) 92%, transparent);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--rule);
  position: sticky;
  top: 0;
  z-index: 10;
}
.pe-toolbar button {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px;
  padding: 0;
  touch-action: manipulation; /* snappy taps op mobiel, geen dubbeltik-zoom */
  -webkit-user-select: none; user-select: none;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 6px;
  color: var(--ink);
  cursor: pointer;
  font-family: var(--font-ui, system-ui), sans-serif;
  font-weight: 600; font-size: .85rem;
  transition: background var(--transition), color var(--transition), border-color var(--transition);
  -webkit-tap-highlight-color: transparent;
}
/* Hover alleen op echte hover-apparaten — op touch blijft :hover anders "plakken"
   na een tik, waardoor de actief/inactief-staat onleesbaar wordt. */
@media (hover: hover) {
  .pe-toolbar button:hover {
    background: var(--paper-2);
    color: var(--accent);
  }
}
.pe-toolbar button:active { transform: scale(.94); }
/* Actieve opmaak = onmiskenbaar gevuld met de accentkleur. Zo is op mobiel
   meteen duidelijk dat bv. vet AAN staat (tik nogmaals = uit). */
.pe-toolbar button.is-active {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}
.pe-toolbar button.is-active svg { color: #fff; }
.pe-toolbar button svg { width: 16px; height: 16px; }
.pe-toolbar button.pe-tb-text { font-family: var(--font-display, serif); font-weight: 700; }
.pe-toolbar-sep {
  width: 1px; height: 18px;
  background: var(--rule);
  margin: 0 .35rem;
  flex-shrink: 0;
}
.pe-toolbar-spacer { flex: 1; }

/* ─── Volledig-scherm schrijfmodus ─── */
.fs-icon-compress { display: none; }
.pe-editor-frame.pe-fs .fs-icon-expand { display: none; }
.pe-editor-frame.pe-fs .fs-icon-compress { display: inline; }
.pe-editor-frame.pe-fs {
  position: fixed; inset: 0; z-index: 1000;
  margin: 0; border-top: 0;
  height: 100dvh;
  background: var(--paper);
  overflow: hidden;   /* alléén het tekstveld scrollt, niet het frame zelf */
}
/* In fullscreen vult het schrijfveld de resterende ruimte en scrollt het zelf
   (max-height: none overschrijft de mobiele box-begrenzing hieronder). */
.pe-editor-frame.pe-fs .pe-editor {
  flex: 1 1 auto; min-height: 0; height: auto; max-height: none;
}
/* NB: bewust GEEN overflow:hidden op html/body in fullscreen — dat kon blijven
   hangen (bv. fullscreen verlaten via navigatie) en blokkeerde dan het scrollen van
   de hele pagina. Het fullscreen-frame (position:fixed, inset:0) dekt de pagina al
   af, en op touch zijn de scrollbalken verborgen → geen dubbele balk nodig. */

/* "Klaar"-knop: alleen in fullscreen zichtbaar (links in de toolbar), duidelijke
   accent-pill i.p.v. een vierkant icoontje. */
/* Verberg-regel specifieker dan ".pe-toolbar button" (anders wint die en zie je
   de Klaar-knop ook inline als kleine knop). Alleen in fullscreen tonen → groot. */
.pe-toolbar button.pe-fs-done { display: none; }
.pe-editor-frame.pe-fs .pe-fs-done {
  display: inline-flex; align-items: center; gap: .35rem;
  width: auto !important; height: auto !important; min-height: 40px;
  padding: .55rem 1.3rem !important; margin-right: .5rem;
  background: var(--accent); color: #fff;
  font-weight: 700; font-size: 1.05rem; border-radius: 999px;
}
.pe-editor-frame.pe-fs .pe-fs-done:hover { background: var(--accent); color: #fff; }

/* Editor body — looks like prose, behaves like a textarea */
.pe-editor {
  width: 100%;
  box-sizing: border-box;
  min-height: 420px;
  padding: 1.25rem 1.5rem;
  border: 0;
  background: transparent;
  color: var(--ink);
  font-family: var(--font-body, system-ui), serif;
  font-size: 1.0625rem;
  line-height: 1.65;
  outline: none;
  overflow-y: auto;
}
.pe-editor:focus { outline: none; }
/* Inline (niet-fullscreen) groeit het schrijfveld gewoon mee met de inhoud — geen
   interne scroll-box (scroll-binnen-scroll is verwarrend). Op mobiel/tablet gaat
   typen sowieso fullscreen (zie JS), waar het veld de pagina vult en als enige
   scrollt. */
.pe-editor-frame:not(.pe-fs) .pe-editor { overflow: visible; }

/* Touch: het inline content-veld is geen tekstveld maar een tap-vlak → fullscreen
   bewerken. Een "✎ Tik om te bewerken"-pill plakt sticky onderaan de container,
   zodat de hint altijd in beeld is zonder midden in de tekst te staan. */
.pe-editor.pe-tap-to-edit { cursor: pointer; }
.pe-edit-hint { display: none; }
@media (pointer: coarse) {
  .pe-editor-frame:not(.pe-fs) .pe-edit-hint {
    display: block;
    position: sticky;
    bottom: 4.5rem;   /* boven de sticky Opslaan/Annuleren-balk */
    width: max-content;
    max-width: calc(100% - 2rem);
    margin: .4rem auto;
    background: var(--accent); color: #fff;
    font-size: .9rem; font-weight: 700; padding: .5rem 1.1rem; border-radius: 999px;
    box-shadow: 0 4px 14px rgba(0,0,0,.35);
    pointer-events: none; text-align: center; white-space: nowrap;
  }
  /* Niet relevant op touch (slepen/selecteren hoort bij inline-bewerken op desktop). */
  .pe-content-hint { display: none; }
  /* Inline (niet-fullscreen) op touch: simpel houden — je bewerkt hier toch niet,
     dus geen opmaak-toolbar en geen losse rand. Alleen de content-preview + de
     "tik om te bewerken"-pill. De toolbar verschijnt pas in fullscreen. */
  .pe-editor-frame:not(.pe-fs) .pe-toolbar { display: none; }
  .pe-editor-frame:not(.pe-fs) { border-top: 0; }
  .pe-editor-frame:not(.pe-fs) .pe-editor { min-height: 8rem; }
}
.pe-editor.is-dragover {
  outline: 2px dashed var(--accent);
  outline-offset: -10px;
}
.pe-editor[data-placeholder]:empty::before,
.pe-editor[data-placeholder]:has(br:only-child)::before {
  content: attr(data-placeholder);
  color: var(--ink-muted, #999);
  pointer-events: none;
  opacity: .55;
}
/* Inline prose styles inside the editor — match the public post styling so
   what you see is roughly what you'll get. Margins are tighter than on the
   live site since this is a confined writing space. */
.pe-editor h1, .pe-editor h2, .pe-editor h3, .pe-editor h4 {
  font-family: var(--font-display, serif);
  line-height: 1.2;
  margin: 1.1rem 0 .35rem;
}
.pe-editor h1 { font-size: 1.85rem; }
.pe-editor h2 { font-size: 1.45rem; }
.pe-editor h3 { font-size: 1.2rem; }
.pe-editor p { margin: 0 0 .85em; }
.pe-editor ul, .pe-editor ol { margin: 0 0 .85em 1.4em; padding: 0; }
.pe-editor li { margin: .15em 0; }
.pe-editor blockquote {
  margin: 1em 0;
  padding: .15em 0 .15em 1em;
  border-left: 3px solid var(--accent);
  color: var(--ink-soft, var(--ink));
  font-style: italic;
}
.pe-editor code {
  background: var(--paper-2);
  border: 1px solid var(--rule);
  border-radius: 4px;
  padding: .1em .35em;
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: .92em;
}
.pe-editor a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.pe-editor img {
  max-width: 100%; height: auto;
  border-radius: 6px;
  display: block;
  margin: 1em auto;
}

/* Shortcode chips — visible inline placeholder in the editor for
   [[track:UUID]] / [[album:Name]] / [[playlist:slug]]. They serialize back
   to plain shortcode text on submit. */
.sc-chip {
  display: inline-flex; align-items: center; gap: .3rem;
  padding: .15em .5em;
  margin: 0 .15em;
  background: color-mix(in srgb, var(--accent) 10%, var(--paper-2));
  border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--rule));
  border-radius: 999px;
  color: var(--accent);
  font-family: var(--font-ui, system-ui), sans-serif;
  font-size: .85em;
  font-weight: 600;
  font-style: normal;
  white-space: nowrap;
  user-select: none;
  cursor: default;
  vertical-align: baseline;
}
.sc-chip-icon { display: inline-flex; opacity: .8; }
.sc-chip-icon svg { width: 12px; height: 12px; }

/* Status bar below the editor */
.pe-editor-status {
  display: flex; align-items: center; justify-content: space-between;
  gap: .75rem;
  padding: .45rem 1rem;
  border-top: 1px solid var(--rule);
  background: var(--paper-2);
  color: var(--ink-muted, var(--ink-soft));
  font-size: .78rem;
}
.pe-char-count { font-variant-numeric: tabular-nums; }

/* ─── Track picker modal (P59) ─────────────────────────────────
   Mobile-first: full-screen bottom-sheet on phones, centered card
   on desktop. Lock body scroll while open via .tp-locked on body. */
.tp-modal {
  position: fixed; inset: 0;
  z-index: 1000;
  display: flex; align-items: stretch; justify-content: center;
  /* Avoid the iOS home-indicator + the keyboard when search is focused */
  padding: env(safe-area-inset-top) 0 env(safe-area-inset-bottom);
}
.tp-modal[hidden] { display: none; }
.tp-backdrop {
  position: absolute; inset: 0;
  background: color-mix(in srgb, var(--ink) 55%, transparent);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  animation: tp-bd-in .18s ease-out;
}
@keyframes tp-bd-in { from { opacity: 0 } to { opacity: 1 } }

/* Mobile: sheet docks to the bottom and fills viewport almost completely */
.tp-sheet {
  position: relative;
  margin-top: auto;
  width: 100%;
  max-height: calc(100dvh - env(safe-area-inset-top) - 1rem);
  background: var(--paper);
  border-top: 1px solid var(--rule);
  border-radius: 16px 16px 0 0;
  box-shadow:
    0 -2px 8px color-mix(in srgb, var(--ink) 8%, transparent),
    0 -16px 48px color-mix(in srgb, var(--ink) 18%, transparent);
  display: flex; flex-direction: column;
  animation: tp-sheet-up .22s cubic-bezier(.2, .8, .25, 1);
  overflow: hidden;
}
@keyframes tp-sheet-up {
  from { transform: translateY(100%); opacity: .8; }
  to   { transform: translateY(0);    opacity: 1;  }
}

/* Header — title + close, with a small grab-handle bar on mobile */
.tp-header {
  display: flex; align-items: center; justify-content: space-between;
  gap: .75rem;
  padding: .85rem 1rem .65rem;
  border-bottom: 1px solid var(--rule);
  position: relative;
}
.tp-header::before {
  /* Grab-handle: visible on mobile only */
  content: '';
  position: absolute;
  top: .35rem; left: 50%;
  transform: translateX(-50%);
  width: 38px; height: 4px;
  background: var(--rule-2, var(--rule));
  border-radius: 2px;
}
.tp-h2 {
  margin: .35rem 0 0;
  font-family: var(--font-display, serif);
  font-size: 1.15rem; font-weight: 600;
  color: var(--ink);
  line-height: 1.1;
}
.tp-close {
  width: 32px; height: 32px; border-radius: 8px;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent; border: 1px solid transparent;
  color: var(--ink-muted, var(--ink-soft));
  cursor: pointer;
  transition: background var(--transition), color var(--transition), border-color var(--transition);
  -webkit-tap-highlight-color: transparent;
  margin-top: .35rem;
}
.tp-close:hover, .tp-close:focus-visible {
  background: var(--paper-2);
  color: var(--ink);
  outline: none;
}
.tp-close svg { width: 18px; height: 18px; }

/* Search row — sticky just below header so list scrolls underneath */
.tp-search-row {
  position: relative;
  padding: .65rem 1rem;
  border-bottom: 1px solid var(--rule);
  background: var(--paper);
}
.tp-search-icon {
  position: absolute;
  top: 50%; left: 1.65rem;
  transform: translateY(-50%);
  color: var(--ink-muted, var(--ink-soft));
  pointer-events: none;
  display: inline-flex;
}
.tp-search-icon svg { width: 16px; height: 16px; }
.tp-search {
  width: 100%; box-sizing: border-box;
  padding: .65rem .85rem .65rem 2.4rem;
  font-family: var(--font-ui, system-ui), sans-serif;
  font-size: 1rem;
  background: var(--paper-2);
  color: var(--ink);
  border: 1px solid var(--rule);
  border-radius: 9px;
  -webkit-appearance: none;
  appearance: none;
}
.tp-search:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent);
}

/* List — vertically scrollable, takes remaining sheet height */
.tp-list {
  flex: 1 1 auto;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: .35rem .35rem 1rem;
}
.tp-empty {
  padding: 1.5rem 1rem;
  text-align: center;
  color: var(--ink-muted, var(--ink-soft));
  font-size: .9rem;
}

/* Track row — tap target ≥ 56px for mobile */
.tp-row {
  display: grid;
  grid-template-columns: 44px 1fr auto;
  align-items: center;
  gap: .75rem;
  width: 100%;
  padding: .55rem .65rem;
  border: 0; background: transparent;
  border-radius: 10px;
  text-align: left;
  cursor: pointer;
  color: inherit;
  font: inherit;
  transition: background var(--transition);
  -webkit-tap-highlight-color: transparent;
}
.tp-row:hover, .tp-row:focus-visible {
  background: color-mix(in srgb, var(--accent) 8%, var(--paper-2));
  outline: none;
}
.tp-row:active { transform: scale(.98); }
.tp-row[aria-disabled="true"] { opacity: .55; cursor: not-allowed; }

.tp-cover {
  width: 44px; height: 44px;
  border-radius: 6px;
  background-size: cover; background-position: center;
  background-color: var(--rule);
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.tp-cover-empty {
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--accent) 30%, var(--paper-2)),
    color-mix(in srgb, var(--accent) 8%, var(--paper-2)));
  color: var(--accent);
}
.tp-cover-empty svg { width: 18px; height: 18px; opacity: .8; }

.tp-meta {
  display: flex; flex-direction: column;
  min-width: 0;
  line-height: 1.25;
}
.tp-row-title {
  font-weight: 600; font-size: .94rem;
  color: var(--ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.tp-row-artist {
  font-size: .8rem;
  color: var(--ink-muted, var(--ink-soft));
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  margin-top: .1rem;
}
.tp-duration {
  font-variant-numeric: tabular-nums;
  font-size: .8rem;
  color: var(--ink-muted, var(--ink-soft));
  flex-shrink: 0;
}

/* Body lock when modal open */
body.tp-locked { overflow: hidden; touch-action: none; }

/* Desktop: centered card, max-width ~520px */
@media (min-width: 640px) {
  .tp-modal {
    align-items: center;
    padding: 1.5rem;
  }
  .tp-sheet {
    margin-top: 0;
    width: 100%;
    max-width: 520px;
    max-height: 80dvh;
    border-radius: 14px;
    border: 1px solid var(--rule);
    animation: tp-sheet-pop .2s cubic-bezier(.2, .8, .25, 1);
  }
  .tp-header::before { display: none; }   /* hide grab-handle on desktop */
  .tp-header { padding: 1rem 1.25rem .75rem; }
  .tp-h2 { margin-top: 0; font-size: 1.25rem; }
  .tp-close { margin-top: 0; }
  @keyframes tp-sheet-pop {
    from { transform: translateY(-8px) scale(.97); opacity: 0; }
    to   { transform: translateY(0)     scale(1);   opacity: 1; }
  }
}

/* ─── Buttons ───────────────────────────────────────────────────── */
.pe-btn {
  display: inline-flex; align-items: center; gap: 0.4rem;
  padding: 0.55rem 1rem;
  border: 1px solid var(--rule);
  background: var(--paper-2);
  color: var(--ink);
  font-family: var(--font-ui, system-ui), sans-serif;
  font-size: 0.9rem; font-weight: 500;
  text-decoration: none;
  border-radius: 6px;
  cursor: pointer;
  transition: background 120ms, border-color 120ms;
  min-height: 40px;
  -webkit-tap-highlight-color: transparent;
}
.pe-btn:hover { border-color: var(--accent); }
.pe-btn:active { transform: scale(0.97); }
.pe-btn-tiny {
  padding: 0.35rem 0.7rem;
  font-size: 0.85rem;
  min-height: 32px;
}
.pe-btn-secondary { background: var(--paper-2); }
.pe-btn-primary {
  background: var(--accent); color: white;
  border-color: var(--accent);
}
.pe-btn-primary:hover { opacity: 0.92; border-color: var(--accent); }
.pe-btn-success {
  background: #16a34a; color: white;
  border-color: #16a34a;
}
.pe-btn-success:hover { opacity: 0.92; border-color: #16a34a; }

.pe-status {
  color: var(--ink-muted, var(--ink-soft));
  font-size: 0.8rem;
}
.pe-status.is-error { color: #dc2626; }

/* ─── Checkboxes (clean inline row) ─────────────────────────────── */
.pe-checkboxes {
  display: flex; flex-direction: column;
  gap: 0.5rem;
  padding-top: 0.25rem;
}
.pe-checkbox {
  display: inline-flex; align-items: center; gap: 0.5rem;
  cursor: pointer;
  font-size: 0.95rem;
  color: var(--ink);
  user-select: none;
}
.pe-checkbox input[type="checkbox"] {
  width: 18px; height: 18px;
  margin: 0;
  cursor: pointer;
  accent-color: var(--accent);
}

/* Vastpinnen: checkbox + ▲▼-stepper met beschrijving (i.p.v. een ruw rang-getal). */
.pe-pin { display: flex; flex-direction: column; gap: 0.45rem; }
.pe-pin-pos { display: flex; align-items: center; gap: 0.55rem; padding-left: 1.65rem; }
.pe-pin-pos[hidden] { display: none; }
.pe-pin-steps { display: inline-flex; border: 1px solid var(--rule); border-radius: 6px; overflow: hidden; }
.pe-pin-btn {
  width: 30px; height: 28px; padding: 0;
  border: none; background: var(--paper-2); color: var(--ink);
  cursor: pointer; font-size: 0.68rem; line-height: 1;
  display: inline-flex; align-items: center; justify-content: center;
}
.pe-pin-btn + .pe-pin-btn { border-left: 1px solid var(--rule); }
.pe-pin-btn:hover { background: color-mix(in srgb, var(--accent) 14%, var(--paper-2)); color: var(--accent); }
.pe-pin-btn:disabled { opacity: 0.35; cursor: default; }
.pe-pin-label { font-size: 0.85rem; color: var(--accent); font-weight: 600; }

/* ─── Sticky action footer ──────────────────────────────────────── */
.pe-actions {
  position: sticky;
  bottom: 0;
  display: flex; align-items: center;
  gap: 0.5rem;
  padding: 0.85rem 1rem;
  margin: 0.5rem -1rem 0;   /* extend to viewport edges on tight container */
  background: color-mix(in srgb, var(--paper) 94%, transparent);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border-top: 1px solid var(--rule);
  z-index: 10;
}
.pe-actions-spacer { flex: 1; }

/* De editor is een focus-scherm: verberg de mobiele site-tabbalk (Home/Zoek/…)
   zodat er niet twee balken onderaan stapelen (Opslaan-balk + tabbalk). De
   Opslaan/Annuleren-balk wordt dan de enige onderbalk → gewoon op bottom:0,
   geen tab-offset meer nodig. Op desktop is de tabbalk toch al verborgen. */
body:has(.post-edit-page) .bottom-tab { display: none; }
/* Audiospeler (indien aan het spelen) niet meer 56px optillen voor de nu-verborgen
   tabbalk, anders zou die zweven boven de actiebalk. */
body:has(.post-edit-page) .audio-player { bottom: 0; }

/* ── Afbeeldings-editor (draaien / bijsnijden / spiegelen) ── */
.imed-backdrop {
  position: fixed; inset: 0; z-index: 9999;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,.62); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
  padding: 14px;
}
.imed-modal {
  display: flex; flex-direction: column; gap: 12px;
  width: 100%; max-width: 640px; max-height: 92vh;
  background: var(--paper, #fff); color: var(--ink, #111);
  border: 1px solid var(--rule, rgba(128,128,128,.3)); border-radius: 14px;
  padding: 14px; box-sizing: border-box;
}
.imed-stage {
  height: 58vh; flex: 0 0 auto;
  background: var(--paper-2, rgba(128,128,128,.08)); border-radius: 10px; overflow: hidden;
}
.imed-stage img { display: block; max-width: 100%; }
/* Cropper z'n container moet de volle stage-hoogte vullen — anders klapt 'ie dicht
   in een flex-kolom zonder expliciete hoogte → leeg bewerk-venster (geen afbeelding). */
.imed-stage .cropper-container { width: 100% !important; height: 100% !important; }
.imed-tools {
  display: flex; flex-wrap: wrap; gap: 6px; justify-content: center;
}
.imed-tools button {
  width: 42px; height: 42px; font-size: 18px; line-height: 1;
  border: 1px solid var(--rule, rgba(128,128,128,.4)); border-radius: 10px;
  background: var(--paper-2, transparent); color: inherit; cursor: pointer;
}
.imed-tools button:hover { border-color: var(--accent); }
.imed-actions { display: flex; gap: 8px; justify-content: flex-end; }
</style>

<script>
(function() {

  // ── Cover upload ────────────────────────────────────────────────
  const coverField   = document.getElementById('cover-upload-field');
  const coverTrigger = document.getElementById('cover-upload-trigger');
  const coverUrl     = document.getElementById('cover-url-field');
  const coverStatus  = document.getElementById('cover-upload-status');
  const coverWrap    = document.getElementById('cover-preview-wrap');
  const coverImg     = document.getElementById('cover-preview-img');

  async function uploadImage(file) {
    const fd = new FormData();
    fd.append('image', file);
    const res = await fetch('/posts/upload-image', { method: 'POST', body: fd });
    if (!res.ok) {
      const j = await res.json().catch(() => ({}));
      throw new Error(j.error || ('Upload failed (' + res.status + ')'));
    }
    return await res.json();   // {url, size, mime}
  }

  // ── Afbeeldings-editor (draaien / bijsnijden / spiegelen) ──────────
  // Lazy-load Cropper.js (lokaal gevendord) pas bij het eerste gebruik.
  let _cropperReady = null;
  function ensureCropper() {
    if (window.Cropper) return Promise.resolve();
    if (_cropperReady) return _cropperReady;
    _cropperReady = new Promise((resolve, reject) => {
      if (!document.querySelector('link[data-cropper-css]')) {
        const l = document.createElement('link');
        l.rel = 'stylesheet'; l.href = '/assets/vendor/cropper.min.css'; l.setAttribute('data-cropper-css', '');
        document.head.appendChild(l);
      }
      const s = document.createElement('script');
      s.src = '/assets/vendor/cropper.min.js';
      s.onload = () => resolve();
      s.onerror = () => reject(new Error('cropper load failed'));
      document.head.appendChild(s);
    });
    return _cropperReady;
  }

  // Opent de editor voor een gekozen bestand; resolved met een bewerkt File,
  // of null als de gebruiker annuleert. Animatie-GIF's worden niet door de
  // canvas-editor gehaald (zouden statisch worden) — die uploaden direct.
  async function openImageEditor(file) {
    if (!file || !file.type || !file.type.startsWith('image/')) return file;
    if (file.type === 'image/gif') return file; // behoud animatie
    try { await ensureCropper(); } catch (_) { return file; } // editor onbeschikbaar → direct uploaden

    return new Promise((resolve) => {
      const back = document.createElement('div');
      back.className = 'imed-backdrop';
      back.innerHTML =
        '<div class="imed-modal" role="dialog" aria-modal="true" aria-label="<%= t('imed.title') %>">' +
          '<div class="imed-stage"><img alt=""></div>' +
          '<div class="imed-tools">' +
            '<button type="button" data-act="rl" title="<%= t('imed.rotate_left') %>">⟲</button>' +
            '<button type="button" data-act="rr" title="<%= t('imed.rotate_right') %>">⟳</button>' +
            '<button type="button" data-act="fh" title="<%= t('imed.flip_h') %>">⇆</button>' +
            '<button type="button" data-act="fv" title="<%= t('imed.flip_v') %>">⇅</button>' +
            '<button type="button" data-act="zi" title="<%= t('imed.zoom_in') %>">＋</button>' +
            '<button type="button" data-act="zo" title="<%= t('imed.zoom_out') %>">－</button>' +
            '<button type="button" data-act="reset" title="<%= t('imed.reset') %>">↺</button>' +
          '</div>' +
          '<div class="imed-actions">' +
            '<button type="button" data-act="cancel" class="pe-btn pe-btn-secondary"><%= t('imed.cancel') %></button>' +
            '<button type="button" data-act="apply" class="pe-btn pe-btn-primary"><%= t('imed.apply') %></button>' +
          '</div>' +
        '</div>';
      document.body.appendChild(back);
      const img = back.querySelector('img');
      const url = URL.createObjectURL(file);
      let cropper = null, sx = 1, sy = 1;

      function cleanup() {
        try { if (cropper) cropper.destroy(); } catch (_) {}
        URL.revokeObjectURL(url);
        back.remove();
        document.removeEventListener('keydown', onKey);
      }
      function onKey(e) { if (e.key === 'Escape') { cleanup(); resolve(null); } }
      document.addEventListener('keydown', onKey);

      img.onload = () => {
        cropper = new Cropper(img, { viewMode: 1, autoCropArea: 1, background: false, responsive: true });
      };
      img.src = url;

      back.addEventListener('click', (e) => {
        const btn = e.target.closest('[data-act]');
        if (e.target === back) { cleanup(); resolve(null); return; }
        if (!btn || !cropper) return;
        const a = btn.getAttribute('data-act');
        if (a === 'rl') cropper.rotate(-90);
        else if (a === 'rr') cropper.rotate(90);
        else if (a === 'fh') { sx = -sx; cropper.scaleX(sx); }
        else if (a === 'fv') { sy = -sy; cropper.scaleY(sy); }
        else if (a === 'zi') cropper.zoom(0.1);
        else if (a === 'zo') cropper.zoom(-0.1);
        else if (a === 'reset') { sx = 1; sy = 1; cropper.reset(); }
        else if (a === 'cancel') { cleanup(); resolve(null); }
        else if (a === 'apply') {
          const canvas = cropper.getCroppedCanvas({ maxWidth: 3000, maxHeight: 3000, imageSmoothingEnabled: true, imageSmoothingQuality: 'high' });
          const png = (file.type === 'image/png' || file.type === 'image/webp');
          const mime = png ? 'image/png' : 'image/jpeg';
          const ext = png ? '.png' : '.jpg';
          canvas.toBlob((blob) => {
            cleanup();
            if (!blob) { resolve(file); return; }
            const base = (file.name || 'afbeelding').replace(/\.[^.]+$/, '');
            resolve(new File([blob], base + ext, { type: mime }));
          }, mime, 0.92);
        }
      });
    });
  }

  function showCoverPreview(url) {
    if (!coverWrap || !coverImg) return;
    if (url) {
      coverImg.src = url;
      coverImg.hidden = false;
      coverWrap.removeAttribute('data-empty');
      const emptyIcon = coverWrap.querySelector('.pe-cover-empty');
      if (emptyIcon) emptyIcon.remove();
    } else {
      coverImg.hidden = true;
      coverImg.src = '';
      coverWrap.setAttribute('data-empty', '');
      if (!coverWrap.querySelector('.pe-cover-empty')) {
        const span = document.createElement('span');
        span.className = 'pe-cover-empty';
        span.textContent = '🖼';
        coverWrap.appendChild(span);
      }
    }
  }

  if (coverTrigger && coverField) {
    coverTrigger.addEventListener('click', () => coverField.click());
  }
  if (coverField) {
    coverField.addEventListener('change', async () => {
      if (!coverField.files[0]) return;
      const edited = await openImageEditor(coverField.files[0]);
      coverField.value = '';
      if (!edited) return; // geannuleerd
      coverStatus.classList.remove('is-error');
      coverStatus.textContent = '<%= t('pedit.js_uploading') %>';
      try {
        const j = await uploadImage(edited);
        coverUrl.value = j.url;
        showCoverPreview(j.url);
        coverStatus.textContent = '<%= t('pedit.js_uploaded') %> ✓';
        setTimeout(() => { coverStatus.textContent = ''; }, 2000);
      } catch (e) {
        coverStatus.classList.add('is-error');
        coverStatus.textContent = '<%= t('pedit.js_failed') %>: ' + e.message;
      }
    });
  }
  // Live-update preview when user pastes a URL manually
  if (coverUrl) {
    coverUrl.addEventListener('input', () => {
      const v = coverUrl.value.trim();
      if (v) showCoverPreview(v); else showCoverPreview('');
    });
  }

  // ── WYSIWYG editor (P58) ────────────────────────────────────────
  // Architecture:
  //   - Visible <div contenteditable> (`#content-editor`) is what the user
  //     types in; it shows real HTML (formatted, not raw markup).
  //   - Hidden <input name="content"> (`#content-hidden`) is what submits.
  //     On submit we serialize the editor's HTML into it, with shortcode
  //     chips reduced back to their [[track:UUID]]/[[album:Name]]/[[playlist:slug]] text.
  //   - Initial content comes from a <script type="application/json"> tag
  //     to avoid HTML-escape-into-DOM issues; we set innerHTML once on load
  //     and walk text nodes to render shortcode tokens as chips.
  const contentField  = document.getElementById('content-upload-field');
  const contentBtn    = document.getElementById('insert-image-btn');
  const contentStatus = document.getElementById('content-upload-status');
  const editor        = document.getElementById('content-editor');
  const hiddenField   = document.getElementById('content-hidden');
  const charCountEl   = document.getElementById('char-count');
  const initialEl     = document.getElementById('initial-content');
  const toolbar       = document.getElementById('pe-toolbar');
  const form          = editor && editor.closest('form');

  if (!editor) return;

  // Titel alleen automatisch focussen op desktop (muis/trackpad). Op touch zou
  // dit meteen het toetsenbord openen bij het openen van de editor — niet gewenst.
  try {
    const titleInput = form && form.querySelector('input[name="title"]');
    if (titleInput && window.matchMedia && window.matchMedia('(hover: hover) and (pointer: fine)').matches) {
      titleInput.focus({ preventScroll: true });
    }
  } catch (_) {}

  // ── Shortcode chip rendering / serialization ────────────────────
  // Pattern matches [[track:UUID]] / [[album:any text]] / [[playlist:slug]]
  // — but we DON'T want to chipify text the user is mid-typing inside an
  // HTML attribute; since chipify only walks text nodes (never attribute
  // values) that's already safe.
  const SC_RE = /\[\[(track|album|playlist|embed):([^\]]+)\]\]/g;

  const SC_ICONS = {
    track:    '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polygon points="6 4 20 12 6 20 6 4"/></svg>',
    album:    '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><circle cx="12" cy="12" r="3"/></svg>',
    playlist: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="8" y1="6" x2="21" y2="6"/><line x1="8" y1="12" x2="21" y2="12"/><line x1="8" y1="18" x2="15" y2="18"/><polygon points="3 5 3 13 9 9"/></svg>',
    embed:    '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="2" y="4" width="20" height="16" rx="2"/><polygon points="10 9 15.5 12 10 15"/></svg>',
  };

  function chipLabel(kind, value) {
    if (kind === 'track') {
      // UUIDs are noisy — show a 6-char prefix for visual hint
      const v = String(value || '');
      return '<%= t('pedit.chip_track') %> ' + (v.length > 8 ? v.slice(0, 6) + '…' : v);
    }
    if (kind === 'album')    return '<%= t('pedit.chip_album') %> ' + value;
    if (kind === 'playlist') return '<%= t('pedit.chip_playlist') %> ' + value;
    if (kind === 'embed') {
      const clean = String(value || '').replace(/^https?:\/\/(www\.)?/, '');
      return '▶ ' + (clean.length > 36 ? clean.slice(0, 34) + '…' : clean);
    }
    return value;
  }

  function makeChip(kind, value) {
    const span = document.createElement('span');
    span.className = 'sc-chip';
    span.contentEditable = 'false';
    span.setAttribute('data-sc', kind + ':' + value);
    span.innerHTML =
      '<span class="sc-chip-icon" aria-hidden="true">' + (SC_ICONS[kind] || '') + '</span>' +
      '<span class="sc-chip-label"></span>';
    span.querySelector('.sc-chip-label').textContent = chipLabel(kind, value);
    return span;
  }

  // Walk text nodes inside `root` and replace [[type:value]] tokens with chips.
  function chipifyShortcodes(root) {
    const walker = document.createTreeWalker(root, NodeFilter.SHOW_TEXT, null);
    const targets = [];
    while (walker.nextNode()) {
      const n = walker.currentNode;
      // Skip text inside existing chips (their .sc-chip-label is set via .textContent so the [[...]] text never appears)
      if (n.parentElement && n.parentElement.closest('.sc-chip')) continue;
      if (SC_RE.test(n.nodeValue)) targets.push(n);
      SC_RE.lastIndex = 0;
    }
    for (const node of targets) {
      const txt = node.nodeValue;
      const frag = document.createDocumentFragment();
      let last = 0;
      let m;
      SC_RE.lastIndex = 0;
      while ((m = SC_RE.exec(txt)) !== null) {
        if (m.index > last) frag.appendChild(document.createTextNode(txt.slice(last, m.index)));
        frag.appendChild(makeChip(m[1], m[2].trim()));
        last = m.index + m[0].length;
      }
      if (last < txt.length) frag.appendChild(document.createTextNode(txt.slice(last)));
      node.parentNode.replaceChild(frag, node);
    }
  }

  // Inverse of chipify: clone the editor, replace every chip with its text.
  function serializeChips(rootClone) {
    const chips = rootClone.querySelectorAll('.sc-chip[data-sc]');
    for (const c of chips) {
      const txt = '[[' + c.getAttribute('data-sc') + ']]';
      c.replaceWith(document.createTextNode(txt));
    }
  }

  // ── Boot: load initial content as HTML, then render shortcodes as chips
  try {
    const initial = JSON.parse(initialEl.textContent || '""');
    editor.innerHTML = initial || '';
    chipifyShortcodes(editor);
  } catch (e) {
    console.error('[editor] could not parse initial content', e);
    editor.innerHTML = '';
  }

  // ── Char counter
  function updateCharCount() {
    const text = (editor.innerText || '').replace(/\s+/g, ' ').trim();
    if (charCountEl) charCountEl.textContent = String(text.length);
  }
  updateCharCount();
  editor.addEventListener('input', updateCharCount);

  // ── Toolbar wiring
  // Houd de scrollpositie vast rond een edit-commando. execCommand/insert scrollt
  // standaard de caret in beeld → het beeld "verspringt" bij het aanklikken van een
  // opmaakknop. We leggen ALLE scrollbare voorouders (editor, frame, #pcms-main, …)
  // + de pagina vast en zetten ze terug — sync én over een paar frames, want Chrome
  // scrollt soms pas een frame later. De gebruiker scrollt zo zelf.
  function scrollableAncestors(el) {
    const list = [];
    let node = el;
    while (node && node !== document.body && node !== document.documentElement) {
      const oy = getComputedStyle(node).overflowY;
      if (oy === 'auto' || oy === 'scroll' || oy === 'overlay') list.push(node);
      node = node.parentElement;
    }
    return list;
  }
  function keepScroll(fn) {
    // In fullscreen staat de pagina vast (body overflow:hidden) en mag het veld
    // gewoon naar de caret scrollen — geen pagina-sprong mogelijk, dus niets fixen.
    const frame = document.querySelector('.pe-editor-frame');
    if (frame && frame.classList.contains('pe-fs')) { fn(); return; }
    const wx = window.scrollX, wy = window.scrollY;
    const anc = scrollableAncestors(editor).map(function (n) { return [n, n.scrollTop, n.scrollLeft]; });
    const restore = function () {
      window.scrollTo(wx, wy);
      anc.forEach(function (e) { e[0].scrollTop = e[1]; e[0].scrollLeft = e[2]; });
    };
    fn();
    restore();
    requestAnimationFrame(restore);
  }
  function execCmd(cmd, arg) {
    keepScroll(function () {
      editor.focus({ preventScroll: true });
      document.execCommand(cmd, false, arg);
    });
    updateToolbarState();
    updateCharCount();
  }
  function wrapCode() {
    const sel = window.getSelection();
    if (!sel || sel.rangeCount === 0 || sel.isCollapsed) return;
    keepScroll(function () {
      const range = sel.getRangeAt(0);
      const code = document.createElement('code');
      code.textContent = sel.toString();
      range.deleteContents();
      range.insertNode(code);
      // Move caret after the new node
      range.setStartAfter(code);
      range.collapse(true);
      sel.removeAllRanges();
      sel.addRange(range);
      editor.focus({ preventScroll: true });
    });
  }
  function linkPrompt() {
    const url = window.prompt('<%= t('pedit.js_link_prompt') %>');
    if (!url) return;
    execCmd('createLink', url);
  }
  // De huidige selectie zit in een <blockquote> binnen de editor? Geef 'm terug.
  function blockquoteAncestor() {
    const sel = window.getSelection();
    if (!sel || sel.rangeCount === 0) return null;
    let node = sel.anchorNode;
    while (node && node !== editor) {
      if (node.nodeType === 1 && node.tagName === 'BLOCKQUOTE') return node;
      node = node.parentNode;
    }
    return null;
  }
  // Echte toggle: execCommand('formatBlock','blockquote') zet 'm wél AAN maar
  // krijgt 'm nooit meer UIT (browser-quirk). Staat de caret al in een quote →
  // pak de wrapper uit; anders pas blockquote toe.
  function toggleBlockquote() {
    keepScroll(function () {
      editor.focus({ preventScroll: true });
      const bq = blockquoteAncestor();
      if (bq) {
        const parent = bq.parentNode;
        // Inhoud uit de quote halen, op z'n plek, en de lege wrapper verwijderen.
        const ref = bq;
        let firstMoved = null;
        while (bq.firstChild) {
          const child = bq.firstChild;
          if (!firstMoved) firstMoved = child;
          parent.insertBefore(child, ref);
        }
        parent.removeChild(bq);
        // Caret terugzetten in de uitgepakte inhoud.
        if (firstMoved) {
          const sel = window.getSelection();
          const range = document.createRange();
          range.selectNodeContents(firstMoved.nodeType === 1 ? firstMoved : parent);
          range.collapse(false);
          sel.removeAllRanges();
          sel.addRange(range);
        }
      } else {
        document.execCommand('formatBlock', false, 'blockquote');
      }
    });
    updateToolbarState();
    updateCharCount();
  }

  if (toolbar) {
    // CRUCIAAL (mobiel + desktop): voorkom dat een toolbar-knop de focus/selectie
    // uit het editor-veld steelt. Zonder dit raakt de selectie kwijt bij het tikken
    // → execCommand werkt op een lege selectie (vet kan niet meer UIT) én de browser
    // scrollt de caret opnieuw in beeld (de "sprong naar beneden"). preventDefault op
    // mousedown houdt de focus in de editor; de click blijft gewoon vuren.
    toolbar.addEventListener('mousedown', (e) => {
      if (e.target.closest('button')) e.preventDefault();
    });
    toolbar.addEventListener('click', (e) => {
      const btn = e.target.closest('button[data-cmd]');
      if (!btn) return;
      e.preventDefault();
      const cmd = btn.dataset.cmd;
      const arg = btn.dataset.arg || null;
      if (cmd === 'link-prompt') linkPrompt();
      else if (cmd === 'code-wrap') wrapCode();
      else if (cmd === 'formatBlock' && arg === 'blockquote') toggleBlockquote();
      else execCmd(cmd, arg);
    });
  }

  // ── Volledig-scherm schrijfmodus: het schrijfveld vult de hele pagina.
  const fsBtn = document.getElementById('pe-fullscreen-btn');
  const editorFrame = document.querySelector('.pe-editor-frame');
  const isTouch = !!(window.matchMedia && window.matchMedia('(pointer: coarse)').matches);

  // Op mobiel duwt het toetsenbord de zichtbare (visual) viewport omhoog terwijl
  // een position:fixed-frame aan de LAYOUT-viewport blijft hangen → de toolbar
  // schuift uit beeld. Houd het fullscreen-frame daarom gelijk aan de visual
  // viewport (top + hoogte), zodat de toolbar altijd bovenaan zichtbaar blijft.
  function syncFsViewport() {
    if (!editorFrame || !editorFrame.classList.contains('pe-fs')) return;
    const vv = window.visualViewport;
    if (!vv) return;
    editorFrame.style.top = vv.offsetTop + 'px';
    editorFrame.style.height = vv.height + 'px';
  }
  function clearFsViewport() {
    if (!editorFrame) return;
    editorFrame.style.top = '';
    editorFrame.style.height = '';
  }
  function isFs() { return !!(editorFrame && editorFrame.classList.contains('pe-fs')); }
  function applyFs(on) {
    if (!editorFrame) return;
    editorFrame.classList.toggle('pe-fs', on);
    document.body.classList.toggle('pe-fs-open', on);
    document.documentElement.classList.toggle('pe-fs-open', on);
    if (fsBtn) {
      fsBtn.setAttribute('aria-pressed', on ? 'true' : 'false');
      fsBtn.title = on ? '<%= t('pedit.tb_done') %>' : '<%= t('pedit.tb_fullscreen') %>';
    }
    if (window.visualViewport) {
      if (on) {
        window.visualViewport.addEventListener('resize', syncFsViewport);
        window.visualViewport.addEventListener('scroll', syncFsViewport);
        syncFsViewport();
      } else {
        window.visualViewport.removeEventListener('resize', syncFsViewport);
        window.visualViewport.removeEventListener('scroll', syncFsViewport);
        clearFsViewport();
      }
    }
    // Op touch is het veld inline NIET bewerkbaar; alleen in fullscreen wel.
    if (isTouch) editor.setAttribute('contenteditable', on ? 'true' : 'false');
    if (on) {
      editor.focus({ preventScroll: true });
    } else {
      if (isTouch) editor.blur();
      // Bij sluiten: naar de TOP van de content scrollen i.p.v. ergens onderaan
      // (footer) te blijven hangen.
      requestAnimationFrame(function () {
        try { editorFrame.scrollIntoView({ block: 'start' }); } catch (_) {}
      });
    }
  }
  // De fullscreen schrijf-"pagina": openen pusht een history-state zodat de browser-
  // back-knop (en de Klaar-knop) 'm sluit en je terug bent in het formulier — voelt
  // als een aparte pagina, maar álle formuliervelden blijven intact (zelfde DOM).
  function openFs() {
    if (isFs()) return;
    try { history.pushState({ peFs: true }, ''); } catch (_) {}
    applyFs(true);
  }
  function closeFs() {
    if (!isFs()) return;
    if (history.state && history.state.peFs) history.back(); // → popstate sluit af
    else applyFs(false);
  }
  function toggleFullscreen() { if (isFs()) closeFs(); else openFs(); }
  window.addEventListener('popstate', function () { if (isFs()) applyFs(false); });
  if (fsBtn) fsBtn.addEventListener('click', toggleFullscreen);
  var fsDoneBtn = document.getElementById('pe-fs-done');
  if (fsDoneBtn) fsDoneBtn.addEventListener('click', closeFs);
  document.addEventListener('keydown', (e) => {
    if (e.key === 'Escape' && isFs()) { e.preventDefault(); closeFs(); }
  });

  // Op mobiel/tablet (touch): het content-veld is INLINE NIET bewerkbaar — het is
  // dan geen tekstveld. Eén tik → fullscreen, waar het wél bewerkbaar wordt
  // (toggleFullscreen zet contenteditable aan/uit). Zo kun je nooit inline typen.
  if (isTouch) {
    editor.setAttribute('contenteditable', 'false');
    editor.classList.add('pe-tap-to-edit');
    editor.setAttribute('data-placeholder', '<%= t('pedit.tap_to_write') %>');
    editor.addEventListener('click', function () {
      if (!isFs()) openFs();
    });
  }

  // Reflect bold/italic/list state on the toolbar buttons
  function updateToolbarState() {
    if (!toolbar) return;
    const cmds = ['bold', 'italic', 'underline', 'insertUnorderedList', 'insertOrderedList'];
    for (const cmd of cmds) {
      const btn = toolbar.querySelector('button[data-cmd="' + cmd + '"]');
      if (!btn) continue;
      try { btn.classList.toggle('is-active', document.queryCommandState(cmd)); } catch(_) {}
    }
    // Quote-knop: actief als de caret in een <blockquote> staat (toggle-feedback).
    const bqBtn = toolbar.querySelector('button[data-cmd="formatBlock"][data-arg="blockquote"]');
    if (bqBtn) bqBtn.classList.toggle('is-active', !!blockquoteAncestor());
  }
  document.addEventListener('selectionchange', () => {
    if (document.activeElement === editor) updateToolbarState();
  });

  // Keyboard shortcuts: Ctrl/Cmd + B/I/U/K
  editor.addEventListener('keydown', (e) => {
    const mod = e.ctrlKey || e.metaKey;
    if (!mod) return;
    const k = e.key.toLowerCase();
    if (k === 'b') { e.preventDefault(); execCmd('bold'); }
    else if (k === 'i') { e.preventDefault(); execCmd('italic'); }
    else if (k === 'u') { e.preventDefault(); execCmd('underline'); }
    else if (k === 'k') { e.preventDefault(); linkPrompt(); }
  });

  // Paste: keep it simple — strip formatting unless user wants it. Default
  // execCommand 'paste' includes Word/Google-Docs garbage. We accept inline
  // styles from clipboard only when shift is held — otherwise plain text.
  editor.addEventListener('paste', (e) => {
    if (e.shiftKey) return; // user wants formatted paste
    const text = (e.clipboardData || window.clipboardData).getData('text/plain');
    if (text == null) return;
    e.preventDefault();
    document.execCommand('insertText', false, text);
  });

  // ── Image upload (button + drag-drop into the editor)
  async function uploadAndInsertImage(file) {
    const edited = await openImageEditor(file);
    if (!edited) return; // geannuleerd
    contentStatus.classList.remove('is-error');
    contentStatus.textContent = '<%= t('pedit.js_uploading') %>';
    try {
      const j = await uploadImage(edited);
      const img = '<img src="' + j.url + '" alt="">';
      editor.focus({ preventScroll: true });
      document.execCommand('insertHTML', false, img);
      contentStatus.textContent = '<%= t('pedit.js_inserted') %> ✓';
      setTimeout(() => { contentStatus.textContent = ''; }, 2000);
      updateCharCount();
    } catch (e) {
      contentStatus.classList.add('is-error');
      contentStatus.textContent = '<%= t('pedit.js_failed') %>: ' + e.message;
    }
  }

  if (contentBtn && contentField) {
    contentBtn.addEventListener('click', () => contentField.click());
    contentField.addEventListener('change', () => {
      if (contentField.files[0]) uploadAndInsertImage(contentField.files[0]);
      contentField.value = '';
    });

    editor.addEventListener('dragover', (e) => {
      if (e.dataTransfer && e.dataTransfer.types.includes('Files')) {
        e.preventDefault();
        editor.classList.add('is-dragover');
      }
    });
    editor.addEventListener('dragleave', () => editor.classList.remove('is-dragover'));
    editor.addEventListener('drop', async (e) => {
      editor.classList.remove('is-dragover');
      const files = e.dataTransfer && e.dataTransfer.files;
      if (!files || !files.length) return;
      e.preventDefault();
      for (const f of files) {
        if (f.type.startsWith('image/')) await uploadAndInsertImage(f);
      }
    });
  }

  // ── Insert chip helpers (track / playlist)
  function insertChip(kind, value) {
    editor.focus({ preventScroll: true });
    const chip = makeChip(kind, value);
    // Insert at caret using the Selection API (execCommand insertNode)
    const sel = window.getSelection();
    if (sel && sel.rangeCount > 0) {
      const range = sel.getRangeAt(0);
      range.deleteContents();
      range.insertNode(chip);
      // Insert a trailing space so the user can keep typing after the chip
      const space = document.createTextNode('\u00A0');
      chip.after(space);
      range.setStartAfter(space);
      range.collapse(true);
      sel.removeAllRanges();
      sel.addRange(range);
    } else {
      editor.appendChild(chip);
      editor.appendChild(document.createTextNode('\u00A0'));
    }
    updateCharCount();
  }

  // ── Embed insert: plak een platform-URL -> [[embed:url]]-chip die server-side
  //    een iframe wordt (YouTube/Spotify/SoundCloud/Vimeo/Apple Music/Bandcamp).
  const embedBtn = document.getElementById('insert-embed-btn');
  if (embedBtn) {
    embedBtn.addEventListener('click', () => {
      const raw = window.prompt('<%= t('pedit.js_embed_prompt') %>');
      if (!raw) return;
      const url = raw.trim();
      if (!/^https?:\/\//i.test(url)) { alert('<%= t('pedit.js_embed_invalid') %>'); return; }
      insertChip('embed', url);
    });
  }

  // ── Track insert: opens the track-picker modal (P59)
  const trackBtn = document.getElementById('insert-track-btn');
  const trackPicker = document.getElementById('track-picker');
  if (trackBtn && trackPicker) {
    const tpList   = document.getElementById('tp-list');
    const tpEmpty  = document.getElementById('tp-empty');
    const tpSearch = document.getElementById('tp-search');
    let tpCache = null;       // cached tracks list (fetched once per page load)
    let tpLastFocus = null;   // element to restore focus to on close

    const SVG_NOTE = '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M9 17V5l12-2v12"/><circle cx="6" cy="17" r="3"/><circle cx="18" cy="15" r="3"/></svg>';

    function fmtDur(sec) {
      sec = Math.max(0, Math.floor(sec || 0));
      const m = Math.floor(sec / 60), s = sec % 60;
      return m + ':' + String(s).padStart(2, '0');
    }
    function escAttr(s) {
      return String(s == null ? '' : s).replace(/[&<>"']/g, c => ({
        '&':'&amp;','<':'&lt;','>':'&gt;','"':'&quot;',"'":'&#39;'
      }[c]));
    }

    function renderList(filter) {
      if (!Array.isArray(tpCache)) return;
      const q = (filter || '').trim().toLowerCase();
      const filtered = q
        ? tpCache.filter(t =>
            (t.title  || '').toLowerCase().includes(q) ||
            (t.artist || '').toLowerCase().includes(q))
        : tpCache;

      if (!filtered.length) {
        tpList.innerHTML = '';
        tpEmpty.textContent = q ? '<%= t('pedit.js_no_tracks_found') %> ' + q : '<%= t('pedit.js_no_tracks_yet') %>';
        tpList.appendChild(tpEmpty);
        return;
      }

      tpList.innerHTML = filtered.map(t => {
        const cov = t.cover
          ? '<span class="tp-cover" style="background-image:url(\'' + escAttr(t.cover) + '\')"></span>'
          : '<span class="tp-cover tp-cover-empty">' + SVG_NOTE + '</span>';
        const dis = t.playable ? '' : ' aria-disabled="true"';
        const sub = t.artist ? '<span class="tp-row-artist">' + escAttr(t.artist) + '</span>' : '';
        return (
          '<button type="button" class="tp-row" role="option" data-track-id="' + escAttr(t.id) + '"' + dis + '>' +
            cov +
            '<span class="tp-meta">' +
              '<span class="tp-row-title">' + escAttr(t.title) + '</span>' +
              sub +
            '</span>' +
            '<span class="tp-duration">' + fmtDur(t.duration) + '</span>' +
          '</button>'
        );
      }).join('');
    }

    async function loadTracks() {
      if (Array.isArray(tpCache)) return tpCache;
      tpEmpty.textContent = '<%= t('pedit.js_tracks_loading') %>';
      try {
        const r = await fetch('/admin/playlists/api/tracks', { credentials: 'same-origin' });
        const j = await r.json();
        tpCache = (j && j.ok && Array.isArray(j.tracks)) ? j.tracks : [];
      } catch (e) {
        tpCache = [];
        tpEmpty.textContent = '<%= t('pedit.js_tracks_load_fail') %>: ' + e.message;
      }
      return tpCache;
    }

    function openPicker() {
      tpLastFocus = document.activeElement;
      trackPicker.hidden = false;
      trackPicker.setAttribute('aria-hidden', 'false');
      document.body.classList.add('tp-locked');
      tpSearch.value = '';
      renderList('');
      // Defer focus so the open animation doesn't get jumped
      setTimeout(() => tpSearch.focus(), 30);
    }
    function closePicker() {
      trackPicker.hidden = true;
      trackPicker.setAttribute('aria-hidden', 'true');
      document.body.classList.remove('tp-locked');
      if (tpLastFocus && typeof tpLastFocus.focus === 'function') {
        try { tpLastFocus.focus(); } catch(_) {}
      }
    }

    trackBtn.addEventListener('click', async () => {
      openPicker();
      await loadTracks();
      renderList(tpSearch.value);
    });

    // Close: backdrop click, [data-tp-close], or Escape
    trackPicker.addEventListener('click', (e) => {
      if (e.target.closest('[data-tp-close]')) {
        closePicker();
        return;
      }
      const row = e.target.closest('.tp-row[data-track-id]');
      if (row) {
        if (row.getAttribute('aria-disabled') === 'true') return;
        const id = row.dataset.trackId;
        if (id) {
          insertChip('track', id);
          closePicker();
        }
      }
    });
    document.addEventListener('keydown', (e) => {
      if (!trackPicker.hidden && e.key === 'Escape') {
        e.preventDefault();
        closePicker();
      }
    });

    // Live filter
    tpSearch.addEventListener('input', () => renderList(tpSearch.value));
  }

  // ── Playlist insert (open existing or create new via modal)
  const playlistBtn = document.getElementById('insert-playlist-btn');
  if (playlistBtn) {
    playlistBtn.addEventListener('click', async () => {
      if (typeof window.openPlaylistEditor !== 'function') {
        alert('<%= t('pedit.js_playlist_editor_missing') %>');
        return;
      }
      try {
        const r = await fetch('/admin/playlists/api/list', { credentials: 'same-origin' });
        const j = await r.json();
        if (j.ok && Array.isArray(j.playlists) && j.playlists.length > 0) {
          const choice = prompt(
            '<%= t('pedit.js_playlist_existing') %>\n\n' +
            j.playlists.map((p, i) => `${i + 1}. ${p.title} (${p.track_count} tracks)`).join('\n') +
            '\n\n<%= t('pedit.js_playlist_choose') %>'
          );
          if (choice && /^\d+$/.test(choice.trim())) {
            const idx = parseInt(choice.trim(), 10) - 1;
            if (idx >= 0 && idx < j.playlists.length) {
              insertChip('playlist', j.playlists[idx].id);
              return;
            }
          }
          if (choice === null) return;
        }
      } catch (_) { /* fall through to create */ }

      window.openPlaylistEditor({
        mode: 'create',
        onSaved: ({ id }) => insertChip('playlist', id),
      });
    });
  }

  // ── Submit: serialize editor contents into the hidden field
  if (form && hiddenField) {
    form.addEventListener('submit', () => {
      const clone = editor.cloneNode(true);
      serializeChips(clone);
      hiddenField.value = clone.innerHTML;
    });
  }
})();
</script>

<%# ── Track picker modal (P59). Mobile-first: full-screen sheet on small
    viewports, centered modal on ≥640px. Populated lazily on first open. %>
<% if (typeof user !== 'undefined' && user) { %>
<div id="track-picker" class="tp-modal" hidden aria-hidden="true">
  <div class="tp-backdrop" data-tp-close></div>
  <div class="tp-sheet" role="dialog" aria-modal="true" aria-labelledby="tp-title">
    <header class="tp-header">
      <h2 id="tp-title" class="tp-h2"><%= t('pedit.tp_title') %></h2>
      <button type="button" class="tp-close" data-tp-close aria-label="<%= t('pedit.tp_close') %>">
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
      </button>
    </header>
    <div class="tp-search-row">
      <span class="tp-search-icon" aria-hidden="true">
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="7"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg>
      </span>
      <input type="search" class="tp-search" id="tp-search" placeholder="<%= t('pedit.tp_search_placeholder') %>" autocomplete="off" inputmode="search">
    </div>
    <div class="tp-list" id="tp-list" role="listbox" aria-label="<%= t('pedit.tp_list_aria') %>">
      <div class="tp-empty" id="tp-empty"><%= t('pedit.js_tracks_loading') %></div>
    </div>
  </div>
</div>
<% } %>

<%# Playlist editor modal — included so its global window.openPlaylistEditor
    is available when the toolbar button fires. Only renders if user can post. %>
<% if (typeof user !== 'undefined' && user) { %>
  <%- include('../partials/playlist-editor', { csrfToken: (typeof csrfToken !== 'undefined' ? csrfToken : '') }) %>
<% } %>

<script>
(function () {
  // Vastpinnen: checkbox toggelt het verborgen rang-veld (0 = niet gepind),
  // ▲▼ verschuift de plek, met een leesbare beschrijving i.p.v. een ruw getal.
  var toggle = document.getElementById('pin-toggle');
  var rank   = document.getElementById('pin-rank');
  var pos    = document.getElementById('pin-pos');
  var label  = document.getElementById('pin-label');
  var up     = document.getElementById('pin-up');    // hoger = lager getal (richting 1/bovenaan)
  var down   = document.getElementById('pin-down');
  if (!toggle || !rank || !pos) return;

  function descr(n) {
    n = Number(n) || 0;
    if (n <= 1) return '<%= t('pedit.pin_top') %>';
    return n + '<%= t('pedit.pin_nth_suffix') %>';
  }
  function render() {
    var on = toggle.checked;
    pos.hidden = !on;
    if (on && Number(rank.value) < 1) rank.value = 1;
    if (!on) rank.value = 0;
    if (label) label.textContent = on ? descr(rank.value) : '';
    if (up) up.disabled = Number(rank.value) <= 1;
  }
  toggle.addEventListener('change', render);
  if (up)   up.addEventListener('click', function () { rank.value = Math.max(1, (Number(rank.value) || 1) - 1); render(); });
  if (down) down.addEventListener('click', function () { rank.value = (Number(rank.value) || 0) + 1; render(); });
  render();
})();

(function () {
  // De Opslaan/Annuleren-balk (position: sticky; bottom:0) net boven twee mogelijke
  // obstakels houden door een dynamische bottom-offset te zetten = het grootste van:
  //  1) de hoogte van het toetsenbord-deel dat de layout-viewport NIET dekt
  //     (op iOS verschuift de visual viewport; op Android verkleint de layout-
  //     viewport door interactive-widget=resizes-content → offset ≈ 0);
  //  2) de hoogte van de spelende audiospeler (fixed, z-index 1000).
  // We blijven bij sticky (geen fixed/top-gegoochel → geen balk midden in beeld).
  var bar = document.querySelector('.pe-actions');
  if (!bar) return;
  var vv = window.visualViewport;
  function position() {
    var ap = document.querySelector('.audio-player');
    var playing = document.body.classList.contains('has-audio-player') &&
                  ap && getComputedStyle(ap).display !== 'none';
    var audioOffset = playing ? Math.round(ap.getBoundingClientRect().height) : 0;
    var kbCovered = vv ? Math.max(0, Math.round(window.innerHeight - vv.height - vv.offsetTop)) : 0;
    var offset = Math.max(audioOffset, kbCovered);
    bar.style.bottom = offset ? offset + 'px' : '';
  }
  position();
  window.addEventListener('resize', position);
  if (vv) { vv.addEventListener('resize', position); vv.addEventListener('scroll', position); }
  // has-audio-player wisselt via een body-class → daarop reageren.
  try { new MutationObserver(position).observe(document.body, { attributes: true, attributeFilter: ['class'] }); } catch (_) {}
})();
</script>