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

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

{% block extra_css %}
  <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 %}

<!-- Sin daisyUI aquí (ver arriba), así que el navbar de base.html no tiene
     ningún estilo que aplicarle: se deja vacío a propósito. -->
{% block navbar %}{% 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>
      {% if lang != 'es' %}
        {% language 'es' %}
          <a href="{% url 'crochet:pattern_detail' pattern.uuid %}" class="detail-btn">Español</a>
        {% endlanguage %}
      {% endif %}
      {% if lang != 'en' %}
        {% language 'en' %}
          <a href="{% url 'crochet:pattern_detail' pattern.uuid %}" class="detail-btn">English</a>
        {% endlanguage %}
      {% endif %}
    </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 %}