{#
 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">
  {% include 'partials/sentinel_tailwind_setup.j2' %}
  <style>
    {% include 'partials/material_symbols_local.j2' %}
    @page {
      size: {{ page_size_css }};
      margin: 0;
    }

    @media print {
      body {
        background: white !important;
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
      }

      .print-sheet {
        box-shadow: none !important;
        margin: 0 !important;
      }
    }

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

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

    .kit-grid {
      display: grid;
      grid-template-columns: repeat(var(--qr-cols), minmax(0, 1fr));
    }
  </style>
</head>
<body class="bg-background-light font-display min-h-screen text-charcoal">
{% for page in pages %}
  <section class="print-sheet border border-border-light flex flex-col">
    {% set sentinel_top_strip_text = 'Recovery Kit Media // Offline Processing Only // Do Not Scan Online' %}
    {% set sentinel_header_title = copy.title %}
    {% set sentinel_header_classification = 'Offline Processing Required' %}
    {% set sentinel_header_subtitle = copy.subtitle %}
    {% set sentinel_footer_guidance = copy.footer_guidance %}
    {% set sentinel_hide_header = page.instructions_full_page %}
    {% include 'partials/sentinel_shell_header.j2' %}

    {% if not page.instructions_full_page %}
    <div class="absolute inset-0 opacity-[0.03] pointer-events-none" style="background-image: radial-gradient(#1c170d 1px, transparent 1px); background-size: 20px 20px;"></div>
    {% endif %}

    <div class="relative z-10 flex flex-col flex-1 p-[15mm] pt-4 gap-5">
      {% if page.instructions_full_page %}
      <div class="flex-1 border-2 border-[#d1c7b7] bg-[#faf9f6] p-6 flex flex-col gap-5">
        <div class="border-b-2 border-[#d1c7b7] pb-3">
          <h2 class="font-serif text-2xl font-bold uppercase tracking-tight text-charcoal">
            How to Rebuild the Recovery Kit
          </h2>
          <p class="mt-1 text-sm text-text-secondary-light">
            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-charcoal px-2 py-1 text-[10px] font-bold uppercase tracking-[0.12em] text-charcoal">
                <span class="material-symbols-outlined text-sm">hub</span>
                Scan + Assemble
              </h3>
              <div class="mt-3 space-y-2 text-sm text-charcoal">
                <div class="flex items-start gap-2"><span class="material-symbols-outlined text-sm text-text-secondary-light">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-text-secondary-light">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-text-secondary-light">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-text-secondary-light">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-charcoal px-2 py-1 text-[10px] font-bold uppercase tracking-[0.12em] text-charcoal">
                <span class="material-symbols-outlined text-sm">language</span>
                Open the Kit
              </h3>
              <div class="mt-3 space-y-2 text-sm text-charcoal">
                <div class="flex items-start gap-2"><span class="material-symbols-outlined text-sm text-text-secondary-light">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-text-secondary-light">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-text-secondary-light">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-charcoal px-2 py-1 text-[10px] font-bold uppercase tracking-[0.12em] text-charcoal">
                <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-charcoal">
                <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-[#d1c7b7] bg-white p-3">
              <p class="text-[10px] font-bold uppercase tracking-[0.12em] text-charcoal">Verify</p>
              <p class="mt-1 text-sm text-charcoal">Confirm the kit loads and shows the Recovery Kit home screen.</p>
              <p class="mt-1 text-sm text-text-secondary-light">If it fails to open, re-check the order and re-save the file.</p>
            </div>
            <div class="border border-[#d1c7b7] bg-white p-3">
              <p class="text-[10px] font-bold uppercase tracking-[0.12em] text-charcoal">Storage</p>
              <p class="mt-1 text-sm text-charcoal">Keep the QR pages and the bundle file in separate locations.</p>
              <p class="mt-1 text-sm text-text-secondary-light">Store the bundle on a write-protected drive if possible.</p>
            </div>
            <div class="border border-[#d1c7b7] bg-white p-3">
              <p class="text-[10px] font-bold uppercase tracking-[0.12em] text-charcoal">Security</p>
              <p class="mt-1 text-sm text-charcoal">Work offline and on a trusted machine.</p>
              <p class="mt-1 text-sm text-text-secondary-light">Delete temporary files after successful recovery.</p>
            </div>

            <div class="border border-[#d1c7b7] bg-white p-3">
              <h3 class="inline-flex items-center gap-1 text-[10px] font-bold uppercase tracking-[0.12em] text-charcoal 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-charcoal">
                  <span class="material-symbols-outlined text-base text-text-secondary-light">check_box_outline_blank</span>
                  <span>{{ line }}</span>
                </div>
                {% endfor %}
                {% if instructions.scan_hint %}
                <div class="flex items-start gap-2 text-sm text-charcoal">
                  <span class="material-symbols-outlined text-base text-text-secondary-light">check_box_outline_blank</span>
                  <span>{{ instructions.scan_hint }}</span>
                </div>
                {% endif %}
                <div class="flex items-start gap-2 text-sm text-charcoal">
                  <span class="material-symbols-outlined text-base text-text-secondary-light">check_box_outline_blank</span>
                  <span>Recovery completed and data verified.</span>
                </div>
              </div>
            </div>
          </div>
        </div>

        <div class="border-t border-[#d1c7b7] pt-3 flex items-center justify-between text-[10px] uppercase tracking-[0.12em] text-text-secondary-light">
          <span>Recovery Kit: offline HTML bundle</span>
          <span>Document ID: <span class="font-mono normal-case tracking-normal text-charcoal">{{ doc_id }}</span></span>
        </div>
      </div>

      {% else %}
      <div class="mb-2 flex items-center gap-3 p-3 bg-primary/10 border border-primary/30 rounded text-[#8a5d07]">
        <span class="material-symbols-outlined">warning</span>
        <span class="text-xs font-bold uppercase tracking-wide">{{ copy.continuation_hint }}</span>
      </div>

      {% if page.qr_items %}
      <div class="kit-grid gap-2 flex-1" style="--qr-cols: {{ page.qr_grid.cols if page.qr_grid else 3 }};">
        {% for slot in page.qr_items %}
        <article class="p-2 flex flex-col gap-1 bg-white rounded border border-[#d1c7b7]">
          <div class="flex items-start">
            <span class="font-mono text-[10px] text-text-secondary-light uppercase tracking-widest">Part {{ '%02d' % slot.index }}</span>
          </div>

          <div class="aspect-square w-full bg-white p-1 border-2 border-charcoal flex items-center justify-center">
            <img
              class="w-full h-full object-contain"
              src="{{ slot.data_uri }}"
              alt="Recovery kit QR {{ slot.index }}"
              style="image-rendering: pixelated;"
            >
          </div>
        </article>
        {% endfor %}
      </div>
      {% endif %}
      {% endif %}

    </div>
    {% if not page.instructions_full_page %}
    {% include 'partials/sentinel_shell_footer.j2' %}
    {% endif %}
  </section>
{% endfor %}
</body>
</html>
