{% extends "madga/studio/base.html" %}
{% load i18n madga_studio_tags %}

{% block breadcrumbs %}
  <a href="{% url 'madga_studio:page_list' %}" class="crumb">Pages</a>
  <span class="sep">/</span>
  <span class="crumb is-current">{% if page_obj %}{{ page_obj.title }}{% else %}Nueva{% endif %}</span>
{% endblock %}

{% block head_extra %}
<style>
  .madga-editor-grid { display: grid; grid-template-columns: 1fr 320px; gap: 20px; padding: 20px; align-items: start; }
  .madga-editor-main { background: var(--bg-1); border: 1px solid var(--border); border-radius: 12px; padding: 28px; min-height: 480px; }
  .madga-editor-title { width:100%; border:none; outline:none; background:transparent; color:var(--fg-0); font-size:30px; font-weight:600; line-height:1.2; padding:0 0 14px; margin:0 0 14px; border-bottom:1px solid var(--border); font-family:var(--font-sans); }
  .madga-rail-card { background: var(--bg-1); border:1px solid var(--border); border-radius:12px; padding:14px; }
  .madga-rail-card h3 { font-size:11px; text-transform:uppercase; letter-spacing:.06em; color:var(--fg-2); margin:0 0 12px; font-weight:600; }
</style>
<script src="https://cdn.jsdelivr.net/npm/@editorjs/editorjs@2.30.7"></script>
<script src="https://cdn.jsdelivr.net/npm/@editorjs/header@2.8.7"></script>
<script src="https://cdn.jsdelivr.net/npm/@editorjs/list@1.10.0"></script>
<script src="https://cdn.jsdelivr.net/npm/@editorjs/quote@2.6.0"></script>
<script src="https://cdn.jsdelivr.net/npm/@editorjs/code@2.9.0"></script>
<script src="https://cdn.jsdelivr.net/npm/@editorjs/delimiter@1.4.1"></script>
<script src="https://cdn.jsdelivr.net/npm/@editorjs/image@2.9.3"></script>
<script src="https://cdn.jsdelivr.net/npm/@editorjs/marker@1.4.0"></script>
<script src="https://cdn.jsdelivr.net/npm/@editorjs/inline-code@1.5.1"></script>
<script src="https://cdn.jsdelivr.net/npm/@editorjs/underline@1.2.1"></script>
<script src="https://cdn.jsdelivr.net/npm/editorjs-hyperlink@1.0.6/dist/bundle.js"></script>
{% endblock %}

{% block content %}
{% include "madga/studio/components/editor_toolbar_init.html" %}
<form method="post" id="page-form" class="madga-editor-grid">
  {% csrf_token %}
  <div>
    <div style="display:flex; gap:8px; margin-bottom:14px; justify-content:flex-end; align-items:center;">
      {% if page_obj and page_obj.slug %}
        <a href="{% url 'madga_studio:page_preview' pk=page_obj.pk %}" target="_blank" class="madga-btn madga-btn--sm">{% studio_icon "eye" size=14 stroke=2 %} Preview</a>
        <a href="/p/{{ page_obj.slug }}/" target="_blank" class="madga-btn madga-btn--ghost madga-btn--sm">{% studio_icon "external" size=12 stroke=2 %} Live</a>
      {% else %}
        <span class="madga-btn madga-btn--sm" style="opacity:.5; cursor:not-allowed;">{% trans "Preview" %}</span>
      {% endif %}
      <button type="submit" class="madga-btn madga-btn--sm madga-btn--primary">{% trans "Guardar" %}</button>
    </div>
    <div class="madga-editor-main">
      <input class="madga-editor-title" type="text" name="title" value="{{ form.title.value|default:'' }}" placeholder="{% trans 'Page title' %}" required>
      {% include "madga/studio/components/editor_toolbar.html" %}
      <div id="editorjs-container" class="madga-editor"></div>
      <input type="hidden" name="body" id="id_body">
      <div class="madga-editor-foot">
        <span data-editor-wordcount>0 {% trans "words" %}</span>
        <span style="color: var(--fg-3);">·</span>
        <span data-editor-readtime>~1 {% trans "min read" %}</span>
      </div>
    </div>
  </div>
  <aside style="display:flex; flex-direction:column; gap:14px;">
    <div class="madga-rail-card">
      <h3>{% trans "Estado" %}</h3>
      <div class="madga-field"><label class="madga-field-label">{% trans "Slug" %}</label><input class="madga-input" type="text" name="slug" value="{{ form.slug.value|default:'' }}" placeholder="auto"></div>
      <div class="madga-field"><label class="madga-field-label">Status</label>
        <select class="madga-select" name="status">{% for v,l in form.status.field.choices %}<option value="{{ v }}" {% if form.status.value == v %}selected{% endif %}>{{ l }}</option>{% endfor %}</select>
      </div>
      <div class="madga-field"><label class="madga-field-label">{% trans "Layout" %}</label>
        <select class="madga-select" name="layout">
          <option value="simple" {% if form.layout.value == 'simple' %}selected{% endif %}>Simple</option>
          <option value="sidebar" {% if form.layout.value == 'sidebar' %}selected{% endif %}>Sidebar</option>
          <option value="docs" {% if form.layout.value == 'docs' %}selected{% endif %}>Docs</option>
        </select>
      </div>
      <div class="madga-field"><label class="madga-field-label">{% trans "Sort order" %}</label><input class="madga-input" type="number" name="sort_order" value="{{ form.sort_order.value|default:0 }}"></div>
    </div>

    <div class="madga-rail-card">
      <h3>{% trans "Imagen destacada" %}</h3>
      {% include "madga/studio/components/featured_image_field.html" with name="featured_image" media=page_obj.featured_image %}
    </div>

    <div class="madga-rail-card">
      <h3>{% trans "SEO" %}</h3>
      <div class="madga-field"><label class="madga-field-label">{% trans "Meta title" %}</label><input class="madga-input" type="text" name="meta_title" value="{{ form.meta_title.value|default:'' }}"></div>
      <div class="madga-field"><label class="madga-field-label">{% trans "Meta description" %}</label><input class="madga-input" type="text" name="meta_description" value="{{ form.meta_description.value|default:'' }}"></div>
      <div class="madga-field" style="margin-top:8px;">
        <label class="madga-field-label" style="margin-bottom:8px;">Imagen para Open Graph</label>
        {% include "madga/studio/components/featured_image_field.html" with name="og_image" media=page_obj.og_image %}
      </div>
    </div>
    {% if page_obj %}
    <form method="post" action="{% url 'madga_studio:page_delete' pk=page_obj.pk %}" class="madga-rail-card">
      {% csrf_token %}
      <h3>{% trans "Peligro" %}</h3>
      <button class="madga-btn madga-btn--sm madga-btn--danger" style="width:100%; justify-content:center;" data-madga-confirm="¿Borrar esta página? Esta acción no se puede deshacer.">{% studio_icon "trash" size=12 stroke=2 %} Eliminar página</button>
    </form>
    {% endif %}
  </aside>
</form>

<script>
(function () {
  const initialData = {{ page_body_json|safe }};
  const csrf = document.querySelector('input[name="csrfmiddlewaretoken"]').value;
  function init() {
    if (typeof EditorJS === 'undefined') return;
    const inlineTools = ['bold', 'italic', 'underline', 'marker', 'hyperlink', 'inlineCode'];
    const editor = new EditorJS({
      holder: 'editorjs-container',
      autofocus: false,
      placeholder: 'Escribe algo, o presiona / para ver los bloques…',
      data: initialData && initialData.blocks ? initialData : {blocks:[]},
      tools: {
        header: { class: Header, inlineToolbar: inlineTools },
        paragraph: { inlineToolbar: inlineTools },
        list: { class: List, inlineToolbar: inlineTools },
        quote: { class: Quote, inlineToolbar: inlineTools },
        code: { class: CodeTool },
        delimiter: { class: Delimiter },
        marker: { class: Marker, shortcut: 'CMD+SHIFT+M' },
        underline: { class: Underline, shortcut: 'CMD+U' },
        inlineCode: { class: InlineCode, shortcut: 'CMD+SHIFT+C' },
        hyperlink: { class: Hyperlink, config: { shortcut: 'CMD+K', target: '_blank', rel: 'nofollow' } },
        image: { class: ImageTool, config: { endpoints: { byFile: '{% url "madga_studio:media_upload" %}' }, additionalRequestHeaders: { 'X-CSRFToken': csrf }, field: 'image' } },
      },
      onChange: () => { if (window.__madgaEditorOnChange) window.__madgaEditorOnChange(); },
    });
    window.__madgaEditor = editor;
    document.getElementById('page-form').addEventListener('submit', async (e) => {
      e.preventDefault();
      const data = await editor.save();
      document.getElementById('id_body').value = JSON.stringify(data);
      e.target.submit();
    });
  }
  if (document.readyState === 'loading') document.addEventListener('DOMContentLoaded', init);
  else init();
})();
</script>
{% endblock %}