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

{% block title %}{{ page_settings.title|default:"Crochet" }}{% endblock %}

{% block extra_css %}
  <!-- El navbar real (ver base.html) usa clases de daisyUI, así que aquí
       hace falta cargarlo igual que en el resto del sitio (ver
       _platform_assets.html), aunque esta vista se genere también como
       HTML de entrada para el PDF: al ser no-print, no se imprime, pero
       WeasyPrint sí llega a pedir por red su CSS (daisyUI, Google Fonts)
       para construirlo, aunque el resultado no se vea nunca en el PDF. -->
  {% include 'crochet/_platform_assets.html' %}
  <link rel="stylesheet" href="{% static 'css/pattern-detail.css' %}">
  <style>
    :root {
      --print-page-bg-color: {{ page_settings.bgColor }};
      --accent-color: {{ page_settings.accentColor }};
    }
    @page { size: {{ page_settings.pageSize }} {{ page_settings.orientation }}; }
  </style>
{% endblock %}

{% block cookie_banner %}{% endblock %}

{% block content %}
  <main class="p-4">
    <div class="flex justify-end gap-2 mb-4 no-print">
      <a href="{% url 'crochet:pattern_pdf' pattern.uuid %}" class="detail-btn">{% trans 'Descargar PDF' %}</a>
    </div>

    <div id="panel-output" class="border border-gray-300 rounded-2xl p-4 max-w-3xl mx-auto"
      style="color: {{ page_settings.textColor }}; background-color: {{ page_settings.bgColor }}; font-family: {{ page_settings.font }}; text-align: {{ page_settings.align }};">
      <div id="panel-output-text" style="font-size: {{ page_settings.fontSize }};">
        {{ rendered_pattern }}
      </div>
    </div>
  </main>
{% endblock %}