<!doctype html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>{{ pdf_title }}</title>
    <style>
      @page {
        size: A4;
        margin: 1.4cm 1.6cm;
      }

      body {
        font-family: Helvetica, Arial, sans-serif;
        font-size: 11pt;
        color: #111827;
        margin: 0;
        padding: 0;
        line-height: 1.35;
        background: #ffffff;
      }

      .page-shell {
        border-left: 1px dashed #cbd5e1;
        border-right: 1px dashed #cbd5e1;
        padding: 0 22px 8px 22px;
      }

      .title {
        font-size: 22pt;
        font-weight: bold;
        text-align: center;
        margin: 0 0 18px 0;
      }

      .heading1 {
        font-size: 26pt;
        font-weight: bold;
        margin: 18px 0 10px 0;
      }

      .heading2 {
        font-size: 18pt;
        font-weight: bold;
        margin: 14px 0 8px 0;
      }

      .heading3 {
        font-size: 14pt;
        font-weight: bold;
        margin: 12px 0 6px 0;
      }

      .heading4,
      .heading5,
      .heading6 {
        font-size: 11pt;
        font-weight: bold;
        margin: 10px 0 6px 0;
      }

      .paragraph {
        margin: 0 0 12px 0;
        color: #374151;
      }

      .field-block {
        margin: 10px 0 14px 0;
        page-break-inside: avoid;
      }

      .field-label {
        font-size: 9pt;
        font-weight: bold;
        color: #475569;
        text-transform: uppercase;
        margin: 0 0 4px 0;
      }

      .input-box {
        border: 1px solid #d1d5db;
        background: #ffffff;
        padding: 8px 10px;
        min-height: 18px;
      }

      .input-placeholder {
        color: #9ca3af;
      }

      .phone-table {
        width: 100%;
        border-collapse: collapse;
      }

      .phone-prefix {
        width: 78px;
        border: 1px solid #d1d5db;
        background: #f8fafc;
        padding: 8px 10px;
        font-size: 11pt;
      }

      .phone-value {
        border: 1px solid #d1d5db;
        padding: 8px 10px;
        font-size: 11pt;
      }

      .file-card {
        border: 1px solid #d1d5db;
        background: #f8fafc;
        padding: 12px;
      }

      .preview-page {
        margin: 8px 0;
        border: 1px solid #d1d5db;
        background: #ffffff;
        text-align: center;
      }

      .preview-page img {
        height: auto;
      }

      .preview-meta {
        margin-top: 6px;
        font-size: 8.5pt;
        color: #64748b;
      }

      .empty-file {
        border: 2px dashed #94a3b8;
        background: #ffffff;
        padding: 18px 12px;
        text-align: center;
        color: #64748b;
      }

      .signature-box {
        border: 1px solid #d1d5db;
        background: #ffffff;
        height: 84px;
        text-align: center;
        vertical-align: middle;
      }

      .signature-box img {
        max-width: 200px;
        max-height: 70px;
        margin: 6px auto;
      }

      .field-meta {
        margin-top: 4px;
        color: #6b7280;
        font-size: 8.5pt;
      }
    </style>
  </head>
  <body>
    <div class="page-shell">
      <h1 class="title">{{ pdf_title }}</h1>

      {% for field in fields %}
        {% if field.kind == 'heading' %}
          {% if field.level == 'heading1' %}
            <div class="heading1">{{ field.text }}</div>
          {% elif field.level == 'heading2' %}
            <div class="heading2">{{ field.text }}</div>
          {% elif field.level == 'heading3' %}
            <div class="heading3">{{ field.text }}</div>
          {% elif field.level == 'heading4' %}
            <div class="heading4">{{ field.text }}</div>
          {% elif field.level == 'heading5' %}
            <div class="heading5">{{ field.text }}</div>
          {% else %}
            <div class="heading6">{{ field.text }}</div>
          {% endif %}
        {% elif field.kind == 'paragraph' %}
          <p class="paragraph">{{ field.text }}</p>
        {% elif field.kind == 'file' %}
          <div class="field-block">
            <div class="field-label">{{ field.label }}</div>
            <div class="file-card">
              {% if field.has_preview %}
                {% for preview in field.preview_pages %}
                  <div class="preview-page">
                    <img src="{{ preview.src }}" alt="{{ preview.alt }}" width="{{ preview.width }}" height="{{ preview.height }}" />
                  </div>
                {% endfor %}
                {% if field.total_pages > 1 %}
                  <div class="preview-meta">Aperçu de la première page sur {{ field.total_pages }} pages</div>
                {% endif %}
              {% else %}
                <div class="empty-file">Aucun document source fourni</div>
              {% endif %}
            </div>
          </div>
        {% elif field.kind == 'phone' %}
          <div class="field-block">
            <div class="field-label">{{ field.label }}</div>
            <table class="phone-table">
              <tr>
                <td class="phone-prefix">{{ field.prefix }}</td>
                <td class="phone-value">
                  {% if field.value %}
                    {{ field.value }}
                  {% else %}
                    <span class="input-placeholder">&nbsp;</span>
                  {% endif %}
                </td>
              </tr>
            </table>
          </div>
        {% elif field.kind == 'signature' %}
          <div class="field-block">
            <div class="field-label">{{ field.label }}</div>
            <div class="signature-box">
              {% if field.signature_src %}
                <img src="{{ field.signature_src }}" alt="Signature" />
              {% else %}
                &nbsp;
              {% endif %}
            </div>
          </div>
        {% else %}
          <div class="field-block">
            <div class="field-label">{{ field.label }}</div>
            <div class="input-box">
              {% if field.value %}
                {{ field.value }}
              {% else %}
                <span class="input-placeholder">&nbsp;</span>
              {% endif %}
            </div>
            {% if field.field_type %}
              <div class="field-meta">Type: {{ field.field_type }}</div>
            {% endif %}
          </div>
        {% endif %}
      {% endfor %}
    </div>
  </body>
</html>