{% extends 'crochet/base.html' %}
{% load static i18n %}

{% block title %}Crochet{% endblock %}

{% block body_attrs %} hx-headers='{"X-CSRFToken": "{{ csrf_token }}"}'{% endblock %}

{% block extra_css %}
  <!-- Leído por storage.js para la cabecera X-CSRFToken al guardar por fetch. -->
  <meta name="csrf-token" content="{{ csrf_token }}">
  {% include 'crochet/_platform_assets.html' %}

  <script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3/dist/cdn.min.js"></script>
  <style id="page-size-style"></style>
{% endblock %}

{% block content %}
  <main>

    {% trans '¿Seguro que quieres eliminar este patrón? No podrás deshacerlo.' as delete_confirm_message %}
    <header class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-2 p-4 no-print">
      <!-- Idioma del contenido del patrón (qué versión de título/texto se
           edita), no el de la interfaz: va aparte del resto de acciones,
           no dentro de este grupo. -->
      <section>
        <h4>{% trans 'Idioma del patrón' %}</h4>

        <select id="language-select" class="select select-sm select-bordered">
          <option value="es" {% if lang == 'es' %}selected{% endif %}>Español</option>
          <option value="en" {% if lang == 'en' %}selected{% endif %}>English</option>
        </select>
      </section>


      <div class="flex flex-wrap items-center gap-2">
        <button id="save-pattern" type="button" class="btn btn-sm btn-outline"
          data-save-url="{% url 'crochet:pattern_save' pattern.uuid %}"
          data-error-message="{% trans 'No se ha podido guardar. Inténtalo de nuevo.' %}">{% trans 'Guardar' %}</button>

        <a href="{% url 'crochet:pattern_detail' pattern.uuid %}" target="_blank" rel="noopener"
          class="btn btn-sm btn-outline">{% trans 'Ver patrón' %}</a>
        <button id="export-pdf" type="button" class="btn btn-sm btn-primary">{% trans 'Exportar a PDF' %}</button>

        <!-- Eliminar va detrás de un menú aparte, no como un botón más al
             lado de guardar/exportar: al ser destructiva y poco frecuente,
             mezclarla con el resto aumenta el riesgo de pulsarla sin
             querer, sobre todo en móvil. -->
        <div class="dropdown dropdown-end">
          <button type="button" tabindex="0" class="btn btn-sm btn-outline btn-square" aria-label="{% trans 'Más opciones' %}">⋮</button>
          <ul tabindex="0" class="dropdown-content menu menu-sm bg-base-100 border border-base-300 rounded-box z-10 w-40 p-2 shadow">
            <li>
              <form method="post" action="{% url 'crochet:pattern_delete' pattern.uuid %}"
                onsubmit="return confirm('{{ delete_confirm_message }}')">
                {% csrf_token %}
                <button type="submit" class="w-full text-left text-error">{% trans 'Eliminar' %}</button>
              </form>
            </li>
          </ul>
        </div>
      </div>
    </header>

    <div id="save-toast" class="toast toast-top toast-end no-print hidden">
      <div class="alert alert-success">
        <span data-message="{% trans 'Guardado' %}">{% trans 'Guardado' %}</span>
      </div>
    </div>

    <div class="p-4 pt-0">

      <!-- Título e imagen de portada, fuera de "Personalización de página"
           (aparte, no-print igual que el resto de controles del editor):
           son la identidad del patrón, no un ajuste de estilo, así que se
           quedan siempre a la vista en vez de detrás de un <details>
           colapsado. -->
      <div class="no-print">
        <label class="flex flex-col gap-1 flex-1 mb-4">
          <span class="text-sm">{% trans 'Título del patrón' %}</span>
          <input id="page-title-input" type="text" class="input input-bordered" placeholder="{% trans 'Título del patrón...' %}">
        </label>
        <div class="flex flex-col gap-1 mb-4">
          <span class="text-sm">{% trans 'Imagen de portada' %}</span>
          <!-- <label for="cover-image-input">, no un botón de archivo
               nativo: al pulsar sobre el propio recuadro (miniatura o
               marcador de posición) se abre el selector de archivos igual
               que con el input nativo, sin JS propio para eso. -->
          <label for="cover-image-input"
            class="group relative flex w-full max-w-md h-56 items-center justify-center overflow-hidden rounded-box border-2 border-dashed border-base-300 bg-base-200/40 cursor-pointer transition-colors hover:border-primary">
            <img id="cover-image-preview" alt=""
              src="{% if pattern.cover_image_thumbnail %}{{ pattern.cover_image_thumbnail.url }}{% endif %}"
              class="absolute inset-0 h-full w-full object-cover{% if not pattern.cover_image_thumbnail %} hidden{% endif %}">
            <span id="cover-image-placeholder"
              class="flex flex-col items-center gap-2 px-2 text-center text-sm text-base-content/50{% if pattern.cover_image_thumbnail %} hidden{% endif %}">
              <span class="text-5xl">🖼️</span>
              {% trans 'Añadir imagen' %}
            </span>
            <span class="absolute inset-0 flex items-center justify-center bg-black/50 text-sm font-medium text-white opacity-0 transition-opacity group-hover:opacity-100">
              {% trans 'Cambiar' %}
            </span>
          </label>
          <input id="cover-image-input" type="file" accept="image/*" class="sr-only"
            data-upload-url="{% url 'crochet:pattern_cover_upload' pattern.uuid %}"
            data-error-message="{% trans 'No se ha podido subir la imagen de portada. Inténtalo de nuevo.' %}">
          <!-- Tamaño "large" (no la miniatura de arriba, pensado solo para
               ese control): lo lee render.js para pintarla en "Vista
               previa", debajo del título, igual que hace
               render_pattern_html() en la vista de solo lectura/PDF. -->
          <input type="hidden" id="cover-image-large-url"
            value="{% if pattern.cover_image_large %}{{ pattern.cover_image_large.url }}{% endif %}">
        </div>
      </div>

      <details class="border border-base-300 rounded-box p-4 mb-4 no-print">
        <summary class="text-lg font-semibold cursor-pointer select-none">{% trans 'Personalización de página' %}</summary>
        <div class="flex flex-col gap-4 mt-4">
          <label class="flex flex-col gap-1">
            <span class="text-sm">{% trans 'Autor' %}</span>
            <input id="page-author-input" type="text" class="input input-bordered" placeholder="{% trans 'Autor...' %}">
          </label>
          <div class="flex flex-wrap items-end gap-4">
            <label class="flex flex-col gap-1">
              <span class="text-sm">{% trans 'Color del texto' %}</span>
              <input id="page-text-color" type="color" value="#000000">
            </label>
            <label class="flex flex-col gap-1">
              <span class="text-sm">{% trans 'Color de acento (títulos)' %}</span>
              <input id="page-accent-color" type="color" value="#1d4ed8">
            </label>
            <label class="flex flex-col gap-1">
              <span class="text-sm">{% trans 'Color de fondo' %}</span>
              <input id="page-bg-color" type="color" value="#ffffff">
            </label>
            <label class="flex flex-col gap-1">
              <span class="text-sm">{% trans 'Tipografía' %}</span>
              <select id="page-font-select" class="select select-bordered select-sm">
                <option value="sans-serif" selected>Sans-serif</option>
                <option value="serif">Serif</option>
                <option value="Georgia, serif">Georgia</option>
                <option value="'Trebuchet MS', sans-serif">Trebuchet MS</option>
                <option value="'Courier New', monospace">{% trans 'Monoespaciada' %}</option>
              </select>
            </label>
            <label class="flex flex-col gap-1">
              <span class="text-sm">{% trans 'Tamaño de letra' %}</span>
              <select id="page-font-size-select" class="select select-bordered select-sm">
                <option value="0.875rem">{% trans 'Pequeño' %}</option>
                <option value="1rem" selected>{% trans 'Normal' %}</option>
                <option value="1.25rem">{% trans 'Grande' %}</option>
              </select>
            </label>
            <label class="flex flex-col gap-1">
              <span class="text-sm">{% trans 'Alineación del texto' %}</span>
              <select id="page-align-select" class="select select-bordered select-sm">
                <option value="left" selected>{% trans 'Izquierda' %}</option>
                <option value="center">{% trans 'Centrado' %}</option>
                <option value="justify">{% trans 'Justificado' %}</option>
              </select>
            </label>
            <label class="flex flex-col gap-1">
              <span class="text-sm">{% trans 'Tamaño de página' %}</span>
              <select id="page-size-select" class="select select-bordered select-sm">
                <option value="A4" selected>A4</option>
                <option value="A3">A3</option>
                <option value="A5">A5</option>
                <option value="letter">{% trans 'Carta (Letter)' %}</option>
                <option value="legal">Legal</option>
              </select>
            </label>
            <label class="flex flex-col gap-1">
              <span class="text-sm">{% trans 'Orientación' %}</span>
              <select id="page-orientation-select" class="select select-bordered select-sm">
                <option value="portrait" selected>{% trans 'Vertical' %}</option>
                <option value="landscape">{% trans 'Horizontal' %}</option>
              </select>
            </label>
          </div>
        </div>
      </details>

      <div class="tabs tabs-boxed w-fit mb-4 lg:hidden no-print">
        <button id="tab-sections" type="button" class="tab tab-active">{% trans 'Secciones' %}</button>
        <button id="tab-output" type="button" class="tab">{% trans 'Vista previa' %}</button>
      </div>

      <div class="flex flex-col lg:flex-row gap-4">

        <section id="panel-top" class="w-full lg:w-1/2 border border-base-300 rounded-box p-4 no-print">
          <div class="flex items-center justify-between mb-2">
            <h2 class="text-lg font-semibold">{% trans 'Secciones' %}</h2>
            <button id="toggle-collapse-all" type="button" class="btn btn-xs btn-outline"
              data-collapse-all-label="{% trans 'Colapsar todo' %}" data-expand-all-label="{% trans 'Expandir todo' %}">{% trans 'Colapsar todo' %}</button>
          </div>

          <div class="dropdown mb-4">
            <button id="add-section-toggle" type="button" class="btn btn-sm" tabindex="0"
              data-label="{% trans 'Añadir sección' %}">+ {% trans 'Añadir sección' %}</button>
            <ul tabindex="0" class="dropdown-content menu menu-sm bg-base-100 border border-base-300 rounded-box z-10 w-52 p-2 shadow">
              <li><button id="add-title-section" type="button"
                data-type-label="{% trans 'Título' %}" data-placeholder="{% trans 'Título...' %}">{% trans 'Título' %}</button></li>
              <li><button id="add-subtitle-section" type="button"
                data-type-label="{% trans 'Subtítulo' %}" data-placeholder="{% trans 'Subtítulo...' %}">{% trans 'Subtítulo' %}</button></li>
              <li><button id="add-text-section" type="button"
                data-type-label="{% trans 'Texto' %}" data-placeholder="{% trans 'Escribe aquí...' %}">{% trans 'Texto' %}</button></li>
              <li><button id="add-note-section" type="button"
                data-type-label="{% trans 'Nota' %}" data-placeholder="{% trans 'Escribe una nota o consejo...' %}"
                data-text-color-label="{% trans 'Color del texto' %}" data-bg-color-label="{% trans 'Color de fondo' %}">{% trans 'Nota' %}</button></li>
              <li><button id="add-materials-section" type="button"
                data-type-label="{% trans 'Materiales' %}" data-placeholder="{% trans 'Añadir material...' %}" data-add-line-label="+ {% trans 'Añadir línea' %}">{% trans 'Materiales' %}</button></li>
              <li><button id="add-image-section" type="button"
                data-type-label="{% trans 'Imagen' %}"
                data-upload-url="{% url 'crochet:pattern_image_upload' pattern.uuid %}"
                data-upload-error-message="{% trans 'No se ha podido subir la imagen. Inténtalo de nuevo.' %}">{% trans 'Imagen' %}</button></li>
              <li><button id="add-dnd-section" type="button"
                data-type-label="{% trans 'Patrón' %}" data-elements-label="{% trans 'Elementos' %}">{% trans 'Patrón' %}</button></li>
              <li><button id="add-group-section" type="button"
                data-type-label="{% trans 'Grupo' %}">{% trans 'Grupo' %}</button></li>
            </ul>
          </div>
          <div id="panel-top-sections" class="flex flex-col gap-4"
            data-drag-title="{% trans 'Arrastrar para reordenar' %}"
            data-collapse-title="{% trans 'Colapsar / expandir' %}"
            data-duplicate-title="{% trans 'Duplicar sección' %}"
            data-remove-title="{% trans 'Eliminar sección' %}"
            data-remove-confirm="{% trans '¿Seguro que quieres eliminar este grupo? Se eliminarán también todas las secciones que contiene.' %}"></div>
        </section>

        <section id="panel-output" class="w-full lg:w-1/2 border border-base-300 rounded-box p-4 panel-hidden-mobile">
          <div id="panel-output-text"
            data-empty-message="{% trans 'Añade una sección para ver aquí el resultado.' %}"></div>
        </section>

      </div>

    </div>

    {{ stitch_types|json_script:"stitch-types" }}

    {{ pattern_data|json_script:"pattern-data" }}
  </main>
{% endblock %}

{% block extra_js %}
  <script type="module" src="{% static 'js/main.js' %}"></script>
{% endblock %}