{% extends "pages/base.html" %}
{% load i18n %}
{% block title %}{{ manual.title }}{% endblock %}
{% block content %}
  {% with orientation=manual.pdf_orientation|default:'landscape' %}
    <style>
      .manual-content {
        overflow-wrap: anywhere;
        word-break: break-word;
        hyphens: auto;
      }
      .manual-content pre,
      .manual-content code {
        white-space: pre-wrap;
        word-break: break-word;
      }
      .manual-content img,
      .manual-content table {
        max-width: 100%;
      }
      @media print {
        @page {
          size: {{ orientation }};
        }
      }
    </style>
  {% endwith %}
  <div class="d-flex flex-column flex-md-row align-items-md-center justify-content-between gap-3 mb-4">
    <div>
      <h1 class="mb-2">{{ manual.title }}</h1>
      <p class="text-muted mb-0">
        <strong>{% trans "Languages" %}:</strong>
        {{ manual.languages|default:_("Not specified") }}
      </p>
    </div>
    <a class="btn btn-primary align-self-start" href="{% url 'pages:manual-pdf' manual.slug %}" download>
      {% trans "Download PDF" %}
    </a>
  </div>
  <div class="manual-content prose">{{ manual.content_html|safe }}</div>
{% endblock %}