{#
 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/>.
#}
{% macro sentinel_qr_card(slot, border_class='border-2', extra_class='') %}
<article class="{{ border_class }} border-black p-2 bg-white flex flex-col gap-2 self-start{{ (' ' ~ extra_class) if extra_class else '' }}">
  <div class="flex items-center border-b border-gray-300 pb-1">
    <span class="font-mono text-[11px] font-bold uppercase">{{ copy.segment_prefix }} {{ '%02d' % slot.index }}</span>
  </div>
  <div class="aspect-square bg-white border border-gray-200 p-1 relative">
    <div class="absolute top-0 left-0 w-3 h-3 border-t-2 border-l-2 border-black"></div>
    <div class="absolute top-0 right-0 w-3 h-3 border-t-2 border-r-2 border-black"></div>
    <div class="absolute bottom-0 left-0 w-3 h-3 border-b-2 border-l-2 border-black"></div>
    <div class="absolute bottom-0 right-0 w-3 h-3 border-b-2 border-r-2 border-black"></div>
    <img class="w-full h-full object-contain" src="{{ slot.data_uri }}" alt="QR segment {{ slot.index }}" style="image-rendering: pixelated;">
  </div>
</article>
{% endmacro %}
<!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;
    }

    .watermark-grid {
      background-image: radial-gradient(rgba(28, 23, 13, 0.08) 1px, transparent 1px);
      background-size: 18px 18px;
    }

    .qr-grid {
      display: grid;
      grid-template-columns: repeat(var(--qr-cols), minmax(0, 1fr));
    }
  </style>
</head>
<body class="bg-background-light font-display antialiased min-h-screen">
{% for page in pages %}
  <section class="print-sheet border border-border-light flex flex-col">
    <div class="absolute inset-0 watermark-grid opacity-[0.04] pointer-events-none"></div>
    {% set sentinel_top_strip_text = 'Restricted // Offline Handling Only // Do Not Upload' %}
    {% set sentinel_header_title = copy.title %}
    {% set sentinel_header_subtitle = copy.subtitle %}
    {% set sentinel_header_classification = 'Do Not Scan Online' %}
    {% set sentinel_footer_guidance = copy.footer_guidance %}
    {% include 'partials/sentinel_shell_header.j2' %}

    <div class="relative z-10 flex flex-col flex-1 p-[15mm] pt-4 gap-5">
      {% if page.page_num == 1 %}
      <section class="grid grid-cols-12 gap-6 flex-1 min-h-0">
        <div class="col-span-4 flex flex-col gap-4 border-r border-border-light pr-4">
          <h3 class="text-xs font-bold uppercase tracking-widest text-text-secondary-light">{{ copy.directives_label }}</h3>
          <ul class="flex flex-col gap-2">
            {% for line in instructions.lines %}
            <li class="flex gap-3 items-start">
              <div class="w-6 h-6 rounded-full bg-black text-white flex items-center justify-center text-xs font-bold shrink-0 mt-0.5">{{ loop.index }}</div>
              <p class="text-xs font-semibold leading-relaxed text-black">{{ line }}</p>
            </li>
            {% endfor %}
            {% if instructions.scan_hint %}
            <li class="flex gap-3 items-start">
              <div class="w-6 h-6 rounded-full bg-primary text-black flex items-center justify-center text-xs font-bold shrink-0 mt-0.5">{{ (instructions.lines | length) + 1 }}</div>
              <p class="text-xs font-semibold leading-relaxed text-black">{{ instructions.scan_hint }}</p>
            </li>
            {% endif %}
          </ul>
          <div class="mt-auto p-3 bg-gray-100 border border-gray-200 rounded-sm">
            <div class="flex items-center gap-2 mb-2 text-amber-700">
              <span class="material-symbols-outlined text-[20px]">visibility_off</span>
              <span class="font-bold text-xs uppercase">{{ copy.security_notice_label }}</span>
            </div>
            <p class="text-[10px] text-gray-600 leading-tight">
              {{ copy.security_notice_body }}
            </p>
          </div>
        </div>

        <div class="col-span-8 flex flex-col items-center justify-center gap-3">
          {% if page.qr_items %}
          <div class="w-full max-w-[330px] aspect-square border-4 border-black p-4 relative bg-white">
            <div class="absolute top-0 left-0 w-4 h-4 border-t-4 border-l-4 border-primary -mt-1 -ml-1"></div>
            <div class="absolute top-0 right-0 w-4 h-4 border-t-4 border-r-4 border-primary -mt-1 -mr-1"></div>
            <div class="absolute bottom-0 left-0 w-4 h-4 border-b-4 border-l-4 border-primary -mb-1 -ml-1"></div>
            <div class="absolute bottom-0 right-0 w-4 h-4 border-b-4 border-r-4 border-primary -mb-1 -mr-1"></div>
            <img
              alt="Primary QR payload"
              class="w-full h-full object-contain"
              src="{{ page.qr_items[0].data_uri }}"
              style="image-rendering: pixelated;"
            >
          </div>
          <p class="font-mono text-xs text-text-secondary-light tracking-widest">{{ copy.segment_prefix }} {{ '%02d' % page.qr_items[0].index }}</p>
          {% endif %}
        </div>
      </section>

      {% if page.qr_items and (page.qr_items | length) > 1 %}
      <section class="grid gap-3 qr-grid" style="--qr-cols: {{ page.qr_grid.cols if page.qr_grid else 3 }};">
        {% for slot in page.qr_items[1:] %}
        {{ sentinel_qr_card(slot, border_class='border') }}
        {% endfor %}
      </section>
      {% endif %}

      {% else %}
      <section class="flex items-start gap-3 p-3 bg-primary/10 border border-primary/30 rounded">
        <span class="material-symbols-outlined text-primary text-xl mt-0.5">info</span>
        <p class="text-xs text-black leading-relaxed">
          {{ copy.continuation_hint }}
        </p>
      </section>

      {% if page.qr_items %}
      <section class="grid gap-3 qr-grid flex-1 content-start items-start" style="--qr-cols: {{ page.qr_grid.cols if page.qr_grid else 3 }};">
        {% for slot in page.qr_items %}
        {{ sentinel_qr_card(slot) }}
        {% endfor %}
      </section>
      {% endif %}
      {% endif %}

    </div>
    {% include 'partials/sentinel_shell_footer.j2' %}
  </section>
{% endfor %}
</body>
</html>
