<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>{{ name }} - Personal Info</title>

  <!-- Bootstrap 5 -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css" rel="stylesheet">

  <!-- html2pdf.js -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/html2pdf.js/0.10.1/html2pdf.bundle.min.js"></script>

  <style>
    body {
      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
      background: #f8f9fa;
      padding-bottom: 5rem;
    }

    .header {
      position: sticky;
      top: 0;
      background: #fff;
      padding: 1rem 1.5rem;
      box-shadow: 0 1px 3px rgba(0,0,0,0.05);
      z-index: 1000;
    }

    .download-btn {
      position: fixed;
      bottom: 20px;
      right: 20px;
      z-index: 999;
    }

    .section-card {
      background: #fff;
      border-radius: 12px;
      padding: 1.5rem;
      box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
      margin-bottom: 2rem;
    }

    .section-header {
      font-size: 1.25rem;
      font-weight: 600;
      margin-bottom: 1rem;
      color: #2c3e50;
      border-bottom: 1px solid #e9ecef;
      padding-bottom: 0.3rem;
    }

    .family-tree {
      display: flex;
      flex-direction: column;
      align-items: center;
    }

    .tree-level {
      display: flex;
      gap: 1.5rem;
      margin: 1.5rem 0;
      position: relative;
      flex-wrap: wrap;
      justify-content: center;
    }

    .tree-node {
      background: #fff;
      border: 2px solid #0d6efd;
      padding: 1rem;
      border-radius: 12px;
      text-align: center;
      min-width: 140px;
      box-shadow: 0 2px 6px rgba(0,0,0,0.1);
      font-weight: 600;
      color: #0d6efd;
    }

    .tree-node small {
      display: block;
      font-weight: normal;
      color: #6c757d;
      margin-top: 4px;
    }

    .tree-connector {
      height: 20px;
      border-left: 2px solid #dee2e6;
      margin-bottom: -20px;
    }

    @media print {
      .download-btn, .header {
        display: none !important;
      }
    }
  </style>
</head>
<body>

  <!-- Sticky Header -->
  <div class="header d-flex align-items-center justify-content-between">
    <h1>{{ name }}'s Personal Info</h1>
  </div>

  <!-- Main Content -->
  <div class="container mt-4" id="pdf-content">

    <!-- Family Tree Section -->
    {% if family_tree %}
    <div class="section-card">
      <div class="section-header"><i class="bi bi-diagram-3-fill me-2"></i>Family Tree</div>
      <div class="family-tree">
        {% for level in family_tree %}
          <div class="tree-level">
            {% for member in level %}
              <div class="tree-node">
                {{ member.role }}<br>
                <small>{{ member.name }}</small>
                {% if member.note %}
                  <small><em>{{ member.note }}</em></small>
                {% endif %}
              </div>
            {% endfor %}
          </div>
          {% if not loop.last %}
            <div class="tree-connector"></div>
          {% endif %}
        {% endfor %}
      </div>
    </div>
    {% endif %}

    <!-- Other Sections -->
    {% macro render_item(value) %}
      {% if value is mapping %}
        <ul class="list-unstyled ps-3">
          {% for k, v in value.items() %}
            <li><strong>{{ k }}:</strong> {{ render_item(v) }}</li>
          {% endfor %}
        </ul>
      {% elif value is iterable and value is not string %}
        <ul class="list-unstyled ps-3">
          {% for entry in value %}
            <li>{{ render_item(entry) }}</li>
          {% endfor %}
        </ul>
      {% else %}
        {{ value }}
      {% endif %}
    {% endmacro %}

    {% for title, items in sections %}
      {% if items %}
        <div class="section-card">
          <div class="section-header">{{ title }}</div>
          {{ render_item(items) }}
        </div>
      {% endif %}
    {% endfor %}

  </div>

  <!-- Download Button -->
  <button class="btn btn-primary btn-lg rounded-pill shadow download-btn" onclick="downloadPDF()">
    <i class="bi bi-download me-2"></i>Download PDF
  </button>

  <script>
    function downloadPDF() {
      const element = document.getElementById("pdf-content");
      const opt = {
        margin: 0.5,
        filename: '{{ name | lower | replace(" ", "_") }}_info.pdf',
        image: { type: 'jpeg', quality: 0.98 },
        html2canvas: { scale: 2 },
        jsPDF: { unit: 'in', format: 'a4', orientation: 'portrait' }
      };
      html2pdf().set(opt).from(element).save();
    }
  </script>

</body>
</html>
