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

{% 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' %}
  {% htmx_script %}

  <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-wrap items-center justify-end gap-2 p-4 no-print">
      <div class="flex gap-2 items-center">

        <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>
        <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>
        <form method="post" action="{% url 'crochet:pattern_delete' pattern.uuid %}"
          onsubmit="return confirm('{{ delete_confirm_message }}')">
          {% csrf_token %}
          <button type="submit" class="btn btn-sm btn-outline btn-error">{% trans 'Eliminar patrón' %}</button>
        </form>
      </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">

      <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">
          <div class="flex flex-col sm:flex-row gap-4">
            <label class="flex flex-col gap-1 flex-1">
              <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>
            <label class="flex flex-col gap-1 flex-1">
              <span class="text-sm">{% trans 'Autor' %}</span>
              <input id="page-author-input" type="text" class="input input-bordered" placeholder="{% trans 'Autor...' %}">
            </label>
          </div>
          <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 md: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 md:flex-row gap-4">

        <section id="panel-top" class="w-full md: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 md:w-1/2 border border-base-300 rounded-box p-4 panel-hidden-mobile">
          <h2 id="preview-title" class="text-lg font-semibold mb-2 no-print">{% trans 'Vista previa' %}</h2>
          <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 %}