{% extends "base.html" %}

{% block title %}Family Tree: {{ person.name }} - KJV Study{% endblock %}
{% block description %}{{ person.name }} in the biblical genealogy from Adam to Jesus Christ.{% endblock %}

{% block head %}
<style>
.person-header {
    max-width: 55%;
    margin: 2rem 0;
    padding-bottom: 1rem;
    border-bottom: 2px solid #111;
}

.person-title {
    font-size: 2.5rem;
    font-weight: 400;
    margin: 0 0 0.5rem 0;
    line-height: 1.2;
}

.person-subtitle {
    font-size: 1.2rem;
    color: #666;
    font-style: italic;
}

.person-vitals {
    max-width: 55%;
    margin: 1.5rem 0;
    font-size: 1.1rem;
    line-height: 1.8;
}

.person-vitals strong {
    font-weight: 600;
}

.relationships-section {
    max-width: 55%;
    margin: 2.5rem 0;
}

.relationship-list {
    margin: 1rem 0;
    line-height: 1.8;
}

.relationship-item {
    margin: 0.5rem 0;
}

.relationship-name {
    font-weight: 600;
}

.relationship-meta {
    font-size: 0.95rem;
    color: #666;
    font-style: italic;
}

.verses-section {
    max-width: 55%;
    margin: 2.5rem 0;
}

.verse-entry {
    margin: 1.5rem 0;
}

.verse-ref {
    font-weight: 600;
    margin-bottom: 0.25rem;
}

.verse-text {
    font-style: italic;
    color: #444;
    line-height: 1.8;
    padding-left: 1.5rem;
}

.navigation-links {
    max-width: 55%;
    margin: 2rem 0;
    padding-top: 1rem;
    border-top: 1px solid #ccc;
}

.navigation-links a {
    margin-right: 1.5rem;
}
</style>
{% endblock %}

{% block content %}
<div class="person-header">
    <h1 class="person-title">Family Tree: {{ person.name }}</h1>
    {% if person.generation or person.kekule_number is not none %}
    <p class="person-subtitle">
        {% if person.generation %}Generation {{ person.generation }} from Adam{% endif %}{% if person.kekule_number is not none %}{% if person.generation %} • {% endif %}Kekulé #{{ person.kekule_number }}{% endif %}
    </p>
    {% endif %}
</div>

<div class="person-vitals">
    {% if person.birth_year != "Unknown" %}
    <strong>Born:</strong> {{ person.birth_year }}.
    {% endif %}
    {% if person.death_year != "Unknown" %}
    <strong>Died:</strong> {{ person.death_year }}.
    {% endif %}
    {% if person.age_at_death != "Unknown" %}
    <strong>Age:</strong> {{ person.age_at_death }}.
    {% endif %}
    {% if person.spouse %}
    <strong>Spouse:</strong>
    {% set ns = namespace(spouse_id=None) %}
    {% for pid, p in family_tree_data.items() %}
        {% if p.name == person.spouse %}
            {% set ns.spouse_id = pid %}
        {% endif %}
    {% endfor %}
    {% if ns.spouse_id %}
        <a href="/family-tree/person/{{ ns.spouse_id }}">{{ person.spouse }}</a>.
    {% else %}
        {{ person.spouse }}.
    {% endif %}
    {% endif %}
</div>

{# Biography Section - for notable figures #}
{% if biography %}
<div class="relationships-section">
    <h2>Biography</h2>
    <p style="line-height: 1.8; font-size: 1.05rem;">{{ biography.summary }}</p>

    {% if biography.significance %}
    <div style="margin-top: 1.5rem;">
        <h3 style="font-size: 1.2rem; font-style: italic; margin-bottom: 0.5rem;">Biblical Significance</h3>
        <p style="line-height: 1.8; font-style: italic; color: var(--text-secondary);">{{ biography.significance }}</p>
    </div>
    {% endif %}
</div>
{% endif %}

{# Life Events Timeline #}
{% if biography and biography.key_events %}
<div class="relationships-section">
    <h2>Life Events</h2>
    <div style="border-left: 3px solid var(--border-color-darker); padding-left: 1.5rem; margin: 1rem 0;">
        {% for event in biography.key_events %}
        <div style="margin: 1.5rem 0;">
            <div style="font-weight: 600; color: var(--text-color);">
                Age {{ event.age }}{% if event.age == 0 %} (Birth){% endif %}
            </div>
            <div style="margin-top: 0.25rem; color: var(--text-secondary);">
                {{ event.event }}
            </div>
            {% if event.verse %}
            <div style="margin-top: 0.25rem; font-size: 0.9rem;">
                {% set ref_parts = event.verse.split(' ') %}
                {% if ref_parts|length >= 2 %}
                    {% set chapter_verse = ref_parts[-1] %}
                    {% if ':' in chapter_verse %}
                        {% set chapter = chapter_verse.split(':')[0] %}
                        {% set verse_part = chapter_verse.split(':')[1] %}
                        {% if '-' in verse_part %}
                            {% set verse_num = verse_part.split('-')[0] %}
                        {% else %}
                            {% set verse_num = verse_part %}
                        {% endif %}
                        {% set book = ' '.join(ref_parts[:-1]) %}
                        <a href="/book/{{ book }}/chapter/{{ chapter }}/verse/{{ verse_num }}">{{ event.verse }}</a>
                    {% else %}
                        <em>{{ event.verse }}</em>
                    {% endif %}
                {% else %}
                    <em>{{ event.verse }}</em>
                {% endif %}
            </div>
            {% endif %}
        </div>
        {% endfor %}
    </div>
</div>
{% endif %}

{# Family Diagram - Minimal Text Version #}
{% if person.parents|length > 0 or person.children|length > 0 or person.spouse %}
<div style="max-width: 55%; margin: 1.5rem 0; padding: 0.75rem 0; border-left: 3px solid #666; padding-left: 1rem; font-size: 0.95rem; line-height: 2;">
    {% if person.parents|length > 0 %}
    <div style="margin-bottom: 0.5rem;">
        {% for parent_id in person.parents %}
            <a href="/family-tree/person/{{ parent_id }}" style="font-style: italic; color: #666;">{{ family_tree_data[parent_id].name }}</a>{% if not loop.last %} & {% endif %}
        {% endfor %}
        <span style="color: #999;">↓</span>
    </div>
    {% endif %}

    <div style="margin: 0.5rem 0;">
        <strong>{{ person.name }}</strong>{% if person.spouse %}
        {% set ns = namespace(spouse_id=None) %}
        {% for pid, p in family_tree_data.items() %}
            {% if p.name == person.spouse %}
                {% set ns.spouse_id = pid %}
            {% endif %}
        {% endfor %}
        & {% if ns.spouse_id %}<a href="/family-tree/person/{{ ns.spouse_id }}" style="font-style: italic;">{{ person.spouse }}</a>{% else %}<span style="font-style: italic;">{{ person.spouse }}</span>{% endif %}{% endif %}
    </div>

    {% if person.children|length > 0 %}
    <div style="margin-top: 0.5rem;">
        <span style="color: #999;">↓</span>
        {% for child_id in person.children[:8] %}
            <a href="/family-tree/person/{{ child_id }}" style="font-style: italic; color: #666;">{{ family_tree_data[child_id].name }}</a>{% if not loop.last %}, {% endif %}
        {% endfor %}{% if person.children|length > 8 %}, and {{ person.children|length - 8 }} more{% endif %}
    </div>
    {% endif %}

    {% if person.siblings|length > 0 %}
    <div style="margin-top: 0.75rem; padding-top: 0.5rem; border-top: 1px solid #ddd; font-size: 0.85rem; color: #666;">
        Siblings:
        {% for sibling_id in person.siblings[:8] %}
            <a href="/family-tree/person/{{ sibling_id }}" style="color: #666;">{{ family_tree_data[sibling_id].name }}</a>{% if not loop.last %}, {% endif %}
        {% endfor %}{% if person.siblings|length > 8 %}, and {{ person.siblings|length - 8 }} more{% endif %}
    </div>
    {% endif %}
</div>
{% endif %}

{% if person.parents|length > 0 %}
<div class="relationships-section">
    <h2>Parents</h2>
    <div class="relationship-list">
        {% for parent_id in person.parents %}
            {% if parent_id in family_tree_data %}
            <div class="relationship-item">
                <span class="relationship-name"><a href="/family-tree/person/{{ parent_id }}">{{ family_tree_data[parent_id].name }}</a></span>
                {% if family_tree_data[parent_id].generation or family_tree_data[parent_id].kekule_number is not none or family_tree_data[parent_id].age_at_death != "Unknown" %}
                <span class="relationship-meta">
                    {% if family_tree_data[parent_id].generation %}generation {{ family_tree_data[parent_id].generation }}{% endif %}{% if family_tree_data[parent_id].kekule_number is not none %}{% if family_tree_data[parent_id].generation %}, {% endif %}Kekulé #{{ family_tree_data[parent_id].kekule_number }}{% endif %}{% if family_tree_data[parent_id].age_at_death != "Unknown" %}{% if family_tree_data[parent_id].generation or family_tree_data[parent_id].kekule_number is not none %}, {% endif %}lived {{ family_tree_data[parent_id].age_at_death }}{% endif %}
                </span>
                {% endif %}
            </div>
            {% endif %}
        {% endfor %}
    </div>
</div>
{% endif %}

{% if person.spouse %}
<div class="relationships-section">
    <h2>Spouse</h2>
    <div class="relationship-list">
        {% set ns = namespace(spouse_id=None, spouse_data=None) %}
        {% for pid, p in family_tree_data.items() %}
            {% if p.name == person.spouse %}
                {% set ns.spouse_id = pid %}
                {% set ns.spouse_data = p %}
            {% endif %}
        {% endfor %}
        <div class="relationship-item">
            {% if ns.spouse_id %}
                <span class="relationship-name"><a href="/family-tree/person/{{ ns.spouse_id }}">{{ person.spouse }}</a></span>
                {% if ns.spouse_data and (ns.spouse_data.generation or ns.spouse_data.kekule_number is not none or ns.spouse_data.age_at_death != "Unknown") %}
                <span class="relationship-meta">
                    {% if ns.spouse_data.generation %}generation {{ ns.spouse_data.generation }}{% endif %}{% if ns.spouse_data.kekule_number is not none %}{% if ns.spouse_data.generation %}, {% endif %}Kekulé #{{ ns.spouse_data.kekule_number }}{% endif %}{% if ns.spouse_data.age_at_death != "Unknown" %}{% if ns.spouse_data.generation or ns.spouse_data.kekule_number is not none %}, {% endif %}lived {{ ns.spouse_data.age_at_death }}{% endif %}
                </span>
                {% endif %}
            {% else %}
                <span class="relationship-name">{{ person.spouse }}</span>
                <span class="relationship-meta" style="font-style: italic; color: #999;">not in family tree data</span>
            {% endif %}
        </div>
    </div>
</div>
{% endif %}

{% if person.siblings|length > 0 %}
<div class="relationships-section">
    <h2>Siblings ({{ person.siblings|length }})</h2>
    <div class="relationship-list">
        {% for sibling_id in person.siblings %}
            {% if sibling_id in family_tree_data %}
            <div class="relationship-item">
                <span class="relationship-name"><a href="/family-tree/person/{{ sibling_id }}">{{ family_tree_data[sibling_id].name }}</a></span>
                {% if family_tree_data[sibling_id].generation or family_tree_data[sibling_id].kekule_number is not none or family_tree_data[sibling_id].age_at_death != "Unknown" %}
                <span class="relationship-meta">
                    {% if family_tree_data[sibling_id].generation %}generation {{ family_tree_data[sibling_id].generation }}{% endif %}{% if family_tree_data[sibling_id].kekule_number is not none %}{% if family_tree_data[sibling_id].generation %}, {% endif %}Kekulé #{{ family_tree_data[sibling_id].kekule_number }}{% endif %}{% if family_tree_data[sibling_id].age_at_death != "Unknown" %}{% if family_tree_data[sibling_id].generation or family_tree_data[sibling_id].kekule_number is not none %}, {% endif %}lived {{ family_tree_data[sibling_id].age_at_death }}{% endif %}
                </span>
                {% endif %}
            </div>
            {% endif %}
        {% endfor %}
    </div>
</div>
{% endif %}

{% if person.children|length > 0 %}
<div class="relationships-section">
    <h2>Children ({{ person.children|length }})</h2>
    <div class="relationship-list">
        {% for child_id in person.children %}
            {% if child_id in family_tree_data %}
            <div class="relationship-item">
                <span class="relationship-name"><a href="/family-tree/person/{{ child_id }}">{{ family_tree_data[child_id].name }}</a></span>
                {% if family_tree_data[child_id].generation or family_tree_data[child_id].kekule_number is not none or family_tree_data[child_id].age_at_death != "Unknown" %}
                <span class="relationship-meta">
                    {% if family_tree_data[child_id].generation %}generation {{ family_tree_data[child_id].generation }}{% endif %}{% if family_tree_data[child_id].kekule_number is not none %}{% if family_tree_data[child_id].generation %}, {% endif %}Kekulé #{{ family_tree_data[child_id].kekule_number }}{% endif %}{% if family_tree_data[child_id].age_at_death != "Unknown" %}{% if family_tree_data[child_id].generation or family_tree_data[child_id].kekule_number is not none %}, {% endif %}lived {{ family_tree_data[child_id].age_at_death }}{% endif %}
                </span>
                {% endif %}
            </div>
            {% endif %}
        {% endfor %}
    </div>
</div>
{% endif %}

{% if person.verses %}
<div class="verses-section">
    <h2>Related Scriptures</h2>
    {% for verse in person.verses %}
    <div class="verse-entry">
        <div class="verse-ref">
            {% if verse.reference %}
                {% set ref_parts = verse.reference.split(' ') %}
                {% if ref_parts|length >= 2 %}
                    {% set chapter_verse = ref_parts[-1] %}
                    {% if ':' in chapter_verse %}
                        {% set chapter = chapter_verse.split(':')[0] %}
                        {% set verse_part = chapter_verse.split(':')[1] %}
                        {% if '-' in verse_part %}
                            {% set verse_num = verse_part.split('-')[0] %}
                        {% else %}
                            {% set verse_num = verse_part %}
                        {% endif %}
                        {% set book = ' '.join(ref_parts[:-1]) %}
                        <a href="/book/{{ book }}/chapter/{{ chapter }}/verse/{{ verse_num }}">{{ verse.reference }}</a>
                    {% else %}
                        {% set book = ' '.join(ref_parts[:-1]) %}
                        {% set chapter = ref_parts[-1] %}
                        <a href="/book/{{ book }}/chapter/{{ chapter }}">{{ verse.reference }}</a>
                    {% endif %}
                {% else %}
                    {{ verse.reference if verse.reference else verse }}
                {% endif %}
            {% elif verse is string %}
                {{ verse }}
            {% else %}
                {{ verse.text if verse.text else '' }}
            {% endif %}
        </div>
        {% if verse.text %}
        <div class="verse-text">{{ verse.text }}</div>
        {% endif %}
    </div>
    {% endfor %}
</div>
{% endif %}

<div class="navigation-links">
    <a href="/family-tree">← Family Tree</a>
    {% if person.generation %}
    <a href="/family-tree/generation/{{ person.generation }}">Generation {{ person.generation }}</a>
    {% endif %}
    {% if person.parents|length > 0 %}
    <a href="/family-tree/person/{{ person_id }}/ancestors">View Ancestors</a>
    {% endif %}
    {% if person.children|length > 0 %}
    <a href="/family-tree/person/{{ person_id }}/descendants">View Descendants</a>
    {% endif %}
</div>
{% endblock %}