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

    .watermark-pattern {
      background-image: repeating-linear-gradient(
        45deg,
        transparent,
        transparent 40px,
        rgba(0, 0, 0, 0.03) 40px,
        rgba(0, 0, 0, 0.03) 80px
      );
    }
  </style>
</head>
<body class="bg-background-light font-display min-h-screen flex flex-col overflow-x-hidden text-slate-900">
{% for page in pages %}
  <section class="print-sheet relative overflow-hidden text-black watermark-pattern">
    <div class="absolute inset-0 p-[15mm] flex flex-col justify-between">
      {% 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 = 'Confidential' %}
      {% set forge_header_guidance = copy.header_guidance %}
      {% set forge_header_ref = doc_id %}
      {% set forge_header_icon = 'shield_lock' %}
      {% include 'partials/forge_shell_header.j2' %}

      <section class="mt-8 border-2 border-black p-4 bg-slate-100">
        <div class="flex items-start gap-4">
          <div class="bg-black p-2 flex items-center justify-center">
            <span class="material-symbols-outlined text-3xl" style="color: #fff;">warning</span>
          </div>
          <div>
            <h3 class="font-bold text-lg uppercase mb-1">{{ copy.warning_title }}</h3>
            <ul class="list-disc list-inside text-sm space-y-1 font-medium text-slate-800">
              <li>{{ copy.warning_body }}</li>
              {% if page.show_instructions %}
                {% for line in instructions.lines %}
                <li>{{ line }}</li>
                {% endfor %}
              {% endif %}
            </ul>
          </div>
        </div>
      </section>

      <section class="flex-1 flex flex-col justify-center items-center py-12 gap-8">
        <div class="w-full flex justify-between border-b border-black pb-2 mb-4">
          <div class="flex flex-col">
            <span class="text-xs font-bold uppercase text-slate-500">Total Shards</span>
            <span class="text-xl font-bold font-mono">{{ shard_total }}</span>
          </div>
          <div class="flex flex-col text-right">
            <span class="text-xs font-bold uppercase text-slate-500">Generated</span>
            <span class="text-xl font-bold font-mono">{{ created_timestamp_utc }}</span>
          </div>
        </div>

        {% if page.qr_items %}
        <div class="relative p-6 border-4 border-black">
          <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
            alt="High density QR code containing the encrypted shard data"
            class="w-64 h-64 block"
            src="{{ page.qr_items[0].data_uri }}"
            style="image-rendering: pixelated;"
          >
        </div>
        {% endif %}

        {% if page.fallback_blocks %}
        <div class="w-full bg-slate-50 border border-slate-300 p-4 mt-4">
          <p class="text-xs font-bold uppercase mb-2 text-slate-500">{{ copy.manual_transcription_label }}</p>
          {% for block in page.fallback_blocks %}
            {% if block.title %}
            <p class="text-[10px] font-bold uppercase tracking-wider text-slate-500 mb-1 mt-2">{{ block.title }}</p>
            {% endif %}
            <div class="font-mono text-xs leading-tight tracking-wide text-slate-900">
              {% for line in block.lines %}
              <div class="whitespace-nowrap">{{ line }}</div>
              {% endfor %}
            </div>
          {% endfor %}
        </div>
        {% endif %}
      </section>

      <section class="mt-auto pt-8 border-t-2 border-black border-dashed mb-4">
        <div class="grid grid-cols-2 gap-12">
          <div>
            <div class="h-12 border-b border-black mb-2"></div>
            <p class="text-xs font-bold uppercase tracking-wider">Validator Signature</p>
          </div>
          <div>
            <div class="h-12 border-b border-black mb-2 flex items-end justify-end pb-1 font-mono text-sm">
              ____ / ____ / ________
            </div>
            <p class="text-xs font-bold uppercase tracking-wider text-right">Date Verified</p>
          </div>
        </div>
      </section>

      {% set forge_footer_left = forge_copy.generator_label %}
      {% set forge_footer_right = copy.footer_guidance %}
      {% include 'partials/forge_shell_footer.j2' %}
    </div>
  </section>
{% endfor %}
</body>
</html>
