{#
 Copyright (C) 2026 Alex Stoyanov

 This program is free software: you can redistribute it and/or modify
 it under the terms of the GNU General Public License as published by
 the Free Software Foundation; either version 3 of the License, or
 (at your option) any later version.

 This program is distributed in the hope that it will be useful,
 but WITHOUT ANY WARRANTY; without even the implied warranty of
 MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
 GNU General Public License for more details.

 You should have received a copy of the GNU General Public License along with this program.
 If not, see <https://www.gnu.org/licenses/>.
#}
{% from 'css_variables.j2' import common_variables %}
{% from 'html_components.j2' import instructions_lines %}

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <style>
    @page {
      size: {{ page_size_css }};
      margin: 0;
    }
    :root {
{{ common_variables() }}
      --ink: #0b1a26;
      --ink-soft: #516272;
      --ink-label: #3b4e5c;
      --ink-muted: #2f4352;
      --ink-body: #1a2733;
      --accent: #2b3f46;
      --surface-border: #bbae9c;
      --paper-top: #fbf6ef;
      --font-title: "Copperplate Gothic Bold", "Palatino Linotype", serif;
      --font-body: "Lucida Sans", "Trebuchet MS", sans-serif;
      --font-mono: "SFMono-Regular", "Menlo", "Consolas", "Courier New", monospace;
    }
    * { box-sizing: border-box; }
    body {
      margin: 0;
      font-family: var(--font-body);
      color: var(--ink);
      background: var(--paper-top);
      print-color-adjust: exact;
      -webkit-print-color-adjust: exact;
    }
    .page {
      width: {{ page_width_mm }}mm;
      height: {{ page_height_mm }}mm;
      page-break-after: always;
      padding: {{ margin_mm }}mm;
      display: flex;
      flex-direction: column;
      gap: 2.4mm;
      overflow: hidden;
      background: var(--paper-top);
    }
    .page:last-child { page-break-after: auto; }
    .header {
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      gap: 8mm;
    }
    .title {
      font-size: 18pt;
      font-weight: 700;
      font-family: var(--font-title);
      letter-spacing: 0.08em;
      text-transform: uppercase;
      line-height: 1.1;
    }
    .subtitle {
      font-size: 9pt;
      color: var(--ink-muted);
      letter-spacing: 0.08em;
      text-transform: uppercase;
      line-height: 1.2;
    }
    .meta {
      display: flex;
      flex-direction: column;
      gap: 1.2mm;
      align-items: flex-end;
      min-width: 72mm;
      font-size: 7pt;
      text-align: right;
    }
    .meta-item {
      width: 100%;
      border: 0.35mm solid var(--surface-border);
      background: #ffffff;
      padding: 0.6mm 2mm;
      border-radius: 0;
      color: var(--ink-soft);
      text-transform: uppercase;
      letter-spacing: 0.08em;
    }
    .meta-item.primary {
      color: var(--accent);
      border-color: var(--accent);
      font-weight: 700;
    }
    .meta-item.mono {
      color: var(--ink);
      text-transform: none;
      font-family: var(--font-mono);
      letter-spacing: 0.04em;
    }
    .divider {
      height: 0.6mm;
      width: 100%;
      background: repeating-linear-gradient(
        90deg,
        var(--accent) 0,
        var(--accent) 8mm,
        transparent 8mm,
        transparent 11mm
      );
      opacity: 0.9;
      flex: 0 0 auto;
    }
    .instructions {
      display: grid;
      grid-template-columns: 28mm auto;
      column-gap: 4mm;
      border-left: 1.2mm solid var(--accent);
      border-top: 0.35mm solid var(--surface-border);
      border-bottom: 0.35mm solid var(--surface-border);
      background: rgba(47, 58, 51, 0.035);
      padding: 1.6mm 2.5mm 1.6mm 3mm;
      font-size: 9pt;
      line-height: 4.5mm;
      color: var(--ink-body);
      flex: 0 0 auto;
    }
    .instructions-label {
      font-size: 7pt;
      font-weight: 700;
      color: var(--ink-label);
      text-transform: uppercase;
      letter-spacing: 0.12em;
      font-family: var(--font-title);
    }
    .content {
      flex: 1 1 auto;
      min-height: 0;
      display: flex;
      flex-direction: column;
      gap: 2mm;
    }
    .qr-grid-items {
      display: grid;
      grid-template-columns: repeat(var(--qr-cols), var(--qr-size));
      grid-auto-rows: var(--qr-size);
      column-gap: var(--qr-gap-x);
      row-gap: var(--qr-gap-y);
      align-content: start;
    }
    .qr-cell {
      width: var(--qr-size);
      height: var(--qr-size);
    }
    .qr-card {
      width: 100%;
      height: 100%;
      border: 0.35mm solid var(--surface-border);
      background: #ffffff;
      padding: 0.6mm;
    }
    .qr {
      width: 100%;
      height: 100%;
      display: block;
      image-rendering: pixelated;
    }
  </style>
</head>
<body>
{% for page in pages %}
  <section class="page">
    <header class="header">
      <div>
        <div class="title">{{ doc.title }}</div>
        <div class="subtitle">{{ doc.subtitle }}</div>
      </div>
      <div class="meta">
        <div class="meta-item primary">{{ page.page_label }}</div>
        <div class="meta-item mono">Document ID: {{ doc_id }}</div>
        <div class="meta-item mono">Created (UTC): {{ created_timestamp_utc }}</div>
      </div>
    </header>

    <div class="divider"></div>

    {% if page.show_instructions %}
    <div class="instructions">
      <div class="instructions-label">{{ instructions.label }}</div>
      <div>{{ instructions_lines(instructions.lines, scan_hint_text=instructions.scan_hint) }}</div>
    </div>
    {% endif %}

    <div class="content">
      {% if page.qr_items and page.qr_grid %}
      <div
        class="qr-grid-items"
        style="--qr-size: {{ page.qr_grid.size_mm }}mm; --qr-gap-x: {{ page.qr_grid.gap_x_mm }}mm; --qr-gap-y: {{ page.qr_grid.gap_y_mm }}mm; --qr-cols: {{ page.qr_grid.cols }};"
      >
        {% for slot in page.qr_items %}
        <div class="qr-cell">
          <div class="qr-card">
            <img class="qr" src="{{ slot.data_uri }}" alt="QR code {{ slot.index }}">
          </div>
        </div>
        {% endfor %}
      </div>
      {% endif %}
    </div>
  </section>
{% endfor %}
</body>
</html>
