{#
 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/>.
#}
{% from 'css_base.j2' import reset_styles, page_styles, qr_grid_items_styles, qr_image_styles %}
{% from 'css_variables.j2' import common_variables %}
{% from 'html_components.j2' import divider, fallback_blocks, instructions_lines %}

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <style>
    @page {
      size: {{ page_size_css }};
      margin: 0;
    }
    :root {
      {{ common_variables() }}

      --ink: #0c2230;
      --ink-muted: #31495a;
      --ink-soft: #5a7384;
      --ink-label: #223643;
      --accent: #0c2b3c;
      --rail: #0c2b3c;
      --paper-top: #f2f6f7;
      --paper-bottom: #dfe7ea;
      --surface: #f7fbfc;
      --surface-border: #b7c4c9;
      --rule: #c1ced2;
      --rule-strong: #869aa3;
      --note: #e9f0f2;
      --tab: #c7dde0;
      --pin: #465c68;
      --stamp: #1f5e73;
      --font-title: "Baskerville", "Goudy Old Style", "Palatino Linotype", "Palatino", serif;
      --font-body: "Gill Sans", "Trebuchet MS", "Verdana", sans-serif;
      --font-mono: "SFMono-Regular", "Menlo", "Consolas", "Courier New", monospace;
      --header-pad: 2mm 3mm;
      --instructions-pad: 0 3mm;
      --fallback-pad: 0 4mm 0 calc(var(--line-num-offset) + var(--line-num-width) + 2.6mm);
      --line-num-offset: 5.6mm;
      --line-num-width: 4.5mm;
      --border-fine: 0.25mm;
      --title-size: 15.5pt;
      --subtitle-size: 8pt;
      --meta-size: 7.2pt;
      --meta-label-size: 6pt;
      --meta-value-size: 7.2pt;
      --fallback-font-size: 9.0pt;
      --fallback-line: 4.2mm;
      --line-num-size: 5.8pt;
      --line-num-letter-spacing: 0.1em;
    }
{{ reset_styles() }}
{{ page_styles(page_width_mm, page_height_mm) }}
    .header {
      position: absolute;
      left: {{ margin_mm }}mm;
      top: {{ margin_mm }}mm;
      width: {{ usable_width_mm }}mm;
      display: grid;
      grid-template-columns: 1fr 48mm;
      gap: var(--space-8);
      align-items: start;
    }
    .header-left {
      display: grid;
      gap: var(--space-4);
    }
    .title {
      font-size: var(--title-size);
      font-weight: 600;
      font-family: var(--font-title);
      color: var(--ink);
      line-height: 1.1;
      letter-spacing: 0.14em;
      text-transform: uppercase;
    }
    .subtitle {
      font-size: var(--subtitle-size);
      font-style: normal;
      color: var(--ink-muted);
      line-height: 1.2;
      letter-spacing: 0.18em;
      text-transform: uppercase;
    }
    .meta-grid {
      display: grid;
      grid-template-columns: 22mm auto;
      gap: var(--space-2) var(--space-6);
      font-size: var(--meta-size);
      line-height: 1.2;
      align-items: baseline;
    }
    .meta-label {
      font-size: var(--meta-label-size);
      text-transform: uppercase;
      letter-spacing: 0.2em;
      color: var(--ink-soft);
      font-family: var(--font-title);
    }
    .meta-value {
      font-size: var(--meta-value-size);
      letter-spacing: 0.08em;
      color: var(--ink);
      font-family: var(--font-mono);
    }
    .header-right {
      justify-self: end;
      align-self: start;
      border: var(--border-heavy) solid var(--rule-strong);
      border-radius: var(--radius-md);
      padding: var(--header-pad);
      text-align: left;
      text-transform: uppercase;
      letter-spacing: 0.16em;
      background: linear-gradient(180deg, rgba(248, 251, 250, 0.95) 0%, var(--surface) 100%);
    }
    .stamp-title {
      font-size: 7pt;
      color: var(--stamp);
      font-family: var(--font-title);
    }
    .stamp-value {
      margin-top: var(--space-1);
      font-size: 9pt;
      font-weight: 700;
      color: var(--ink);
      font-family: var(--font-title);
      letter-spacing: 0.12em;
    }
    .divider {
      position: absolute;
      left: {{ margin_mm }}mm;
      width: {{ usable_width_mm }}mm;
      height: 0.4mm;
      background: repeating-linear-gradient(
        90deg,
        var(--rule-strong) 0,
        var(--rule-strong) 14mm,
        transparent 14mm,
        transparent 18mm
      );
      opacity: 0.7;
    }
    .instructions {
      position: absolute;
      left: {{ margin_mm }}mm;
      width: {{ usable_width_mm }}mm;
      display: grid;
      grid-template-columns: minmax(26mm, max-content) 1fr;
      column-gap: var(--space-5);
      font-size: 9pt;
      line-height: 4.5mm;
      color: var(--ink);
      background: linear-gradient(
        90deg,
        rgba(15, 43, 60, 0.06) 0,
        rgba(255, 255, 255, 0) 70%
      );
      border: none;
      border-radius: var(--radius-md);
      padding: var(--instructions-pad);
      box-shadow: none;
      outline: var(--border-strong) solid var(--rule-strong);
    }
    .instructions-label {
      font-size: 6.5pt;
      font-weight: 700;
      color: var(--stamp);
      text-transform: uppercase;
      letter-spacing: 0.2em;
      font-family: var(--font-title);
      background: rgba(42, 95, 110, 0.12);
      padding: 0 1.2mm;
      justify-self: start;
      align-self: start;
      grid-column: 1;
      grid-row: 1;
    }
    .instructions > div:not(.instructions-label) {
      grid-column: 2;
      grid-row: 1;
    }
    .fallback {
      position: absolute;
      left: {{ margin_mm }}mm;
      width: {{ fallback.width_mm }}mm;
      font-family: "Courier", "Courier New", monospace;
      font-size: var(--fallback-font-size);
      line-height: var(--fallback-line);
      letter-spacing: 0;
      font-kerning: none;
      font-variant-ligatures: none;
      font-feature-settings: "liga" 0, "calt" 0;
      color: var(--ink);
      background: var(--surface);
      padding: var(--fallback-pad);
      overflow: hidden;
      border: none;
      box-shadow: none;
      border-radius: var(--radius-md);
      font-variant-numeric: tabular-nums;
      outline: var(--border-base) solid var(--rule);
    }
    .fallback-title {
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.2em;
      color: var(--stamp);
      font-family: var(--font-title);
      font-size: 6.5pt;
      line-height: var(--fallback-line);
      margin: 0;
      padding: 0 1.2mm;
      background: rgba(42, 95, 110, 0.12);
      display: inline-block;
    }
    .fallback-lines {
      position: relative;
      counter-reset: line;
      padding-left: 0;
      padding-top: 0;
      background: none;
    }
    .fallback-line {
      position: relative;
      line-height: var(--fallback-line);
      margin: 0;
      white-space: pre;
    }
    .fallback-line::before {
      counter-increment: line;
      content: counter(line, decimal-leading-zero);
      position: absolute;
      left: calc(-1 * var(--line-num-offset));
      width: var(--line-num-width);
      text-align: right;
      font-size: var(--line-num-size);
      letter-spacing: var(--line-num-letter-spacing);
      color: var(--ink-soft);
    }
  </style>
</head>
<body>
{% for page in pages %}
  <section class="page">
    <header class="header">
      <div class="header-left">
        <div class="title">{{ doc.title }}</div>
        <div class="subtitle">{{ doc.subtitle }}</div>
        <div class="meta-grid">
          <div class="meta-label">Document ID</div>
          <div class="meta-value">{{ doc_id }}</div>
          {% if recovery.quorum_value %}
          <div class="meta-label">Shard Quorum</div>
          <div class="meta-value">{{ recovery.quorum_value }}</div>
          {% endif %}
          {% if recovery.signing_pub_lines %}
          <div class="meta-label">Signing Pub Key</div>
          <div class="meta-value">
            {%- for line in recovery.signing_pub_lines -%}
            {{ line }}{% if not loop.last %}<br>{% endif %}
            {%- endfor -%}
          </div>
          {% endif %}
      {% if recovery.passphrase %}
          <div class="meta-label">Passphrase</div>
          <div class="meta-value">
            {%- if recovery.passphrase_lines -%}
              {%- for line in recovery.passphrase_lines -%}
              {{ line }}{% if not loop.last %}<br>{% endif %}
              {%- endfor -%}
            {%- else -%}
              {{ recovery.passphrase }}
            {%- endif -%}
          </div>
          {% endif %}
          <div class="meta-label">Page</div>
          <div class="meta-value">{{ page.page_label }}</div>
        </div>
      </div>
      <div class="header-right">
        <div class="stamp-title">Created (UTC)</div>
        <div class="stamp-value">{{ created_timestamp_utc }}</div>
      </div>
    </header>

    {{ divider(page) }}

    {% if page.show_instructions %}
    <aside class="instructions" style="top: {{ page.instructions_y_mm }}mm;">
      <div class="instructions-label">{{ instructions.label }}</div>
      <div>
        {{ instructions_lines(instructions.lines) }}
      </div>
    </aside>
    {% endif %}

    {{ fallback_blocks(page) }}
  </section>
{% endfor %}
</body>
</html>
