{#
 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/>.
#}
<!doctype html>
<html class="light" lang="en">
<head>
  <meta charset="utf-8">
  <style>
    {% include 'partials/forge_tailwind.j2' %}
    {% include 'partials/material_symbols_local.j2' %}

    @page {
      size: {{ page_size_css }};
      margin: 0;
    }

    @media print {
      body {
        background-color: white !important;
        color: black !important;
      }
      .print-sheet {
        box-shadow: none !important;
        margin: 0 !important;
      }
    }

    .print-sheet {
      width: {{ page_width_mm }}mm;
      height: {{ page_height_mm }}mm;
      min-height: {{ page_height_mm }}mm;
      margin: 0 auto;
      page-break-after: always;
      background: white;
      overflow: hidden;
      break-inside: avoid-page;
      page-break-inside: avoid;
    }

    .print-sheet:last-child {
      page-break-after: auto;
    }

    .qr-grid-cards {
      grid-template-columns: repeat(var(--forge-cols), minmax(0, 1fr));
    }
  </style>
</head>
<body class="bg-background-light font-display antialiased min-h-screen flex flex-col">
{% for page in pages %}
  <section class="print-sheet flex flex-col p-[15mm] border border-gray-100">
    {% if page.instructions_full_page %}
    <div class="flex-1 border-2 border-slate-200 bg-slate-50/50 p-6 flex flex-col gap-5">
      <div class="border-b-2 border-slate-300 pb-3">
        <h2 class="font-serif text-2xl font-bold uppercase tracking-tight text-slate-900">
          How to Rebuild the Recovery Kit
        </h2>
        <p class="mt-1 text-sm text-slate-700">
          Use this page after scanning the QR pages. Keep everything offline.
        </p>
      </div>

      <div class="grid flex-1 grid-cols-2 gap-6">
        <div class="space-y-4">
          <div>
            <h3 class="inline-flex items-center gap-2 border border-slate-900 px-2 py-1 text-[10px] font-bold uppercase tracking-[0.12em] text-slate-900">
              <span class="material-symbols-outlined text-sm">hub</span>
              Scan + Assemble
            </h3>
            <div class="mt-3 space-y-2 text-sm text-slate-800">
              <div class="flex items-start gap-2"><span class="material-symbols-outlined text-sm text-slate-500">adjust</span><span>Scan every QR code left to right, top to bottom.</span></div>
              <div class="flex items-start gap-2"><span class="material-symbols-outlined text-sm text-slate-500">adjust</span><span>Save each decoded chunk in order. Do not insert spaces or blank lines.</span></div>
              <div class="flex items-start gap-2"><span class="material-symbols-outlined text-sm text-slate-500">adjust</span><span>Concatenate the chunks into one continuous file.</span></div>
              <div class="flex items-start gap-2"><span class="material-symbols-outlined text-sm text-slate-500">adjust</span><span>Name the file exactly: <span class="font-mono">recovery_kit.bundle.html</span></span></div>
            </div>
          </div>

          <div>
            <h3 class="inline-flex items-center gap-2 border border-slate-900 px-2 py-1 text-[10px] font-bold uppercase tracking-[0.12em] text-slate-900">
              <span class="material-symbols-outlined text-sm">language</span>
              Open the Kit
            </h3>
            <div class="mt-3 space-y-2 text-sm text-slate-800">
              <div class="flex items-start gap-2"><span class="material-symbols-outlined text-sm text-slate-500">adjust</span><span>Open <span class="font-mono">recovery_kit.bundle.html</span> in a browser while offline.</span></div>
              <div class="flex items-start gap-2"><span class="material-symbols-outlined text-sm text-slate-500">adjust</span><span>If the file is large, wait for it to finish loading.</span></div>
              <div class="flex items-start gap-2"><span class="material-symbols-outlined text-sm text-slate-500">adjust</span><span>Follow the on-screen prompts to recover your payload.</span></div>
            </div>
          </div>

          <div>
            <h3 class="inline-flex items-center gap-2 border border-slate-900 px-2 py-1 text-[10px] font-bold uppercase tracking-[0.12em] text-slate-900">
              <span class="material-symbols-outlined text-sm">build</span>
              Troubleshooting
            </h3>
            <ul class="mt-3 list-disc list-inside space-y-1 text-sm text-slate-800">
              <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>

        <div class="space-y-3">
          <div class="border border-slate-300 bg-white p-3">
            <p class="text-[10px] font-bold uppercase tracking-[0.12em] text-slate-900">Verify</p>
            <p class="mt-1 text-sm text-slate-800">Confirm the kit loads and shows the Recovery Kit home screen.</p>
            <p class="mt-1 text-sm text-slate-700">If it fails to open, re-check the order and re-save the file.</p>
          </div>
          <div class="border border-slate-300 bg-white p-3">
            <p class="text-[10px] font-bold uppercase tracking-[0.12em] text-slate-900">Storage</p>
            <p class="mt-1 text-sm text-slate-800">Keep the QR pages and the bundle file in separate locations.</p>
            <p class="mt-1 text-sm text-slate-700">Store the bundle on a write-protected drive if possible.</p>
          </div>
          <div class="border border-slate-300 bg-white p-3">
            <p class="text-[10px] font-bold uppercase tracking-[0.12em] text-slate-900">Security</p>
            <p class="mt-1 text-sm text-slate-800">Work offline and on a trusted machine.</p>
            <p class="mt-1 text-sm text-slate-700">Delete temporary files after successful recovery.</p>
          </div>

          <div class="border border-slate-300 bg-white p-3">
            <h3 class="inline-flex items-center gap-1 text-[10px] font-bold uppercase tracking-[0.12em] text-slate-900 mb-2">
              <span class="material-symbols-outlined text-sm">verified_user</span>
              {{ copy.checklist_label }}
            </h3>
            <div class="space-y-2">
              {% for line in instructions.lines %}
              <div class="flex items-start gap-2 text-sm text-slate-800">
                <span class="material-symbols-outlined text-base text-slate-500">check_box_outline_blank</span>
                <span>{{ line }}</span>
              </div>
              {% endfor %}
              {% if instructions.scan_hint %}
              <div class="flex items-start gap-2 text-sm text-slate-800">
                <span class="material-symbols-outlined text-base text-slate-500">check_box_outline_blank</span>
                <span>{{ instructions.scan_hint }}</span>
              </div>
              {% endif %}
              <div class="flex items-start gap-2 text-sm text-slate-800">
                <span class="material-symbols-outlined text-base text-slate-500">check_box_outline_blank</span>
                <span>Recovery completed and data verified.</span>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div class="border-t border-slate-300 pt-3 flex items-center justify-between text-[10px] uppercase tracking-[0.12em] text-slate-600">
        <span>Recovery Kit: offline HTML bundle</span>
        <span>Document ID: <span class="font-mono normal-case tracking-normal text-slate-700">{{ doc_id }}</span></span>
      </div>
    </div>
    {% else %}
    {% set forge_header_title = copy.title %}
    {% set forge_header_subtitle = copy.subtitle %}
    {% set forge_header_kicker = 'The Forge // Secure Offline Storage' %}
    {% set forge_header_classification = 'Offline Processing Required' %}
    {% set forge_header_guidance = copy.header_guidance %}
    {% set forge_header_ref = doc_id %}
    {% set forge_header_icon = 'token' %}
    {% include 'partials/forge_shell_header.j2' %}

    <div class="border-l-4 border-primary bg-blue-50 p-4 mb-8">
      <div class="flex items-start gap-3">
        <span class="material-symbols-outlined text-primary text-xl">warning</span>
        <p class="text-sm text-gray-700 leading-relaxed">
          {{ copy.continuation_hint }}
          <span class="inline-flex items-center gap-1 ml-1">
            <span class="material-symbols-outlined text-sm">qr_code_2</span>
            Keep scans offline.
          </span>
        </p>
      </div>
    </div>

    {% if page.qr_items %}
    <div
      class="grid flex-1 gap-4 qr-grid-cards"
      style="--forge-cols: {{ page.qr_grid.cols if page.qr_grid else 3 }};"
    >
      {% for slot in page.qr_items %}
      <div class="flex flex-col rounded border border-slate-300 p-3">
        <div class="mb-2 flex justify-between border-b border-slate-100 pb-1">
          <span class="font-mono text-xs font-bold text-slate-900">KIT {{ '%02d' % slot.index }}</span>
          <span class="font-mono text-[10px] text-slate-400">SEQ {{ '%02d' % slot.index }}</span>
        </div>
        <div class="aspect-square w-full rounded-sm bg-slate-900 p-1">
          <img
            class="h-full w-full bg-white"
            src="{{ slot.data_uri }}"
            alt="Recovery kit QR chunk {{ slot.index }}"
            style="image-rendering: pixelated;"
          >
        </div>
      </div>
      {% endfor %}
    </div>
    {% endif %}
    {% endif %}

    {% if not page.instructions_full_page %}
    <section class="mt-auto pt-8 border-t border-gray-200 flex justify-between items-end mb-4">
      <div class="text-xs text-gray-400">
        <p>{{ forge_copy.protocol_label }} {{ forge_copy.version }}</p>
        <p>Printed from secure session ID: <span class="font-mono text-gray-600">{{ doc_id }}</span></p>
      </div>
      <div class="flex flex-col items-end">
        <div class="text-right mb-2">
          <p class="text-[10px] uppercase tracking-widest text-gray-400 font-bold mb-1">Custodian Signature</p>
          <div class="w-48 h-10 border-b border-gray-300 border-dashed"></div>
        </div>
        <div class="text-[10px] font-mono inline-flex items-center gap-1 text-gray-500">
          <span class="material-symbols-outlined text-sm">lock</span>
          Verification Complete
        </div>
      </div>
    </section>
    {% endif %}

  </section>
{% endfor %}
</body>
</html>
