{#
 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;
    }

    .watermark-text {
      transform: rotate(-45deg);
      font-size: 7rem;
      font-weight: 900;
      color: rgba(0, 0, 0, 0.03);
      white-space: nowrap;
    }
  </style>
</head>
<body class="bg-background-light font-display min-h-screen">
{% for page in pages %}
  <section class="print-sheet border border-border-light flex flex-col">
    {% set sentinel_top_strip_text = 'Signing Key Shard // Restricted Access // Store Separately' %}
    {% set sentinel_header_title = copy.title %}
    {% set sentinel_header_subtitle = copy.subtitle %}
    {% set sentinel_header_classification = 'Restricted Access' %}
    {% set sentinel_footer_guidance = copy.footer_guidance %}
    {% include 'partials/sentinel_shell_header.j2' %}
    <div class="absolute inset-0 pointer-events-none flex items-center justify-center overflow-hidden">
      <div class="watermark-text">RESTRICTED ACCESS</div>
    </div>

    <div class="relative z-10 flex-1 px-10 py-8 flex flex-col gap-6">
      <section class="border-2 border-dashed border-black bg-[#fffbf2] p-5 rounded-lg flex gap-4 items-start">
        <div class="bg-primary/20 text-black p-2 rounded shrink-0">
          <span class="material-symbols-outlined text-3xl">warning</span>
        </div>
        <div class="flex-1">
          <h3 class="text-xl font-bold uppercase tracking-tight mb-2">{{ copy.warning_title }}</h3>
          <p class="text-sm leading-relaxed font-medium text-gray-700">
            {{ copy.warning_body }}
          </p>
          <div class="mt-3 flex gap-4 text-xs font-bold uppercase tracking-wider text-gray-600">
            <div class="flex items-center gap-1">
              <span class="material-symbols-outlined text-sm">group_work</span>
              Threshold: {{ shard_threshold if shard_threshold is defined else shard_total }}/{{ shard_total }} required
            </div>
            <div class="flex items-center gap-1">
              <span class="material-symbols-outlined text-sm">fingerprint</span>
              DOC: {{ doc_id[:10] }}
            </div>
          </div>
        </div>
      </section>

      <section class="flex flex-col gap-2">
        <div class="flex items-center justify-between border-b border-black pb-1">
          <h2 class="text-lg font-black uppercase tracking-tight flex items-center gap-2">
            <span class="material-symbols-outlined">qr_code_2</span>
            {{ copy.key_material_label }}
          </h2>
          <span class="text-xs font-mono bg-gray-100 px-2 py-1 rounded">Encoding: QR + Text</span>
        </div>

        <div class="flex gap-6 items-start">
          {% if page.qr_items %}
          <div class="w-1/3 flex flex-col gap-2">
            <div class="aspect-square bg-white border-4 border-black p-2 flex items-center justify-center relative">
              <div class="absolute top-0 left-0 w-4 h-4 border-t-4 border-l-4 border-black -mt-1 -ml-1"></div>
              <div class="absolute top-0 right-0 w-4 h-4 border-t-4 border-r-4 border-black -mt-1 -mr-1"></div>
              <div class="absolute bottom-0 left-0 w-4 h-4 border-b-4 border-l-4 border-black -mb-1 -ml-1"></div>
              <div class="absolute bottom-0 right-0 w-4 h-4 border-b-4 border-r-4 border-black -mb-1 -mr-1"></div>
              <img class="w-full h-full object-contain" src="{{ page.qr_items[0].data_uri }}" alt="Signing shard QR" style="image-rendering: pixelated;">
            </div>
            <div class="text-center text-[10px] uppercase font-bold tracking-widest text-gray-500">Scan In Offline Kit</div>
          </div>
          {% endif %}

          <div class="flex-1 min-w-0 bg-gray-50 border border-gray-200 p-4 rounded font-mono text-[10px] leading-5 tracking-normal text-black min-h-[160px]">
            {% if page.fallback_blocks %}
              {% for block in page.fallback_blocks %}
                {% if block.title %}
                <div class="text-[10px] font-bold uppercase tracking-[0.12em] text-text-secondary-light mb-1 mt-1">{{ block.title }}</div>
                {% endif %}
                {% for line in block.lines %}
                <div class="whitespace-normal break-words">{{ line }}</div>
                {% endfor %}
              {% endfor %}
            {% else %}
            <div>{{ copy.empty_fallback_text }}</div>
            {% endif %}
          </div>
        </div>
      </section>

      <section class="grid grid-cols-2 gap-6 mt-auto">
        <div class="border border-border-light p-3 bg-[#faf8f4]">
          <p class="text-[10px] font-bold uppercase tracking-[0.12em] text-text-secondary-light">{{ copy.master_fingerprint_label }}</p>
          <p class="font-mono text-xs font-bold break-all mt-1">{{ doc_id }}</p>
          <p class="text-[10px] text-text-secondary-light leading-tight mt-2">Use this value to verify shard set integrity.</p>
        </div>
        <div class="border border-border-light p-3 bg-[#faf8f4] text-xs">
          <div class="grid grid-cols-2 border-b border-border-light pb-1 mb-1">
            <div class="font-black uppercase tracking-[0.1em] text-text-secondary-light">Schema</div>
            <div class="font-mono">Signing Key Shard</div>
          </div>
          <div class="grid grid-cols-2 border-b border-border-light pb-1 mb-1">
            <div class="font-black uppercase tracking-[0.1em] text-text-secondary-light">Generated</div>
            <div class="font-mono">{{ created_timestamp_utc }}</div>
          </div>
          <div class="grid grid-cols-2">
            <div class="font-black uppercase tracking-[0.1em] text-text-secondary-light">Page</div>
            <div class="font-mono">{{ page.page_label }}</div>
          </div>
        </div>
      </section>
    </div>

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