{#
 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;
      --stamp: #2b3f46;
      --surface-border: #bbae9c;
      --surface: #f7f1e7;
      --rule: #d2c4b3;
      --rule-strong: #9f8b72;
      --note: #efe4d4;
      --tab: #e4d3be;
      --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;
      --instructions-page-pad: 6mm 5mm 5mm 8mm;
      --instructions-callout-pad: 3mm;
      --instructions-checklist-pad: 3mm;
      --border-base: 0.35mm;
      --border-heavy: 0.45mm;
      --border-rail: 1.6mm;
    }
    * { 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-panel {
      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: 2mm 3.2mm;
      color: var(--ink-body);
      line-height: 4.8mm;
      font-size: 9.2pt;
    }
    .instructions-title {
      font-size: 7pt;
      font-weight: 700;
      color: var(--ink-label);
      text-transform: uppercase;
      letter-spacing: 0.12em;
      font-family: var(--font-title);
      margin-bottom: 0.4mm;
    }
    .instructions-full {
      flex: 1 1 auto;
      min-height: 0;
      display: flex;
    }
    .instructions-page {
      position: relative;
      flex: 1 1 auto;
      min-height: 0;
      display: grid;
      grid-template-rows: auto 1fr auto;
      gap: var(--space-7);
      padding: var(--instructions-page-pad);
      background: var(--surface);
      border: var(--border-rail) double var(--rule-strong);
      box-shadow: none;
    }
    .instructions-page::before {
      content: "INSTRUCTION INSERT";
      position: absolute;
      top: 3mm;
      right: 5mm;
      font-size: 7pt;
      letter-spacing: 0.2em;
      font-family: var(--font-title);
      color: var(--stamp);
      border: var(--border-base) solid var(--stamp);
      padding: 0.3mm 1.4mm;
      background: rgba(43, 63, 70, 0.08);
    }
    .instructions-hero {
      display: grid;
      gap: var(--space-4);
      padding-bottom: 2mm;
      border-bottom: var(--border-heavy) double var(--rule-strong);
    }
    .instructions-hero h2 {
      margin: 0;
      font-size: 15pt;
      font-family: var(--font-title);
      letter-spacing: 0.14em;
      text-transform: uppercase;
    }
    .instructions-hero p {
      margin: 0;
      font-size: 9pt;
      color: var(--ink-muted);
      letter-spacing: 0.06em;
    }
    .instructions-columns {
      display: grid;
      grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
      gap: var(--space-9);
      align-items: start;
      height: 100%;
    }
    .instructions-section {
      display: grid;
      gap: var(--space-6);
    }
    .instructions-section h3 {
      margin: 0;
      font-size: 9pt;
      text-transform: uppercase;
      letter-spacing: 0.18em;
      color: var(--stamp);
      font-family: var(--font-title);
      border: var(--border-base) solid var(--stamp);
      padding: 0.4mm 1.2mm;
      display: inline-block;
      background: rgba(43, 63, 70, 0.08);
    }
    .instructions-list {
      margin: 0;
      padding-left: 4mm;
      display: grid;
      gap: var(--space-3);
      font-size: 9pt;
      color: var(--ink);
      line-height: 1.6;
      list-style-type: square;
    }
    .instructions-steps {
      display: grid;
      gap: var(--space-5);
    }
    .step-row {
      display: grid;
      grid-template-columns: 5mm 1fr;
      gap: var(--space-5);
      align-items: start;
      font-size: 9pt;
      color: var(--ink);
      line-height: 1.5;
    }
    .step-icon {
      width: 4mm;
      height: 4mm;
      border: var(--border-base) solid var(--rule-strong);
      background: var(--tab);
      position: relative;
    }
    .step-icon::after {
      content: "";
      position: absolute;
      inset: 0.6mm;
      border: var(--border-base) solid var(--rule);
    }
    .instructions-callout {
      padding: var(--instructions-callout-pad);
      font-size: 9pt;
      color: var(--ink);
      background: var(--note);
      display: grid;
      gap: var(--space-3);
      outline: var(--border-base) solid var(--rule);
    }
    .instructions-callout strong {
      font-size: 8pt;
      text-transform: uppercase;
      letter-spacing: 0.12em;
      color: var(--stamp);
      font-family: var(--font-title);
    }
    .instructions-checklist {
      display: grid;
      gap: var(--space-4);
      padding: var(--instructions-checklist-pad);
      background: var(--white, #ffffff);
      outline: var(--border-base) solid var(--rule);
    }
    .check-item {
      display: grid;
      grid-template-columns: 4mm 1fr;
      gap: var(--space-5);
      align-items: start;
      font-size: 9pt;
      color: var(--ink);
    }
    .check-box {
      width: 3.4mm;
      height: 3.4mm;
      border: var(--border-base) solid var(--rule-strong);
      background: var(--white, #ffffff);
    }
    .instructions-footnote {
      font-size: 8pt;
      color: var(--ink-muted);
      display: flex;
      justify-content: space-between;
      gap: var(--space-7);
      border-top: var(--border-heavy) double var(--rule-strong);
      padding-top: var(--space-5);
      text-transform: uppercase;
      letter-spacing: 0.12em;
    }
    .instructions-footnote div:last-child {
      text-transform: none;
      letter-spacing: 0.04em;
      font-family: var(--font-mono);
    }
    .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">
    {% if not page.instructions_full_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>
    {% endif %}

    {% if page.instructions_full_page %}
    <div class="instructions-full">
      <div class="instructions-page">
        <div class="instructions-hero">
          <h2>How to Rebuild the Recovery Kit</h2>
          <p>Use this page after scanning the QR pages. Keep everything offline.</p>
        </div>
        <div class="instructions-columns">
          <div class="instructions-section">
            <h3>Scan + Assemble</h3>
            <div class="instructions-steps">
              <div class="step-row">
                <div class="step-icon"></div>
                <div>Scan every QR code left to right, top to bottom.</div>
              </div>
              <div class="step-row">
                <div class="step-icon"></div>
                <div>Save each decoded chunk in order. Do not insert spaces or blank lines.</div>
              </div>
              <div class="step-row">
                <div class="step-icon"></div>
                <div>Concatenate the chunks into one continuous file.</div>
              </div>
              <div class="step-row">
                <div class="step-icon"></div>
                <div>Name the file exactly: recovery_kit.bundle.html</div>
              </div>
            </div>
            <h3>Open the Kit</h3>
            <div class="instructions-steps">
              <div class="step-row">
                <div class="step-icon"></div>
                <div>Open recovery_kit.bundle.html in a browser while offline.</div>
              </div>
              <div class="step-row">
                <div class="step-icon"></div>
                <div>If the file is large, wait for it to finish loading.</div>
              </div>
              <div class="step-row">
                <div class="step-icon"></div>
                <div>Follow the on-screen prompts to recover your payload.</div>
              </div>
            </div>
            <h3>Troubleshooting</h3>
            <ul class="instructions-list">
              <li>If the kit does not load, re-check chunk order and re-save the file.</li>
              <li>Try another browser if rendering stalls.</li>
              <li>Confirm the file size matches the sum of all QR chunks.</li>
            </ul>
          </div>
          <div class="instructions-section">
            <div class="instructions-callout">
              <strong>Verify</strong>
              <div>Confirm the kit loads and shows the Recovery Kit home screen.</div>
              <div>If it fails to open, re-check the order and re-save the file.</div>
            </div>
            <div class="instructions-callout">
              <strong>Storage</strong>
              <div>Keep the QR pages and the bundle file in separate locations.</div>
              <div>Store the bundle on a write-protected drive if possible.</div>
            </div>
            <div class="instructions-callout">
              <strong>Security</strong>
              <div>Work offline and on a trusted machine.</div>
              <div>Delete temporary files after successful recovery.</div>
            </div>
            <div class="instructions-checklist">
              <div class="check-item">
                <span class="check-box"></span>
                <div>All QR pages scanned in order.</div>
              </div>
              <div class="check-item">
                <span class="check-box"></span>
                <div>Bundle file saved with the correct name.</div>
              </div>
              <div class="check-item">
                <span class="check-box"></span>
                <div>Kit opens offline without errors.</div>
              </div>
              <div class="check-item">
                <span class="check-box"></span>
                <div>Recovery completed and data verified.</div>
              </div>
            </div>
          </div>
        </div>
        <div class="instructions-footnote">
          <div>Recovery Kit: offline HTML bundle</div>
          <div>Document ID: {{ doc_id }}</div>
        </div>
      </div>
    </div>
    {% else %}
    <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>
    {% endif %}
  </section>
{% endfor %}
</body>
</html>
