kjvstudy.org/kjvstudy_org/templates/family_tree_generation.html

{% extends "base.html" %}

{% block title %}Generation {{ generation_num }} - Biblical Family Tree - KJV Study{% endblock %}
{% block description %}Generation {{ generation_num }} in the biblical genealogy from Adam to Jesus Christ.{% endblock %}

{% block head %}
<style>
.gen-header {
    max-width: 55%;
    margin-bottom: 1rem;
}

.gen-nav {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin: 1rem 0;
    padding: 0.75rem 0;
    border-bottom: 1px solid var(--border-color);
    max-width: 55%;
}

.gen-nav a {
    display: inline-block;
    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;
}

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

.gen-nav .nav-prev,
.gen-nav .nav-next {
    font-weight: 500;
}

.gen-nav .nav-spacer {
    flex: 1;
}

.gen-stats {
    max-width: 55%;
    margin: 1rem 0 1.5rem 0;
    padding: 0.75rem 1rem;
    background: var(--bg-elevated);
    border: 1px solid var(--border-color-dark);
    border-radius: 6px;
    font-size: 0.95rem;
    display: flex;
    gap: 2rem;
    flex-wrap: wrap;
}

.gen-stat {
    display: flex;
    gap: 0.5rem;
}

.gen-stat-label {
    color: var(--text-secondary);
}

.gen-stat-value {
    font-weight: 600;
    color: var(--text-strong);
}

.person-grid {
    max-width: 55%;
    display: grid;
    gap: 1rem;
}

@media (max-width: 768px) {
    .gen-header,
    .gen-nav,
    .gen-stats,
    .person-grid {
        max-width: 100%;
    }
}

.person-card {
    padding: 1rem 1.25rem;
    border: 1px solid var(--border-color-dark);
    border-radius: 6px;
    background: var(--bg-elevated);
    transition: box-shadow 0.15s ease, border-color 0.15s ease;
}

.person-card:hover {
    box-shadow: var(--shadow-soft);
    border-color: var(--accent);
}

.person-card.male {
    border-left: 3px solid var(--cat-law);
}

.person-card.female {
    border-left: 3px solid var(--cat-general);
}

.person-card.kekule {
    border-left-color: var(--gold);
    background: linear-gradient(to right, var(--gold-soft), var(--bg-elevated));
}

.person-card-header {
    display: flex;
    align-items: baseline;
    gap: 0.75rem;
    margin-bottom: 0.5rem;
}

.person-card-name {
    font-size: 1.2rem;
    font-weight: 600;
    margin: 0;
    color: var(--text-strong);
}

.person-card-name a {
    color: inherit;
    text-decoration: none;
}

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

.person-card-badge {
    font-size: 0.62rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    padding: 0.15rem 0.55rem;
    border-radius: 999px;
    background: var(--gold-soft);
    border: 1px solid var(--border-color-dark);
    color: var(--bronze);
}

.person-card-dates {
    font-size: 0.9rem;
    color: var(--text-secondary);
    margin-bottom: 0.5rem;
}

.person-card-details {
    font-size: 0.9rem;
    line-height: 1.6;
}

.person-card-details p {
    margin: 0.25rem 0;
}

.person-card-family {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-top: 0.5rem;
    padding-top: 0.5rem;
    border-top: 1px solid var(--border-color);
    font-size: 0.85rem;
}

.family-group {
    display: flex;
    gap: 0.35rem;
    align-items: baseline;
}

.family-label {
    color: var(--text-tertiary);
}

.family-links a {
    color: var(--text-secondary);
}

.person-card-verse {
    margin-top: 0.5rem;
    padding-top: 0.5rem;
    border-top: 1px solid var(--border-color);
    font-size: 0.85rem;
    color: var(--text-secondary);
    font-style: italic;
}

.person-card-verse a {
    color: var(--accent-strong);
}

.person-card-actions {
    margin-top: 0.75rem;
}

.person-card-actions a {
    font-size: 0.85rem;
    color: var(--accent-strong);
}
</style>
{% endblock %}

{% block content %}
<div class="gen-header">
    <h1>Generation {{ generation_num }}</h1>
    <p class="subtitle">{{ generation_people|length }} individual{% if generation_people|length != 1 %}s{% endif %} — {{ generation_num }} generation{% if generation_num != 1 %}s{% endif %} from Adam</p>
</div>

<nav class="gen-nav">
    {% if generation_num > 1 %}
    <a href="/family-tree/generation/{{ generation_num - 1 }}" class="nav-prev">← Gen {{ generation_num - 1 }}</a>
    {% endif %}
    <span class="nav-spacer"></span>
    <a href="/family-tree">Family Tree</a>
    <a href="/family-tree/interactive?person={{ generation_people[0] }}">Interactive</a>
    <span class="nav-spacer"></span>
    {% if generation_num < (generations.keys() | sort | last) %}
    <a href="/family-tree/generation/{{ generation_num + 1 }}" class="nav-next">Gen {{ generation_num + 1 }} →</a>
    {% endif %}
</nav>

{% set kekule_count = [] %}
{% set with_children = [] %}
{% set total_children = [] %}
{% for person_id in generation_people %}
    {% set person = family_tree_data[person_id] %}
    {% if person.kekule_number is not none %}
        {% set _ = kekule_count.append(1) %}
    {% endif %}
    {% if person.children|length > 0 %}
        {% set _ = with_children.append(1) %}
        {% for c in person.children %}
            {% set _ = total_children.append(1) %}
        {% endfor %}
    {% endif %}
{% endfor %}

<div class="gen-stats">
    <div class="gen-stat">
        <span class="gen-stat-label">People:</span>
        <span class="gen-stat-value">{{ generation_people|length }}</span>
    </div>
    {% if kekule_count|length > 0 %}
    <div class="gen-stat">
        <span class="gen-stat-label">In Christ's line:</span>
        <span class="gen-stat-value">{{ kekule_count|length }}</span>
    </div>
    {% endif %}
    {% if with_children|length > 0 %}
    <div class="gen-stat">
        <span class="gen-stat-label">With children:</span>
        <span class="gen-stat-value">{{ with_children|length }}</span>
    </div>
    {% endif %}
    {% if total_children|length > 0 %}
    <div class="gen-stat">
        <span class="gen-stat-label">Total offspring:</span>
        <span class="gen-stat-value">{{ total_children|length }}</span>
    </div>
    {% endif %}
</div>

{% set female_names = ['eve', 'sarah', 'rebekah', 'rachel', 'leah', 'ruth', 'mary', 'tamar', 'rahab', 'bathsheba', 'dinah', 'keturah', 'hagar', 'zilpah', 'bilhah', 'jochebed', 'miriam', 'deborah', 'hannah', 'abigail', 'esther', 'naomi', 'naamah', 'milcah', 'adah', 'zillah', 'asenath', 'basemath'] %}

<div class="person-grid">
    {% for person_id in generation_people %}
        {% set person = family_tree_data[person_id] %}
        {% set is_female = person.name|lower in female_names or (female_names | select('in', person.name|lower) | list | length > 0) %}
        <div class="person-card{% if person.kekule_number is not none %} kekule{% endif %}{% if is_female %} female{% else %} male{% endif %}">
            <div class="person-card-header">
                <h3 class="person-card-name">
                    <a href="/family-tree/person/{{ person_id }}">{{ person.name }}</a>
                </h3>
                {% if person.kekule_number is not none %}
                <span class="person-card-badge">Kekulé #{{ person.kekule_number }}</span>
                {% endif %}
            </div>

            {% if person.birth_year != "Unknown" or person.age_at_death != "Unknown" %}
            <div class="person-card-dates">
                {% if person.birth_year != "Unknown" %}Born {{ person.birth_year }}{% endif %}{% if person.age_at_death != "Unknown" %}{% if person.birth_year != "Unknown" %} · {% endif %}Lived {{ person.age_at_death }}{% endif %}
            </div>
            {% endif %}

            <div class="person-card-family">
                {% if person.spouse %}
                <div class="family-group">
                    <span class="family-label">Spouse:</span>
                    <span class="family-links">
                        {% 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 %}
                    </span>
                </div>
                {% endif %}

                {% if person.parents|length > 0 %}
                <div class="family-group">
                    <span class="family-label">Parents:</span>
                    <span class="family-links">
                        {% 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 %}, {% endif %}
                            {% endif %}
                        {% endfor %}
                    </span>
                </div>
                {% endif %}

                {% if person.children|length > 0 %}
                <div class="family-group">
                    <span class="family-label">Children:</span>
                    <span class="family-links">
                        {% 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 %} +{{ person.children|length - 5 }} more{% endif %}
                    </span>
                </div>
                {% endif %}
            </div>

            {% if person.verses and person.verses|length > 0 %}
            <div class="person-card-verse">
                {% set verse = person.verses[0] %}
                {% 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 %}
                        {{ verse.reference }}
                    {% endif %}
                {% else %}
                    {{ verse.reference }}
                {% endif %}
                — "{{ verse.text[:120] }}{% if verse.text|length > 120 %}...{% endif %}"
            </div>
            {% endif %}

            <div class="person-card-actions">
                <a href="/family-tree/person/{{ person_id }}">View full profile →</a>
            </div>
        </div>
    {% endfor %}
</div>

<nav class="gen-nav" style="margin-top: 2rem;">
    {% if generation_num > 1 %}
    <a href="/family-tree/generation/{{ generation_num - 1 }}" class="nav-prev">← Gen {{ generation_num - 1 }}</a>
    {% endif %}
    <span class="nav-spacer"></span>
    <a href="/family-tree">Family Tree</a>
    <span class="nav-spacer"></span>
    {% if generation_num < (generations.keys() | sort | last) %}
    <a href="/family-tree/generation/{{ generation_num + 1 }}" class="nav-next">Gen {{ generation_num + 1 }} →</a>
    {% endif %}
</nav>

<script>
(function() {
    const cards = Array.from(document.querySelectorAll('.person-card'));
    if (cards.length === 0) return;

    let selectedIndex = -1;

    function selectCard(index) {
        if (selectedIndex >= 0 && selectedIndex < cards.length) {
            cards[selectedIndex].style.outline = '';
            cards[selectedIndex].style.outlineOffset = '';
            cards[selectedIndex].classList.remove('selected');
        }
        selectedIndex = Math.max(0, Math.min(index, cards.length - 1));
        cards[selectedIndex].style.outline = '2px solid var(--accent)';
        cards[selectedIndex].style.outlineOffset = '2px';
        cards[selectedIndex].classList.add('selected');
        cards[selectedIndex].scrollIntoView({ behavior: 'auto', block: 'center' });
    }

    document.addEventListener('keydown', function(e) {
        if (e.target.tagName === 'INPUT' || e.target.tagName === 'TEXTAREA') return;
        if (KJVNav.sidebarActive) return;

        if (e.key === 'ArrowDown' || e.key === 'j') {
            e.preventDefault();
            if (KJVNav.isSelectionOffScreen(cards, selectedIndex)) {
                selectCard(KJVNav.findFirstVisibleIndex(cards));
            } else {
                selectCard(selectedIndex < 0 ? 0 : selectedIndex + 1);
            }
        } else if (e.key === 'ArrowUp' || e.key === 'k') {
            e.preventDefault();
            if (KJVNav.isSelectionOffScreen(cards, selectedIndex)) {
                selectCard(KJVNav.findFirstVisibleIndex(cards));
            } else if (selectedIndex <= 0) {
                selectCard(0);
            } else {
                selectCard(selectedIndex - 1);
            }
        } else if (e.key === 'ArrowLeft' || e.key === 'h') {
            e.preventDefault();
            // Go to previous generation or back
            {% if generation_num > 1 %}
            window.location.href = '/family-tree/generation/{{ generation_num - 1 }}';
            {% else %}
            history.back();
            {% endif %}
        } else if (e.key === 'ArrowRight' || e.key === 'l') {
            e.preventDefault();
            // Go to next generation
            {% if generation_num < (generations.keys() | sort | last) %}
            window.location.href = '/family-tree/generation/{{ generation_num + 1 }}';
            {% endif %}
        } else if (e.key === 'Enter' && selectedIndex >= 0) {
            e.preventDefault();
            const link = cards[selectedIndex].querySelector('.person-card-name a');
            if (link) window.location.href = link.href;
        } else if (e.key === 'Escape') {
            e.preventDefault();
            if (selectedIndex >= 0 && selectedIndex < cards.length) {
                cards[selectedIndex].style.outline = '';
                cards[selectedIndex].style.outlineOffset = '';
                cards[selectedIndex].classList.remove('selected');
            }
            selectedIndex = -1;
        }
    });
})();
</script>
{% endblock %}