<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>{{ name }} - Personal Info</title>
    <style>
        body { font-family: Arial, sans-serif; margin: 2em; background: #f9f9f9; }
        h2 { color: #2c3e50; border-bottom: 1px solid #ccc; padding-bottom: 0.2em; }
        .section { background: #fff; border-radius: 8px; box-shadow: 0 2px 8px #eee; margin-bottom: 2em; padding: 1em 2em; }
        .item-list { margin: 0; padding: 0; list-style: none; }
        .item-list li { margin-bottom: 0.3em; }
        .subsection { margin-left: 1.5em; margin-bottom: 1em; }
        .label { font-weight: bold; color: #34495e; }
    </style>
</head>
<body>
    <h1>Personal Information: {{ name }}</h1>
    {% macro render_item(value) %}
        {% if value is mapping %}
            <ul class="item-list">
            {% for k, v in value.items() %}
                <li><span class="label">{{ k }}:</span> {{ render_item(v) }}</li>
            {% endfor %}
            </ul>
        {% elif value is iterable and value is not string %}
            <ul class="item-list">
            {% 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">
                <h2>{{ title }}</h2>
                {{ render_item(items) }}
            </div>
        {% endif %}
    {% endfor %}
</body>
</html>
