{#
  Live Markdown Editor (text-forge).

  Provides an "Edit" button on content pages that opens a split-pane editor
  with live preview using Pyodide + PyMdown Extensions.

  Config (mkdocs.yml -> plugins -> text-forge):
    text-forge:
      editor_enabled: true   # Show editor button on content pages
#}

{% if text_forge_editor_enabled and page and page.content %}
<!-- Live Editor Panel -->
<div id="md-editor" class="md-editor" hidden>
  <div class="md-editor__toolbar">
    <span class="md-editor__title" data-i18n="editor_title">Markdown Editor</span>
    <div class="md-editor__syncs">
      <button id="md-editor-sync-right" class="md-editor__btn" data-i18n-title="editor_sync_right" title="Sync scroll →">
        {% include ".icons/material/arrow-right-bold.svg" %}
      </button>
      <button id="md-editor-sync-left" class="md-editor__btn" data-i18n-title="editor_sync_left" title="← Sync scroll">
        {% include ".icons/material/arrow-left-bold.svg" %}
      </button>
    </div>
    <div class="md-editor__actions">
        <button id="md-editor-github-logout" class="md-editor__btn md-editor__btn--github" data-i18n-title="editor_github_logout" title="Clear GitHub Token" style="display:none;">
          {% include ".icons/material/account-remove.svg" %}
        </button>
        <button id="md-editor-save" class="md-editor__btn" data-i18n-title="editor_save" title="Save">
          {% include ".icons/material/content-save.svg" %}
        </button>
        <button id="md-editor-close" class="md-editor__btn" title="Close">
          {% include ".icons/material/close.svg" %}
        </button>
      </div>
  </div>
  <div class="md-editor__content">
    <div class="md-editor__pane md-editor__pane--source">
      <textarea id="md-editor-source" spellcheck="false" data-i18n-placeholder="editor_loading" placeholder="Loading editor..."></textarea>
    </div>
    <div class="md-editor__pane md-editor__pane--preview">
      <div id="md-editor-preview" class="md-typeset"></div>
    </div>
  </div>
  <div class="md-editor__status">
    <span class="md-editor__filename" id="md-editor-filename"></span>
    <span id="md-editor-status" data-i18n="editor_status_ready">Ready</span>
  </div>
</div>

<!-- Editor Toggle Button (fab style, bottom-right) -->
<button id="md-editor-toggle" class="md-editor-fab" data-i18n-title="editor_title" title="Edit">
  {% include ".icons/material/pencil.svg" %}
</button>

<!-- Pass page metadata and source content to JS -->
{% set edit_uri_parts = config.edit_uri.rstrip('/').split('/') %}
{% set repo_base_path = '/'.join(edit_uri_parts[2:]) if edit_uri_parts|length > 2 else '' %}
{% set full_file_path = (repo_base_path ~ '/' ~ page.file.src_path) if repo_base_path else page.file.src_path %}
{% set editor_config = {
  'sourceUrl': (config.repo_url ~ '/' ~ config.edit_uri ~ page.file.src_path)|e|replace('/blob/', '/raw/'),
  'filePath': full_file_path|e,
  'localFilePath': page.file.src_uri|e,
  'fileName': page.file.name|e,
  'sourceContent': (page._text_forge_original_source | default(page.markdown)),
  'markdownExtensions': config.markdown_extensions,
  'extensionConfigs': config.mdx_configs,
  'github': {
    'owner': config.repo_name.split('/')[0]|e,
    'repo': config.repo_name.split('/')[1]|e,
    'branch': (config.edit_uri.split('/')[1] if '/' in config.edit_uri else (config.remote_branch|default('main')))|e,
    'apiUrl': 'https://api.github.com'
  } if config.repo_name else None
} %}
<script id="md-editor-config" type="application/json">
{{ editor_config | tojson }}
</script>
<script>
  window.__MD_EDITOR__ = JSON.parse(document.getElementById('md-editor-config').textContent);
</script>
{% endif %}