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

    .bg-blueprint-grid {
      background-size: 20px 20px;
      background-image:
        linear-gradient(to right, rgba(0, 0, 0, 0.05) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(0, 0, 0, 0.05) 1px, transparent 1px);
    }
  </style>
</head>
<body class="bg-background-light font-display text-[#0d141b] overflow-x-hidden">
{% for page in pages %}
  <section class="print-sheet relative flex flex-col">
    {% 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 = 'Restricted Access' %}
    {% set forge_header_guidance = copy.header_guidance %}
    {% set forge_header_ref = doc_id %}
    {% set forge_header_icon = 'token' %}
    {% set forge_shell_header_inset = 'p-10 pb-6 mb-0' %}
    {% include 'partials/forge_shell_header.j2' %}

    <div class="px-10 py-6">
      <div class="border border-dashed border-gray-400 bg-gray-50 p-4 flex gap-4 items-start">
        <span class="material-symbols-outlined text-3xl text-primary mt-1">shield_lock</span>
        <div>
          <h3 class="font-bold text-black uppercase tracking-wide text-sm mb-1">{{ copy.warning_title }}</h3>
          <p class="text-sm text-gray-800 leading-relaxed text-justify">
            {{ copy.warning_body }}
          </p>
          {% if page.show_instructions %}
            {% for line in instructions.lines %}
            <p class="text-xs text-gray-700 mt-1">{{ line }}</p>
            {% endfor %}
          {% endif %}
        </div>
      </div>
    </div>

    <div class="flex-1 px-10 flex flex-col gap-8">
      <section class="flex flex-col">
        <div class="flex items-baseline justify-between mb-2 border-b border-gray-300 pb-1">
          <h4 class="font-bold text-lg uppercase tracking-tight flex items-center gap-2">
            <span class="material-symbols-outlined text-lg">vpn_key</span>
              01. {{ copy.key_material_label }}
          </h4>
          <span class="text-xs font-mono text-gray-500 uppercase">Zone A // Sensitive</span>
        </div>
        <div class="bg-blueprint-grid border-2 border-black p-6 relative">
          <div class="absolute top-0 left-0 border-r border-b border-black w-3 h-3 bg-black"></div>
          <div class="absolute top-0 right-0 border-l border-b border-black w-3 h-3 bg-black"></div>
          <div class="absolute bottom-0 left-0 border-r border-t border-black w-3 h-3 bg-black"></div>
          <div class="absolute bottom-0 right-0 border-l border-t border-black w-3 h-3 bg-black"></div>
          <div class="flex gap-8 items-start">
            {% if page.qr_items %}
            <div class="shrink-0 bg-white p-2 border border-gray-200">
              <img
                class="w-[160px] h-[160px]"
                src="{{ page.qr_items[0].data_uri }}"
                alt="High density QR code containing the encrypted signing key shard"
                style="image-rendering: pixelated;"
              >
            </div>
            {% endif %}
            <div class="flex-1 h-[178px]" style="display: grid; grid-template-rows: minmax(0, 1fr) auto; min-height: 0;">
              <div style="min-height: 0; overflow: hidden;">
                <label class="block text-[10px] font-bold uppercase text-gray-500 mb-1">Shard Payload</label>
                {% if page.fallback_blocks %}
                  {% for block in page.fallback_blocks %}
                    {% if block.title %}
                    <div class="text-[10px] font-bold uppercase text-gray-500 mb-1 mt-2">{{ block.title }}</div>
                    {% endif %}
                    <div class="font-mono text-gray-900 tracking-wide" style="font-size: 10.7px; line-height: 1.2;">
                      {% for line in block.lines %}
                      <div style="white-space: nowrap;">{{ line }}</div>
                      {% endfor %}
                    </div>
                  {% endfor %}
                {% else %}
                <div class="font-mono text-gray-900 tracking-wide" style="font-size: 10.7px; line-height: 1.2;">{{ copy.empty_fallback_text }}</div>
                {% endif %}
              </div>
              <div class="border-t border-gray-300 pt-2 flex justify-between items-center">
                <div class="text-[10px] text-gray-500 font-bold uppercase">Shard: <span class="text-black font-mono">{{ shard_index }} / {{ shard_total }}</span></div>
                <div class="text-[10px] text-gray-500 font-bold uppercase">Encoding: <span class="text-black font-mono">QR + Text</span></div>
              </div>
            </div>
          </div>
        </div>
      </section>

      <section class="grid grid-cols-2 gap-8">
        <div class="flex flex-col">
          <div class="flex items-baseline justify-between mb-2 border-b border-gray-300 pb-1">
            <h4 class="font-bold text-sm uppercase tracking-tight flex items-center gap-2">
              <span class="material-symbols-outlined text-base">visibility</span>
              02. Public Reference
            </h4>
            <span class="text-[10px] font-mono text-gray-500 uppercase">Zone B // Verification</span>
          </div>
          <div class="border border-gray-300 p-4 bg-gray-50">
            <label class="text-[10px] font-bold uppercase text-gray-400">{{ copy.master_fingerprint_label }}</label>
            <div class="font-mono text-sm font-bold text-black break-all mt-1">{{ doc_id }}</div>
            <div class="text-[10px] text-gray-500 leading-tight mt-2">Use this value to verify shard set integrity.</div>
          </div>
        </div>

        <div class="flex flex-col">
          <div class="flex items-baseline justify-between mb-2 border-b border-gray-300 pb-1">
            <h4 class="font-bold text-sm uppercase tracking-tight flex items-center gap-2">
              <span class="material-symbols-outlined text-base">settings_ethernet</span>
              03. Specifications
            </h4>
          </div>
          <div class="border border-gray-300 text-xs">
            <div class="grid grid-cols-2 border-b border-gray-300">
              <div class="p-2 border-r border-gray-300 bg-gray-50 font-bold text-gray-600 uppercase">Schema</div>
              <div class="p-2 font-mono text-black">Shamir Signing Key</div>
            </div>
            <div class="grid grid-cols-2 border-b border-gray-300">
              <div class="p-2 border-r border-gray-300 bg-gray-50 font-bold text-gray-600 uppercase">Threshold</div>
              <div class="p-2 font-mono text-black font-bold">{{ shard_total }} total</div>
            </div>
            <div class="grid grid-cols-2 border-b border-gray-300">
              <div class="p-2 border-r border-gray-300 bg-gray-50 font-bold text-gray-600 uppercase">Document</div>
              <div class="p-2 font-mono text-black">{{ copy.title }}</div>
            </div>
            <div class="grid grid-cols-2">
              <div class="p-2 border-r border-gray-300 bg-gray-50 font-bold text-gray-600 uppercase">Version</div>
              <div class="p-2 font-mono text-black">Forge {{ forge_copy.version }}</div>
            </div>
          </div>
        </div>
      </section>

      <section class="flex flex-col grow">
        <div class="flex items-baseline justify-between mb-2">
          <h4 class="font-bold text-sm uppercase tracking-tight text-gray-400">04. Custodian Notes</h4>
        </div>
        <div class="border border-gray-200 min-h-[120px] bg-blueprint-grid p-4 relative">
          <div class="w-full h-px bg-gray-200 absolute top-10 left-0"></div>
          <div class="w-full h-px bg-gray-200 absolute top-20 left-0"></div>
          <span class="text-[10px] text-gray-300 absolute top-2 right-2">Write clearly in block letters</span>
        </div>
      </section>
    </div>

    <section class="p-10 pt-4 mt-auto mb-4">
      <div class="text-[9px] text-gray-300 text-center">
        Valid only if physically intact. Verify checksums before restoration.
      </div>
    </section>
    {% set forge_footer_left = forge_copy.generator_label %}
    {% set forge_footer_right = copy.footer_guidance %}
    {% set forge_shell_footer_inset = 'px-10 pb-6 pt-4 mt-0' %}
    {% include 'partials/forge_shell_footer.j2' %}
  </section>
{% endfor %}
</body>
</html>
