{% extends "base.html" %}

{% block title %}
  {% if current_lang == 'de' %}Seite bearbeiten{% else %}Edit Page{% endif %}: {{ page.slug }}
{% endblock %}

{% set active_slug = page.slug %}

{% block wrapper_class %}wrapper-edit-mode{% endblock %}

{% block header_meta %}{% endblock %}

{% block content %}
<link href="/static/vendor/quill.snow.css?v=2.0.2" rel="stylesheet" />
<!-- Quill Table Better CSS -->
<link href="/static/vendor/quill-table-better.css?v=1.2.3" rel="stylesheet" />
<style>
  /* Quill builds its toolbar in JavaScript and injects icons as <svg viewBox="0 0 18 18">
     without width/height attributes — they are sized by quill.snow.css alone. Should that
     stylesheet ever be applied after quill.js has already built the toolbar, the icons
     would paint at their default replaced-element size (300x150) and flash as one huge
     black glyph. Capping the size here (this <style> is parsed before the script runs)
     makes that impossible. max-* rather than width/height, so Quill's own rules, which are
     more specific, still take over cleanly. */
  .ql-toolbar svg {
    max-width: 18px;
    max-height: 18px;
  }

  /* Make the Quill editors resizable vertically */
  #quill-de, #quill-en {
    resize: vertical;
    overflow: hidden;
    min-height: 200px;
  }

  /* The resize handle above only exists as long as overflow is not visible — but
     that same clipping cuts off Quill's popups as soon as they reach past the
     editor box, because both the link tooltip and the table properties dialog are
     absolutely positioned children of the container. So lift the clipping for
     exactly as long as one of them is open; the editor cannot be resized in that
     moment, which is unnoticeable while a dialog holds the focus. Scrolling is
     unaffected — .ql-editor scrolls itself (overflow-y: auto). */
  #quill-de:has(.ql-tooltip:not(.ql-hidden)),
  #quill-en:has(.ql-tooltip:not(.ql-hidden)),
  #quill-de:has(.ql-table-properties-form),
  #quill-en:has(.ql-table-properties-form) {
    overflow: visible;
  }

  /* Prevent the scrollbar of the inner editor from covering the parent's resize handle */
  #quill-de .ql-editor, #quill-en .ql-editor {
    height: calc(100% - 12px) !important;
  }

  /* Default container z-index (below toolbar) to let toolbar dropdowns render on top of content */
  .ql-container.ql-snow {
    z-index: 11 !important;
  }

  /* When properties dialog is open, raise container z-index so dialog sits above toolbar */
  .ql-container.ql-snow:has(.ql-table-properties-form) {
    z-index: 13 !important;
  }

  /* Table & Cell properties form dialog styling */
  .ql-table-properties-form {
    background: #ffffff !important;
    border: 1px solid #ccced1 !important;
    border-radius: 6px !important;
    padding: 10px !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15) !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
    width: 320px !important;
    box-sizing: border-box !important;
    z-index: 2000 !important;
  }

  .ql-table-properties-form h2.properties-form-header {
    font-size: 1.1rem !important;
    font-weight: 600 !important;
    margin: 0 0 4px 0 !important;
    padding-bottom: 2px !important;
    border-bottom: 1px solid #e5e7eb !important;
    color: #333333 !important;
  }

  /* Form row layout: Stack label/heading above fields */
  .ql-table-properties-form .properties-form-row {
    display: block !important;
    margin-bottom: 4px !important;
    width: 100% !important;
  }

  /* Style the row title labels */
  .ql-table-properties-form .ql-table-dropdown-label {
    display: block !important;
    margin-bottom: 1px !important;
    font-size: 0.85rem !important;
    font-weight: 600 !important;
    color: #4b5563 !important;
  }

  /* Align inputs and dropdowns horizontally inside the row */
  .ql-table-properties-form .properties-form-row > * {
    vertical-align: middle !important;
  }

  /* Style the dropdown select elements */
  .ql-table-properties-form .ql-table-dropdown-properties {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    height: 30px !important;
    border: 1px solid #ccced1 !important;
    border-radius: 4px !important;
    padding: 0 8px !important;
    cursor: pointer !important;
    background: #ffffff !important;
    font-size: 0.85rem !important;
    color: #374151 !important;
    width: 100px !important;
    box-sizing: border-box !important;
    margin-right: 6px !important;
  }

  .ql-table-properties-form .ql-table-dropdown-icon {
    display: inline-flex !important;
    align-items: center !important;
  }

  /* Style color picker buttons */
  .ql-table-properties-form .color-button {
    width: 28px !important;
    height: 28px !important;
    border-radius: 4px !important;
    border: 1px solid #ccced1 !important;
    cursor: pointer !important;
    display: inline-block !important;
    box-sizing: border-box !important;
    vertical-align: middle !important;
    margin-right: 8px !important;
  }
  
  .ql-table-properties-form .color-unselected {
    background: linear-gradient(45deg, #ccc 25%, transparent 25%), linear-gradient(-45deg, #ccc 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #ccc 75%), linear-gradient(-45deg, transparent 75%, #ccc 75%) !important;
    background-size: 8px 8px !important;
    background-position: 0 0, 0 4px, 4px -4px, -4px 0 !important;
  }

  /* Input wrapper positioning */
  .ql-table-properties-form .label-field-view {
    display: inline-flex !important;
    vertical-align: middle !important;
  }

  .ql-table-properties-form .label-field-view-input-wrapper {
    position: relative !important;
    display: inline-flex !important;
    align-items: center !important;
  }

  /* Fix input fields styling & dimensions */
  .ql-table-properties-form input.property-input {
    width: 80px !important;
    height: 30px !important;
    border: 1px solid #ccced1 !important;
    border-radius: 4px !important;
    padding: 2px 8px !important;
    font-size: 0.85rem !important;
    background: #ffffff !important;
    color: #374151 !important;
    box-shadow: none !important;
    box-sizing: border-box !important;
  }

  /* Hide placeholder labels by default to prevent overlapping */
  .ql-table-properties-form .label-field-view-input-wrapper label {
    display: none !important;
  }

  /* Show floating label when focused or filled */
  .ql-table-properties-form .property-input:focus + label,
  .ql-table-properties-form .property-input:not(:placeholder-shown) + label {
    display: block !important;
    position: absolute !important;
    left: 8px !important;
    top: -6px !important;
    font-size: 0.7rem !important;
    color: #3779eb !important;
    background: #ffffff !important;
    padding: 0 2px !important;
    font-weight: 600 !important;
    transform: translateY(0) !important;
    z-index: 10 !important;
  }

  /* Remove border/shadow around the color input and picker container */
  .ql-table-properties-form .ql-table-color-container {
    border: none !important;
    box-shadow: none !important;
    background: transparent !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
  }

  /* Make color text input field slightly longer */
  .ql-table-properties-form .label-field-view-color input.property-input {
    width: 100px !important;
  }

  /* Style Save and Cancel buttons in action row */
  .ql-table-properties-form .properties-form-action-row {
    display: flex !important;
    justify-content: flex-end !important;
    gap: 8px !important;
    margin-top: 4px !important;
    border-top: 1px solid #e5e7eb !important;
    padding-top: 6px !important;
    width: 100% !important;
  }

  .ql-table-properties-form .properties-form-action-row button {
    height: 32px !important;
    padding: 0 16px !important;
    font-size: 0.85rem !important;
    font-weight: 600 !important;
    border-radius: 4px !important;
    cursor: pointer !important;
    transition: all 0.15s ease !important;
    display: inline-flex !important;
    justify-content: center !important;
    align-items: center !important;
    box-sizing: border-box !important;
  }

  /* Cancel button */
  .ql-table-properties-form .properties-form-action-row button[label="cancel"] {
    background-color: #ffffff !important;
    border: 1px solid #d1d5db !important;
    color: #374151 !important;
  }

  .ql-table-properties-form .properties-form-action-row button[label="cancel"]:hover {
    background-color: #f3f4f6 !important;
    border-color: #9ca3af !important;
  }

  /* Save button */
  .ql-table-properties-form .properties-form-action-row button[label="save"] {
    background-color: #004d65 !important; /* Matches the classic-blue accent */
    border: 1px solid #004d65 !important;
    color: #ffffff !important;
  }

  .ql-table-properties-form .properties-form-action-row button[label="save"]:hover {
    background-color: #003647 !important;
    border-color: #003647 !important;
  }
</style>
<div class="card">
  <div class="editor-layout">
    <div style="border-bottom: 1px solid var(--card-border); padding-bottom: 16px; margin-bottom: 8px; display: flex; justify-content: space-between; align-items: center;">
      <h2 style="font-family: var(--font-title); font-size: 1.8rem; font-weight: 700; margin: 0;">
        {% if current_lang == 'de' %}Seite bearbeiten / erstellen{% else %}Edit / Create Page{% endif %}
      </h2>
      <a href="{% if exists %}/page/{{ page.slug }}{% else %}/{% endif %}" class="btn btn-secondary btn-icon" title="{% if current_lang == 'de' %}Abbrechen{% else %}Cancel{% endif %}">
        <svg style="width: 18px; height: 18px;" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
        </svg>
      </a>
    </div>

    <!-- Autosave Draft Banner Container -->
    <div id="autosave-banner" class="flash-message flash-warning" style="display: none; margin-bottom: 16px; justify-content: space-between; align-items: center; padding: 12px 16px; border-radius: 8px;">
      <div style="display: flex; align-items: center; gap: 8px;">
        <svg style="width: 20px; height: 20px; flex-shrink: 0;" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"></path>
        </svg>
        <span>
          {% if current_lang == 'de' %}
            Ungespeicherter Entwurf gefunden (<span id="draft-time"></span>).
          {% else %}
            Unsaved draft found (<span id="draft-time"></span>).
          {% endif %}
        </span>
      </div>
      <div style="display: flex; gap: 8px;">
        <button type="button" id="restore-draft-btn" class="btn btn-primary" style="padding: 4px 12px; font-size: 0.85rem;">
          {% if current_lang == 'de' %}Wiederherstellen{% else %}Restore{% endif %}
        </button>
        <button type="button" id="discard-draft-btn" class="btn btn-secondary" style="padding: 4px 12px; font-size: 0.85rem;">
          {% if current_lang == 'de' %}Verwerfen{% else %}Discard{% endif %}
        </button>
      </div>
    </div>

    <form action="/edit/{{ page.slug }}" method="POST" class="editor-form" id="wiki-edit-form">
      <input type="hidden" name="csrf_token" value="{{ csrf_token }}">
      <!-- Access type select -->
      <div class="form-row">
        <div class="form-group" style="grid-column: span 2;">
          <label class="form-label" for="page-access">
            {% if current_lang == 'de' %}Zugriffsberechtigung (IP-Regeln){% else %}Access Permission (IP Rules){% endif %}
          </label>
          <select id="page-access" name="access" class="form-select">
            <option value="external" {% if page.metadata.access == 'external' %}selected{% endif %}>
              {% if current_lang == 'de' %}Extern (Für alle öffentlich zugänglich){% else %}External (Publicly accessible to everyone){% endif %}
            </option>
            <option value="internal" {% if page.metadata.access == 'internal' %}selected{% endif %}>
              {% if current_lang == 'de' %}Intern (Zugriff nur über erlaubte IP-Adressen){% else %}Internal (Access restricted to allowed IP addresses only){% endif %}
            </option>
          </select>
          <span id="access-parent-warning" style="display: none; font-size: 0.85rem; color: #854d0e; background-color: #faf0d8; border: 1px solid #e2d1a7; padding: 10px 14px; border-radius: 8px; margin-top: 6px; font-weight: 600; line-height: 1.4;">
            {% if current_lang == 'de' %}Gesperrt auf 'Intern', da die übergeordnete Seite intern ist.{% else %}Locked to 'Internal' because the parent page is internal.{% endif %}
          </span>
        </div>
      </div>

      <!-- Publication state: a draft is saved but stays invisible to readers -->
      {% if page.slug != 'home' and page.slug != 'impressum' %}
        <div class="form-row" style="margin-top: 6px; margin-bottom: 6px;">
          <div class="form-group" style="grid-column: span 2;">
            <label class="form-label" for="page-publication">
              {% if current_lang == 'de' %}Veröffentlichung{% else %}Publication{% endif %}
            </label>
            <select id="page-publication" name="publication" class="form-select">
              <option value="published" {% if not page.metadata.draft %}selected{% endif %}>
                {% if current_lang == 'de' %}Veröffentlicht (für Leser sichtbar){% else %}Published (visible to readers){% endif %}
              </option>
              <option value="draft" {% if page.metadata.draft %}selected{% endif %}>
                {% if current_lang == 'de' %}Entwurf (gespeichert, nur für angemeldete Redakteure sichtbar){% else %}Draft (saved, visible to logged-in editors only){% endif %}
              </option>
            </select>
            <span id="publication-parent-warning" style="display: none; font-size: 0.85rem; color: #854d0e; background-color: #faf0d8; border: 1px solid #e2d1a7; padding: 10px 14px; border-radius: 8px; margin-top: 6px; font-weight: 600; line-height: 1.4;">
              {% if current_lang == 'de' %}Gesperrt auf 'Entwurf', da die übergeordnete Seite ein Entwurf ist.{% else %}Locked to 'Draft' because the parent page is a draft.{% endif %}
            </span>
          </div>
        </div>
      {% endif %}

      <!-- Parent Page select (hierarchical structure) -->
      {% if page.slug != 'home' and page.slug != 'impressum' %}
        <div class="form-row" style="margin-top: 6px; margin-bottom: 6px;">
          <div class="form-group" style="grid-column: span 2;">
            <label class="form-label" for="page-parent">
              {% if current_lang == 'de' %}Übergeordnete Seite{% else %}Parent Page{% endif %}
            </label>
            <select id="page-parent" name="parent" class="form-select">
              <option value="" {% if current_parent == '' %}selected{% endif %}>
                {% if current_lang == 'de' %}-- Keine (Hauptseite) --{% else %}-- None (Main Page) --{% endif %}
              </option>
              {% for opt in parent_options %}
                <option value="{{ opt.slug }}" data-access="{{ opt.access }}" data-publication="{{ opt.publication }}" {% if current_parent == opt.slug %}selected{% endif %}>
                  {% if current_lang == 'de' %}
                    {{ opt.title_de }}{% if opt.title_de != opt.title_en %} ({{ opt.title_en }}){% endif %}
                  {% else %}
                    {{ opt.title_en }}{% if opt.title_de != opt.title_en %} ({{ opt.title_de }}){% endif %}
                  {% endif %}
                </option>
              {% endfor %}
            </select>
          </div>
        </div>
      {% endif %}

      <!-- Pin in Menu select (only shown for main pages) -->
      {% if page.slug != 'home' and page.slug != 'impressum' %}
        <div class="form-row" id="pin-container" style="margin-top: 6px; margin-bottom: 6px; display: {% if current_parent != '' %}none{% else %}block{% endif %};">
          <div class="form-group" style="grid-column: span 2;">
            <label class="form-label" for="page-pinned">
              {% if current_lang == 'de' %}Im Menü anpinnen{% else %}Pin in Menu{% endif %}
            </label>
            <select id="page-pinned" name="pinned" class="form-select">
              <option value="" {% if page.metadata.pinned != 'top' and page.metadata.pinned != 'bottom' %}selected{% endif %}>
                {% if current_lang == 'de' %}Normal (Alphabetisch sortiert){% else %}Normal (Alphabetically sorted){% endif %}
              </option>
              <option value="top" {% if page.metadata.pinned == 'top' %}selected{% endif %}>
                {% if current_lang == 'de' %}Oben anpinnen{% else %}Pin to Top{% endif %}
              </option>
              <option value="bottom" {% if page.metadata.pinned == 'bottom' %}selected{% endif %}>
                {% if current_lang == 'de' %}Unten anpinnen{% else %}Pin to Bottom{% endif %}
              </option>
            </select>
          </div>
        </div>
      {% endif %}

      <!-- Title Image Select -->
      <div class="form-row" style="margin-top: 12px; margin-bottom: 12px;">
        <div class="form-group" style="grid-column: span 2;">
          <label class="form-label" style="margin-bottom: 2px;">
            {% if current_lang == 'de' %}Titelbild (Optional){% else %}Title Image (Optional){% endif %}
          </label>
          <div style="font-size: 0.8rem; color: var(--text-muted); margin-bottom: 8px;">
            {% if current_lang == 'de' %}Bild anklicken, um zur Mediathek zu springen, oder unten auswählen.{% else %}Click box to jump to library below, or select an image below.{% endif %}
          </div>
          <input type="hidden" id="page-title-image" name="title_image" value="{{ page.metadata.title_image }}">
          
          <!-- Column 1: Box and Selector stacked vertically -->
          <div style="display: flex; flex-direction: column; gap: 8px; align-items: center; width: 80px;">
            <!-- Preview & Action Box -->
            <div id="title-image-preview-box" class="logo-gallery-item {% if page.metadata.title_image %}active{% else %}upload-box{% endif %}" 
                 style="width: 100%; height: 80px; cursor: pointer; position: relative; border-radius: 8px; border: 2px {% if page.metadata.title_image %}solid var(--accent-color){% else %}dashed var(--card-border){% endif %}; padding: 4px; display: flex; align-items: center; justify-content: center;"
                 onclick="triggerTitleImageSelection()">
              
              <!-- Image Element (only shown if title_image is set) -->
              <img id="title-image-preview-img" src="{{ page.metadata.title_image }}" alt="Preview" 
                   style="max-width: 100%; max-height: 100%; object-fit: contain; display: {% if page.metadata.title_image %}block{% else %}none{% endif %}; pointer-events: none;">
              
              <!-- Plus Placeholder (only shown if title_image is empty) -->
              <div id="title-image-placeholder" style="display: {% if page.metadata.title_image %}none{% else %}flex{% endif %}; flex-direction: column; align-items: center; justify-content: center; gap: 4px; font-size: 0.65rem; text-align: center; color: var(--text-muted);">
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" style="width: 18px; height: 18px;">
                  <line x1="12" y1="5" x2="12" y2="19"></line>
                  <line x1="5" y1="12" x2="19" y2="12"></line>
                </svg>
                <span style="font-weight: 600;">{% if current_lang == 'de' %}Wählen{% else %}Choose{% endif %}</span>
              </div>

              <!-- Delete Hover Badge -->
              <button type="button" id="title-image-delete-btn" class="gallery-btn-delete" 
                      style="display: {% if page.metadata.title_image %}flex{% else %}none{% endif %}; position: absolute; top: -6px; right: -6px; width: 20px; height: 20px; border-radius: 50%; background-color: var(--danger); border: none; align-items: center; justify-content: center; cursor: pointer; padding: 0;"
                      onclick="event.stopPropagation(); clearTitleImage()">
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" style="width: 10px; height: 10px;">
                  <line x1="18" y1="6" x2="6" y2="18"></line>
                  <line x1="6" y1="6" x2="18" y2="18"></line>
                </svg>
              </button>
            </div>

            <!-- Position Selector -->
            <select id="page-title-image-pos" name="title_image_pos" class="form-select" style="height: 30px; padding: 2px 4px; font-size: 0.75rem; width: 100%; min-width: 0 !important; max-width: 100%; cursor: pointer; text-align: center;">
              <option value="left" {% if page.metadata.title_image_pos == 'left' or not page.metadata.title_image_pos %}selected{% endif %}>
                {% if current_lang == 'de' %}Links{% else %}Left{% endif %}
              </option>
              <option value="right" {% if page.metadata.title_image_pos == 'right' %}selected{% endif %}>
                {% if current_lang == 'de' %}Rechts{% else %}Right{% endif %}
              </option>
              <option value="above" {% if page.metadata.title_image_pos == 'above' %}selected{% endif %}>
                {% if current_lang == 'de' %}Banner{% else %}Banner{% endif %}
              </option>
            </select>
          </div>
        </div>
      </div>

      <!-- Language selector tabs for editor -->
      <div class="editor-tabs">
        <button type="button" class="tab-btn active" id="tab-de">Deutsch 🇩🇪</button>
        <button type="button" class="tab-btn" id="tab-en">English 🇬🇧</button>
      </div>

      <!-- German Editor Tab -->
      <div class="lang-tab-content" id="content-pane-de">
        <div class="form-group" style="margin-bottom: 12px;">
          <label class="form-label" for="title-de">Titel (Deutsch)</label>
          <input type="text" id="title-de" name="title_de" class="form-input" value="{{ page.metadata.title_de }}" placeholder="Seitentitel auf Deutsch" required>
        </div>

        <div class="form-group" style="margin-bottom: 12px;">
          <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px;">
            <label class="form-label" style="margin: 0;">Inhalt (Deutsch)</label>
            <button type="button" class="btn btn-secondary" id="toggle-html-de" onclick="toggleHtmlMode('de')" style="padding: 4px 10px; font-size: 0.8rem; height: auto; border-radius: 6px;">
              HTML-Ansicht
            </button>
          </div>
          <div id="html-error-de" style="display: none; background-color: #fee2e2; border: 1px solid #fca5a5; color: #991b1b; padding: 10px 14px; border-radius: 8px; font-size: 0.85rem; margin-bottom: 10px; font-weight: 600; line-height: 1.4;">
            HTML-Syntaxfehler: <span class="error-msg"></span>
          </div>
          <div id="editor-container-de">
            <div id="quill-de" style="height: 400px;"></div>
          </div>
          <textarea id="markdown-de" name="content_de" style="display: none; height: 400px; width: 100%; font-family: Courier New, Courier, monospace; font-size: 16px; padding: 12px; line-height: 1.5; background-color: var(--bg-tertiary); border: 1px solid var(--card-border); border-radius: 8px; outline: none; resize: vertical;">{{ page.content_de }}</textarea>
        </div>
      </div>

      <!-- English Editor Tab -->
      <div class="lang-tab-content" id="content-pane-en" style="display: none;">
        <div class="form-group" style="margin-bottom: 12px;">
          <label class="form-label" for="title-en">Title (English)</label>
          <input type="text" id="title-en" name="title_en" class="form-input" value="{{ page.metadata.title_en }}" placeholder="Page title in English" required>
        </div>

        <div class="form-group" style="margin-bottom: 12px;">
          <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px;">
            <label class="form-label" style="margin: 0;">Content (English)</label>
            <button type="button" class="btn btn-secondary" id="toggle-html-en" onclick="toggleHtmlMode('en')" style="padding: 4px 10px; font-size: 0.8rem; height: auto; border-radius: 6px;">
              HTML View
            </button>
          </div>
          <div id="html-error-en" style="display: none; background-color: #fee2e2; border: 1px solid #fca5a5; color: #991b1b; padding: 10px 14px; border-radius: 8px; font-size: 0.85rem; margin-bottom: 10px; font-weight: 600; line-height: 1.4;">
            HTML Syntax Error: <span class="error-msg"></span>
          </div>
          <div id="editor-container-en">
            <div id="quill-en" style="height: 400px;"></div>
          </div>
          <textarea id="markdown-en" name="content_en" style="display: none; height: 400px; width: 100%; font-family: Courier New, Courier, monospace; font-size: 16px; padding: 12px; line-height: 1.5; background-color: var(--bg-tertiary); border: 1px solid var(--card-border); border-radius: 8px; outline: none; resize: vertical;">{{ page.content_en }}</textarea>
        </div>
      </div>

      <!-- Universal media & file upload section -->
      <div class="form-group upload-section-container">
        <label class="form-label">
          {% if current_lang == 'de' %}Bilder &amp; Dateien hochladen{% else %}Upload Images &amp; Files{% endif %}
        </label>
        <div class="upload-widget" id="universal-upload-widget">
          <svg style="width: 32px; height: 32px; color: var(--text-muted);" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-8l-4-4m0 0L8 8m4-4v12"></path>
          </svg>
          <div class="upload-widget-text" id="universal-upload-widget-label">
            {% if current_lang == 'de' %}Bild oder Datei auswählen oder hierhin ziehen{% else %}Select image or file or drag it here{% endif %}
          </div>
          <div class="upload-widget-subtext">
            Bilder (PNG, JPG, GIF) oder Dokumente (PDF, ZIP, PPD, EXE, etc. max. 50MB)
          </div>
          <input type="file" id="universal-file-input">
        </div>
      </div>

      <!-- Gallery section -->
      <div class="gallery-container" id="image-gallery-container">
        <button type="button" class="gallery-toggle-btn" aria-expanded="false" id="gallery-toggle-btn">
          <span class="form-label" style="margin: 0; cursor: pointer;">
            {% if current_lang == 'de' %}Bilder-Mediathek{% else %}Image Library{% endif %}
          </span>
          <svg class="gallery-chevron-icon" style="width: 16px; height: 16px; transition: transform 0.2s;" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M19 9l-7 7-7-7"></path>
          </svg>
        </button>
        <div class="gallery-content-wrapper" id="gallery-content-wrapper" style="display: none; margin-top: 8px;">
          <div class="gallery-grid" id="media-gallery-grid">
            <!-- Populated by JavaScript -->
          </div>
        </div>
      </div>

      <!-- File Gallery section -->
      <div class="gallery-container" id="file-gallery-container" style="margin-bottom: 16px;">
        <button type="button" class="gallery-toggle-btn" aria-expanded="false" id="file-gallery-toggle-btn">
          <span class="form-label" style="margin: 0; cursor: pointer;">
            {% if current_lang == 'de' %}Datei-Mediathek{% else %}File Library{% endif %}
          </span>
          <svg class="gallery-chevron-icon" style="width: 16px; height: 16px; transition: transform 0.2s;" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M19 9l-7 7-7-7"></path>
          </svg>
        </button>
        <div class="gallery-content-wrapper" id="file-gallery-content-wrapper" style="display: none; margin-top: 8px;">
          <div class="gallery-grid" id="file-gallery-grid">
            <!-- Populated by JavaScript -->
          </div>
        </div>
      </div>

      <!-- Action buttons -->
      <div style="display: flex; justify-content: flex-end; gap: 12px; margin-top: 12px; border-top: 1px solid var(--card-border); padding-top: 12px;">
        <a href="{% if exists %}/page/{{ page.slug }}{% else %}/{% endif %}" class="btn btn-secondary">
          {% if current_lang == 'de' %}Abbrechen{% else %}Cancel{% endif %}
        </a>
        <button type="submit" class="btn btn-primary">
          <svg style="width: 16px; height: 16px;" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7H5a2 2 0 00-2 2v9a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-3m-1 4l-3 3m0 0l-3-3m3 3V4"></path>
          </svg>
          {% if current_lang == 'de' %}Speichern{% else %}Save Page{% endif %}
        </button>
      </div>
    </form>
  </div>
</div>
{% endblock %}

{% block scripts %}
<!-- Load Quill Rich Text Editor -->
<script src="/static/vendor/quill.js?v=2.0.2"></script>
<!-- Load Quill Table Better JS -->
<script src="/static/vendor/quill-table-better.js?v=1.2.3"></script>

<script>
  const EDITOR_CONFIG = { lang: "{{ current_lang }}", slug: "{{ page.slug }}", csrfToken: "{{ csrf_token }}" };
  const I18N = {% if current_lang == 'de' %}{
    promptImageName: "Geben Sie einen Namen für das Bild ein (ohne Dateiendung):",
    promptFileName: "Geben Sie einen Namen für die Datei ein (ohne Dateiendung):",
    uploadingImage: "Bild wird hochgeladen...",
    uploadSuccessImage: "Upload erfolgreich! In Mediathek verfügbar.",
    uploadWidgetDefault: "Bild oder Datei auswählen oder hierhin ziehen",
    uploadFailed: "Upload fehlgeschlagen!",
    uploadError: "Fehler beim Upload!",
    uploadingFile: "Datei wird hochgeladen...",
    uploadSuccessFile: "Upload erfolgreich! In Datei-Mediathek verfügbar.",
    noImagesInLibrary: "Keine Bilder in der Mediathek.",
    insertLabel: "Einfügen",
    deleteLabel: "Löschen",
    useAsTitleImage: "Als Titelbild verwenden",
    promptImageWidth: "Geben Sie die gewünschte Breite des Bildes an (z. B. 400 für 400px, 50% oder leer lassen für Originalgröße):",
    confirmDeleteImage: "Möchten Sie dieses Bild wirklich dauerhaft aus dem Wiki löschen?",
    noFilesInLibrary: "Keine Dateien in der Mediathek.",
    linkLabel: "Verlinken",
    confirmDeleteFile: "Möchten Sie diese Datei wirklich dauerhaft aus dem Wiki löschen?"
  }{% else %}{
    promptImageName: "Enter a name for the image (without file extension):",
    promptFileName: "Enter a name for the file (without file extension):",
    uploadingImage: "Uploading image...",
    uploadSuccessImage: "Upload successful! Available in library.",
    uploadWidgetDefault: "Select image or file or drag it here",
    uploadFailed: "Upload failed!",
    uploadError: "Error during upload!",
    uploadingFile: "Uploading file...",
    uploadSuccessFile: "Upload successful! Available in library.",
    noImagesInLibrary: "No images in the library.",
    insertLabel: "Insert",
    deleteLabel: "Delete",
    useAsTitleImage: "Use as Title Image",
    promptImageWidth: "Enter the desired width of the image (e.g. 400 for 400px, 50%, or leave blank for original size):",
    confirmDeleteImage: "Are you sure you want to permanently delete this image from the wiki?",
    noFilesInLibrary: "No files in the library.",
    linkLabel: "Link",
    confirmDeleteFile: "Are you sure you want to permanently delete this file from the wiki?"
  }{% endif %};
</script>
<script src="/static/js/editor.js?v=1774"></script>
{% endblock %}