kjvstudy.org/kjvstudy_org/templates/family_tree_descendants.html

{% extends "base.html" %}

{% block title %}Descendants of {{ person.name }} - Family Tree - KJV Study{% endblock %}
{% block description %}All descendants of {{ person.name }} in the biblical genealogy.{% endblock %}

{% block head %}
<style>
.tree-header {
    position: relative;
    max-width: 55%;
    margin: 2rem 0;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--border-color-dark);
}

.tree-header::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -1px;
    width: 2.75rem;
    height: 1px;
    background: var(--gold);
}

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

.tree-subtitle {
    font-size: 1.2rem;
    color: var(--text-secondary);
    font-style: italic;
}

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

.descendants-tree {
    max-width: 55%;
    margin: 2rem 0;
}

/* Apparatus heading — small caps over a gold-tipped rule */
.descendants-tree > h2 {
    position: relative;
    font-size: 0.95rem !important;
    font-weight: 600;
    font-style: normal !important;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: var(--text-secondary) !important;
    margin: 0 0 1.25rem;
    padding-bottom: 0.6rem;
    border-bottom: 1px solid var(--border-color);
}

.descendants-tree > h2::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -1px;
    width: 2.75rem;
    height: 1px;
    background: var(--gold);
}

.tree-node {
    margin: 1rem 0 1rem 2rem;
    border-left: 2px solid var(--border-color-darker);
    padding-left: 1rem;
}

.tree-node-root {
    margin-left: 0;
    border-left: none;
    padding-left: 0;
}

.tree-node.kekule {
    border-left-color: var(--gold);
}

.person-name {
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: 0.25rem;
    color: var(--text-strong);
}

.person-name a {
    color: var(--link-color);
    text-decoration: none;
}

.person-name a:hover {
    color: var(--link-hover);
    text-decoration: underline;
}

.person-meta {
    font-size: 0.95rem;
    color: var(--text-secondary);
    margin-bottom: 0.5rem;
}

.child-count {
    font-size: 0.9rem;
    color: var(--text-tertiary);
    font-style: italic;
}

.navigation-links {
    max-width: 55%;
    margin: 2rem 0;
    padding-top: 1.25rem;
    border-top: 1px solid var(--border-color);
}

.navigation-links a {
    display: inline-block;
    margin: 0 0.6rem 0.6rem 0;
    padding: 0.45rem 0.9rem;
    background: var(--bg-elevated);
    border: 1px solid var(--border-color-dark);
    border-radius: 6px;
    color: var(--text-secondary);
    text-decoration: none;
    font-size: 0.9rem;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.navigation-links a:hover {
    background: var(--accent-softer);
    border-color: var(--accent);
    color: var(--accent-strong);
}

@media (max-width: 768px) {
    .tree-header,
    .intro-text,
    .descendants-tree,
    .navigation-links {
        max-width: 100%;
    }
}
</style>
{% endblock %}

{% block content %}
<div class="tree-header">
    <h1 class="tree-title">Descendants of {{ person.name }}</h1>
    {% if person.generation %}
    <p class="tree-subtitle">
        Generation {{ person.generation }} from Adam
    </p>
    {% endif %}
</div>

{% if descendants_tree %}
<div class="intro-text">
    <p><span class="newthought">This page shows</span> all known descendants of {{ person.name }} traced through the biblical genealogies. The tree displays multiple generations showing the lineage recorded in Scripture.</p>
</div>

<div class="descendants-tree">
    <h2>Descendant Tree</h2>

    {# Recursive macro to display descendants #}
    {% macro render_descendants(node, is_root=False) %}
        <div class="tree-node{% if is_root %} tree-node-root{% endif %}{% if node.kekule_number %} kekule{% endif %}">
            <div class="person-name">
                <a href="/family-tree/person/{{ node.id }}">{{ node.name }}</a>
            </div>
            {% if node.generation %}
            <div class="person-meta">
                Generation {{ node.generation }} from Adam
            </div>
            {% endif %}
            {% if node.child_count > 0 %}
            <div class="child-count">
                {{ node.child_count }} {% if node.child_count == 1 %}child{% else %}children{% endif %}
            </div>
            {% endif %}

            {% if node.children %}
                {% for child in node.children %}
                    {{ render_descendants(child) }}
                {% endfor %}
            {% endif %}
        </div>
    {% endmacro %}

    {{ render_descendants(descendants_tree, is_root=True) }}
</div>

{% else %}
<div class="intro-text">
    <p>No descendants found for {{ person.name }} in the biblical genealogies.</p>
</div>
{% endif %}

<div class="navigation-links">
    <a href="/family-tree/person/{{ person_id }}">← {{ person.name }}</a>
    <a href="/family-tree">Family Tree</a>
    {% if person.generation %}
    <a href="/family-tree/generation/{{ person.generation }}">Generation {{ person.generation }}</a>
    {% endif %}
</div>

{% include "partials/_tree_keyboard_nav.html" %}
{% endblock %}