{% extends "base.html" %}

{% block title %}Biblical Family Tree - KJV Study{% endblock %}
{% block description %}Explore biblical genealogies from Adam to Jesus Christ.{% endblock %}

{% block head %}
<style>
/* Compact the opening sections */
section:first-of-type {
    margin-top: 1rem;
}

section:nth-of-type(2),
section:nth-of-type(3) {
    margin-top: 1rem;
    padding-top: 0;
    border-top: none;
}

.stats-line {
    max-width: 55%;
    margin: 1rem 0;
    padding: 0.75rem 0;
    border-top: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
    font-size: 1.1rem;
}

.stat-item {
    display: inline;
    margin-right: 2rem;
}

.stat-number {
    font-family: et-book-roman-old-style;
    font-weight: 600;
}

.generation-section {
    max-width: 55%;
    margin: 1.5rem 0;
}

.generation-header {
    margin-bottom: 0.5rem;
}

.generation-number {
    font-family: et-book-roman-old-style;
    font-size: 1.2rem;
    font-weight: 600;
}

.people-inline {
    font-size: 1.1rem;
    line-height: 1.8;
}

.person-entry {
    max-width: 55%;
    margin: 1.5rem 0;
}

.person-name {
    font-size: 1.5rem;
    font-weight: 600;
    margin-bottom: 0.25rem;
}

.person-life {
    font-style: italic;
    color: #666;
    margin-bottom: 0.5rem;
}

.person-info {
    margin: 0.5rem 0;
    line-height: 1.8;
}

.search-form {
    max-width: 55%;
    margin: 0.5rem 0;
}

.search-form input {
    width: 100%;
    padding: 0.5rem;
    font-size: 1rem;
    border: 1px solid #ccc;
    font-family: inherit;
}

.search-form input:focus {
    outline: none;
    border-color: #666;
}
</style>
{% endblock %}

{% block content %}
<h1>Biblical Family Tree</h1>
<p class="subtitle">From Adam to Jesus Christ</p>

<section>
    <p>The Bible contains detailed genealogies that trace God's plan through specific family lines, culminating in the birth of Jesus Christ. This record spans from the creation of Adam through countless generations to the birth of our Lord.</p>
</section>

<section>
    <div class="search-form">
        <form method="get" action="/family-tree/search">
            <input
                type="text"
                name="q"
                placeholder="Search for a person..."
                autocomplete="off"
            >
        </form>
    </div>
</section>

{% if family_tree_data and generations %}
    <section>
        <h2>Overview</h2>
        <div class="stats-line">
            <span class="stat-item"><span class="stat-number">{{ family_tree_data|length }}</span> individuals recorded</span>
            <span class="stat-item"><span class="stat-number">{{ generations|length }}</span> generations from Adam</span>
            {% set people_with_age = [] %}
            {% for person_id, person in family_tree_data.items() %}
                {% if person.age_at_death != "Unknown" and "years" in person.age_at_death %}
                    {% set _ = people_with_age.append(person) %}
                {% endif %}
            {% endfor %}
            <span class="stat-item"><span class="stat-number">{{ people_with_age|length }}</span> with recorded ages</span>
        </div>
    </section>

    <section>
        <h2>Quick Links</h2>
        <p>
            <a href="/family-tree/lineage">View the Messianic Lineage</a> — A visual genealogy showing the direct paternal line from Adam to Jesus Christ.
        </p>
    </section>

    <section>
        <h2>The Generations</h2>

        {% for gen_num in generations.keys() | sort %}
        <div class="generation-section">
            <div class="generation-header">
                <h3><span class="generation-number">Generation {{ gen_num }}.</span> <a href="/family-tree/generation/{{ gen_num }}">{{ generations[gen_num]|length }} individual{% if generations[gen_num]|length != 1 %}s{% endif %}</a></h3>
            </div>
            <p class="people-inline">
                {% for person_id in generations[gen_num][:20] %}
                    <a href="/family-tree/person/{{ person_id }}">{{ family_tree_data[person_id].name }}</a>{% if not loop.last %}, {% endif %}
                {% endfor %}{% if generations[gen_num]|length > 20 %}, and {{ generations[gen_num]|length - 20 }} others{% endif %}.
            </p>
        </div>
        {% endfor %}
    </section>

    <section>
        <h2>Notable Figures</h2>

        {% set notable = ["Adam", "Noah", "Abraham", "Isaac", "Jacob", "Joseph", "Moses", "David", "Solomon", "Jesus"] %}
        {% for person_id, person in family_tree_data.items() %}
            {% if person.name in notable %}
            <div class="person-entry">
                <div class="person-name">
                    <a href="/family-tree/person/{{ person_id }}">{{ person.name }}</a>
                </div>

                <div class="person-life">
                    {% if person.generation %}Generation {{ person.generation }}{% endif %}{% if person.kekule_number is not none %} • Kekulé #{{ person.kekule_number }}{% endif %}{% if person.birth_year != "Unknown" %} • born {{ person.birth_year }}{% endif %}{% if person.age_at_death != "Unknown" %} • lived {{ person.age_at_death }}{% endif %}
                </div>

                <div class="person-info">
                    {% if person.spouse %}
                        Married to {{ person.spouse }}.
                    {% endif %}
                    {% if person.parents|length > 0 %}
                        {% if person.spouse %}{% endif %}
                        Child of
                        {% for parent_id in person.parents %}
                            {% if parent_id in family_tree_data %}<a href="/family-tree/person/{{ parent_id }}">{{ family_tree_data[parent_id].name }}</a>{% if not loop.last %} and {% endif %}{% endif %}
                        {% endfor %}.
                    {% endif %}
                    {% if person.children|length > 0 %}
                        Father of
                        {% for child_id in person.children[:5] %}
                            {% if child_id in family_tree_data %}<a href="/family-tree/person/{{ child_id }}">{{ family_tree_data[child_id].name }}</a>{% if not loop.last %}, {% endif %}{% endif %}
                        {% endfor %}{% if person.children|length > 5 %}, and {{ person.children|length - 5 }} others{% endif %}.
                    {% endif %}
                </div>

                {% if person.verses %}
                <p>
                    {% for verse in person.verses[:2] %}
                        {% 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>{% if not loop.last %}; {% endif %}
                            {% endif %}
                        {% endif %}
                    {% endfor %}
                </p>
                {% endif %}
            </div>
            {% endif %}
        {% endfor %}
    </section>
{% else %}
    <section>
        <p>Family tree data could not be loaded.</p>
    </section>
{% endif %}
{% endblock %}