{% 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>
{% 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'] %}

.family-tree-page {
    max-width: 55%;
}

.page-header {
    margin-bottom: 1.5rem;
}

.page-header h1 {
    margin-bottom: 0.25rem;
}

.page-header .subtitle {
    color: #666;
    margin: 0;
}

.page-intro {
    margin-bottom: 1.5rem;
    line-height: 1.8;
}

/* Search card */
.search-card {
    padding: 1rem 1.25rem;
    border: 1px solid #ddd;
    border-radius: 6px;
    margin-bottom: 1.5rem;
    background: #fff;
    max-width: 320px;
}

.search-card h2 {
    font-size: 1rem;
    margin: 0 0 0.75rem 0;
    color: #333;
}

.search-form {
    position: relative;
}

.search-form input {
    width: 100%;
    padding: 0.6rem 0.75rem;
    font-size: 1rem;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-family: inherit;
    box-sizing: border-box;
}

.search-form input:focus {
    outline: none;
    border-color: #4a7c59;
    box-shadow: 0 0 3px rgba(74, 124, 89, 0.3);
}

.search-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: #ffffff;
    border: 1px solid #ccc;
    border-top: none;
    border-radius: 0 0 4px 4px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    max-height: 280px;
    overflow-y: auto;
    display: none;
    z-index: 10;
}

.search-dropdown.open {
    display: block;
}

.search-dropdown button {
    display: block;
    width: 100%;
    padding: 0.5rem 0.75rem;
    border: none;
    background: transparent;
    text-align: left;
    font-size: 0.95rem;
    cursor: pointer;
    font-family: inherit;
}

.search-dropdown button:hover,
.search-dropdown button.active {
    background: #f5f5f5;
}

/* Feature cards */
.feature-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.feature-card {
    padding: 1rem 1.25rem;
    border: 1px solid #ddd;
    border-radius: 6px;
    background: #fff;
    transition: box-shadow 0.15s ease, border-color 0.15s ease;
}

.feature-card:hover {
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    border-color: #ccc;
}

.feature-card h3 {
    font-size: 1.1rem;
    margin: 0 0 0.5rem 0;
}

.feature-card h3 a {
    color: #4a7c59;
    text-decoration: none;
}

.feature-card h3 a:hover {
    text-decoration: underline;
}

.feature-card p {
    font-size: 0.9rem;
    color: #666;
    margin: 0;
    line-height: 1.5;
}

/* Stats card */
.stats-card {
    padding: 1rem 1.25rem;
    border: 1px solid #ddd;
    border-radius: 6px;
    margin-bottom: 1.5rem;
    background: #fff;
}

.stats-card h2 {
    font-size: 1.1rem;
    margin: 0 0 1rem 0;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid #eee;
    color: #333;
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.75rem 1.5rem;
}

.stat-item {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: 0.35rem 0;
}

.stat-label {
    color: #666;
    font-size: 0.9rem;
}

.stat-value {
    font-weight: 600;
    color: #333;
}

.stat-value a {
    color: #4a7c59;
}

/* Generation cards */
.section-card {
    padding: 1rem 1.25rem;
    border: 1px solid #ddd;
    border-radius: 6px;
    margin-bottom: 1rem;
    background: #fff;
}

.section-card h2 {
    font-size: 1.1rem;
    margin: 0 0 0.75rem 0;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid #eee;
    color: #333;
}

.generation-grid {
    display: grid;
    gap: 0.75rem;
}

.gen-card {
    display: flex;
    align-items: baseline;
    gap: 0.75rem;
    padding: 0.6rem 0.75rem;
    border: 1px solid #eee;
    border-radius: 4px;
    background: #fafafa;
    transition: background 0.15s ease;
}

.gen-card:hover {
    background: #f5f5f5;
}

.gen-card-num {
    font-weight: 600;
    min-width: 40px;
    color: #4a7c59;
}

.gen-card-num a {
    color: inherit;
    text-decoration: none;
}

.gen-card-num a:hover {
    text-decoration: underline;
}

.gen-card-count {
    font-size: 0.85rem;
    color: #888;
    min-width: 90px;
}

.gen-card-people {
    flex: 1;
    font-size: 0.9rem;
    line-height: 1.6;
}

.gen-card-people a {
    color: #555;
}

/* Notable figures grid */
.notable-grid {
    display: grid;
    gap: 0.75rem;
}

.person-card {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    padding: 0.75rem 1rem;
    border: 1px solid #eee;
    border-radius: 4px;
    background: #fafafa;
    transition: background 0.15s ease;
}

.person-card:hover {
    background: #f5f5f5;
}

.person-card.male {
    border-left: 3px solid #3b6ea5;
}

.person-card.female {
    border-left: 3px solid #a55b80;
}

.person-card.kekule {
    border-left-color: #d4af37;
    background: linear-gradient(to right, #fffde7, #fafafa);
}

.person-card-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.person-card-name {
    font-size: 1.1rem;
    font-weight: 600;
}

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

.person-card-name a:hover {
    text-decoration: underline;
}

.person-card-badge {
    font-size: 0.7rem;
    padding: 0.1rem 0.4rem;
    border-radius: 2px;
    background: #d4af37;
    color: #fff;
}

.person-card-meta {
    font-size: 0.85rem;
    color: #666;
}

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

.person-card-details a {
    color: #4a7c59;
}

.person-card-verse {
    font-size: 0.85rem;
    color: #666;
    font-style: italic;
    margin-top: 0.25rem;
}

.person-card-verse a {
    color: #4a7c59;
}

@media (max-width: 768px) {
    .family-tree-page {
        max-width: 100%;
    }
    .feature-grid {
        grid-template-columns: 1fr;
    }
    .stats-grid {
        grid-template-columns: 1fr;
    }
}

/* Dark mode */
[data-theme="dark"] .search-card,
[data-theme="dark"] .feature-card,
[data-theme="dark"] .stats-card,
[data-theme="dark"] .section-card {
    background: #1a1a1a;
    border-color: #333;
}

[data-theme="dark"] .search-card h2,
[data-theme="dark"] .stats-card h2,
[data-theme="dark"] .section-card h2 {
    color: #e0e0e0;
    border-bottom-color: #333;
}

[data-theme="dark"] .search-form input {
    background: #2a2a2a;
    border-color: #444;
    color: #e0e0e0;
}

[data-theme="dark"] .search-form input:focus {
    border-color: #4a7c59;
}

[data-theme="dark"] .search-dropdown {
    background: #2a2a2a;
    border-color: #444;
}

[data-theme="dark"] .search-dropdown button {
    color: #e0e0e0;
}

[data-theme="dark"] .search-dropdown button:hover,
[data-theme="dark"] .search-dropdown button.active {
    background: #333;
}

[data-theme="dark"] .feature-card:hover {
    border-color: #555;
}

[data-theme="dark"] .feature-card h3 a {
    color: #6b9b7a;
}

[data-theme="dark"] .feature-card p {
    color: #aaa;
}

[data-theme="dark"] .stat-label {
    color: #aaa;
}

[data-theme="dark"] .stat-value {
    color: #e0e0e0;
}

[data-theme="dark"] .gen-card {
    background: #252525;
    border-color: #333;
}

[data-theme="dark"] .gen-card:hover {
    background: #2a2a2a;
}

[data-theme="dark"] .gen-card-count {
    color: #888;
}

[data-theme="dark"] .gen-card-people a {
    color: #bbb;
}

[data-theme="dark"] .person-card {
    background: #252525;
    border-color: #333;
}

[data-theme="dark"] .person-card:hover {
    background: #2a2a2a;
}

[data-theme="dark"] .person-card.kekule {
    background: linear-gradient(to right, #2a2a1a, #252525);
}

[data-theme="dark"] .person-card-name {
    color: #e0e0e0;
}

[data-theme="dark"] .person-card-meta {
    color: #888;
}

[data-theme="dark"] .person-card-details {
    color: #bbb;
}

[data-theme="dark"] .person-card-verse {
    color: #888;
}

[data-theme="dark"] .page-header .subtitle {
    color: #888;
}
</style>
{% endblock %}

{% block content %}
{% 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="family-tree-page">
    <div class="page-header">
        <h1>Biblical Family Tree</h1>
        <p class="subtitle">From Adam to Jesus Christ</p>
    </div>

    <p class="page-intro">
        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>

    <!-- Search -->
    <div class="search-card">
        <h2>Find a Person</h2>
        <div class="search-form">
            <form method="get" action="/family-tree/search" id="family-tree-search-form">
                <input
                    type="text"
                    name="q"
                    placeholder="Search for a person..."
                    autocomplete="off"
                    autocorrect="off"
                    autocapitalize="off"
                    spellcheck="false"
                    data-form-type="other"
                    id="family-tree-search-input"
                >
            </form>
            <div class="search-dropdown" id="family-tree-search-dropdown"></div>
        </div>
    </div>

    <!-- Feature Cards -->
    <div class="feature-grid">
        <div class="feature-card">
            <h3><a href="/family-tree/interactive">Interactive Tree</a></h3>
            <p>Explore the genealogy with a collapsible text-based tree. Expand and collapse branches, search for any person, and navigate with keyboard shortcuts.</p>
        </div>
        <div class="feature-card">
            <h3><a href="/family-tree/lineage">Messianic Lineage</a></h3>
            <p>View the direct paternal line from Adam to Jesus Christ in a vertical genealogy chart showing each generation.</p>
        </div>
    </div>

{% if family_tree_data and generations %}
    <!-- Statistics -->
    <div class="stats-card">
        <h2>Overview</h2>
        <div class="stats-grid">
            <div class="stat-item">
                <span class="stat-label">Total People:</span>
                <span class="stat-value" id="stat-total-people">{{ family_tree_data|length }}</span>
            </div>
            <div class="stat-item">
                <span class="stat-label">Total Generations:</span>
                <span class="stat-value" id="stat-total-generations">{{ generations|length }}</span>
            </div>
            <div class="stat-item">
                <span class="stat-label">Longest Lived:</span>
                <span class="stat-value" id="stat-longest-lived">Loading...</span>
            </div>
            <div class="stat-item">
                <span class="stat-label">Most Children:</span>
                <span class="stat-value" id="stat-most-children">Loading...</span>
            </div>
            <div class="stat-item">
                <span class="stat-label">Most Siblings:</span>
                <span class="stat-value" id="stat-most-siblings">Loading...</span>
            </div>
            <div class="stat-item">
                <span class="stat-label">Close Family Marriages:</span>
                <span class="stat-value" id="stat-close-marriages">Loading...</span>
            </div>
        </div>
    </div>

    <!-- Generations -->
    <div class="section-card">
        <h2>The Generations</h2>
        <div class="generation-grid">
            {% for gen_num in generations.keys() | sort %}
            <div class="gen-card">
                <div class="gen-card-num">
                    <a href="/family-tree/generation/{{ gen_num }}">Gen {{ gen_num }}</a>
                </div>
                <div class="gen-card-count">{{ generations[gen_num]|length }} person{% if generations[gen_num]|length != 1 %}s{% endif %}</div>
                <div class="gen-card-people">
                    {% for person_id in generations[gen_num][:8] %}
                        <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 > 8 %}, +{{ generations[gen_num]|length - 8 }} more{% endif %}
                </div>
            </div>
            {% endfor %}
        </div>
    </div>

    <!-- Notable Figures -->
    <div class="section-card">
        <h2>Notable Figures</h2>
        <div class="notable-grid">
            {% 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 %}
                {% 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{% elif is_female %} female{% else %} male{% endif %}">
                    <div class="person-card-header">
                        <span class="person-card-name">
                            <a href="/family-tree/person/{{ person_id }}">{{ person.name }}</a>
                        </span>
                        {% if person.kekule_number is not none %}
                        <span class="person-card-badge">Kekulé #{{ person.kekule_number }}</span>
                        {% endif %}
                    </div>

                    <div class="person-card-meta">
                        {% if person.generation %}Generation {{ person.generation }}{% 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-card-details">
                        {% if person.spouse %}
                            Married to {{ person.spouse }}.
                        {% endif %}
                        {% if person.parents|length > 0 %}
                            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[:3] %}
                                {% 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 > 3 %}, +{{ person.children|length - 3 }} more{% endif %}.
                        {% endif %}
                    </div>

                    {% if person.verses %}
                    <div class="person-card-verse">
                        {% for verse in person.verses[:1] %}
                            {% 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>
                                {% endif %}
                            {% endif %}
                        {% endfor %}
                    </div>
                    {% endif %}
                </div>
                {% endif %}
            {% endfor %}
        </div>
    </div>
{% else %}
    <div class="section-card">
        <p>Family tree data could not be loaded.</p>
    </div>
{% endif %}
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    // Fetch and display family tree statistics
    fetch('/api/family-tree/stats')
        .then(response => response.json())
        .then(data => {
            // Update the statistics
            document.getElementById('stat-total-people').textContent = data.total_people;
            document.getElementById('stat-total-generations').textContent = data.total_generations;

            // Longest lived person
            if (data.longest_lived && data.longest_lived.value > 0) {
                const personName = data.longest_lived.name;
                const personId = data.longest_lived.person_id;
                document.getElementById('stat-longest-lived').innerHTML =
                    `<a href="/family-tree/person/${personId}">${personName}</a> (${data.longest_lived.value} yrs)`;
            } else {
                document.getElementById('stat-longest-lived').textContent = '—';
            }

            // Most children
            if (data.most_children && data.most_children.value > 0) {
                const personName = data.most_children.name;
                const personId = data.most_children.person_id;
                document.getElementById('stat-most-children').innerHTML =
                    `<a href="/family-tree/person/${personId}">${personName}</a> (${data.most_children.value})`;
            } else {
                document.getElementById('stat-most-children').textContent = '—';
            }

            // Most siblings
            if (data.most_siblings && data.most_siblings.value > 0) {
                const personName = data.most_siblings.name;
                const personId = data.most_siblings.person_id;
                document.getElementById('stat-most-siblings').innerHTML =
                    `<a href="/family-tree/person/${personId}">${personName}</a> (${data.most_siblings.value})`;
            } else {
                document.getElementById('stat-most-siblings').textContent = '—';
            }

            // Close family marriages
            if (data.close_family_marriages !== undefined) {
                document.getElementById('stat-close-marriages').textContent = data.close_family_marriages;
            } else {
                document.getElementById('stat-close-marriages').textContent = '—';
            }
        })
        .catch(error => {
            console.error('Error loading family tree statistics:', error);
            document.getElementById('stat-longest-lived').textContent = '—';
            document.getElementById('stat-most-children').textContent = '—';
            document.getElementById('stat-most-siblings').textContent = '—';
            document.getElementById('stat-close-marriages').textContent = '—';
        });

    // Search functionality
    const names = {{ person_names|default([])|tojson }};
    const input = document.getElementById('family-tree-search-input');
    const dropdown = document.getElementById('family-tree-search-dropdown');
    const form = document.getElementById('family-tree-search-form');

    if (!input || !dropdown || !form || names.length === 0) {
        return;
    }

    let filtered = [];
    let activeIndex = -1;

    function hideDropdown() {
        dropdown.classList.remove('open');
        dropdown.innerHTML = '';
        filtered = [];
        activeIndex = -1;
    }

    function renderDropdown(items) {
        if (!items.length) {
            hideDropdown();
            return;
        }

        dropdown.innerHTML = items
            .map((name, idx) => `<button type="button" data-index="${idx}">${name}</button>`)
            .join('');
        dropdown.classList.add('open');
        activeIndex = -1;
    }

    function setActive(index) {
        const buttons = dropdown.querySelectorAll('button');
        buttons.forEach(btn => btn.classList.remove('active'));
        if (buttons[index]) {
            buttons[index].classList.add('active');
        }
    }

    function chooseName(name) {
        input.value = name;
        hideDropdown();
        form.submit();
    }

    input.addEventListener('input', function() {
        const query = input.value.trim().toLowerCase();
        if (!query) {
            hideDropdown();
            return;
        }
        filtered = names.filter(name => name.toLowerCase().includes(query)).slice(0, 8);
        renderDropdown(filtered);
    });

    input.addEventListener('keydown', function(event) {
        if (!dropdown.classList.contains('open')) {
            return;
        }
        if (event.key === 'ArrowDown') {
            event.preventDefault();
            activeIndex = (activeIndex + 1) % filtered.length;
            setActive(activeIndex);
        } else if (event.key === 'ArrowUp') {
            event.preventDefault();
            activeIndex = (activeIndex - 1 + filtered.length) % filtered.length;
            setActive(activeIndex);
        } else if (event.key === 'Enter') {
            if (activeIndex >= 0 && filtered[activeIndex]) {
                event.preventDefault();
                chooseName(filtered[activeIndex]);
            }
        } else if (event.key === 'Escape') {
            hideDropdown();
        }
    });

    dropdown.addEventListener('mousedown', function(event) {
        const button = event.target.closest('button');
        if (!button) {
            return;
        }
        const index = Number(button.dataset.index);
        if (!Number.isNaN(index) && filtered[index]) {
            chooseName(filtered[index]);
        }
    });

    document.addEventListener('click', function(event) {
        if (!dropdown.contains(event.target) && event.target !== input) {
            hideDropdown();
        }
    });

    // Keyboard navigation for page elements
    const featureCards = Array.from(document.querySelectorAll('.feature-card'));
    const genCards = Array.from(document.querySelectorAll('.gen-card'));
    const personCards = Array.from(document.querySelectorAll('.person-card'));

    // Combine all navigable items
    const allItems = featureCards.concat(genCards).concat(personCards);
    if (allItems.length === 0) return;

    let selectedIndex = -1;

    // Define section boundaries
    const featureEnd = featureCards.length;
    const genEnd = featureEnd + genCards.length;

    function getLink(item) {
        const link = item.querySelector('a');
        return link ? link.href : null;
    }

    function selectItem(index) {
        // Remove previous selection
        if (selectedIndex >= 0 && selectedIndex < allItems.length) {
            allItems[selectedIndex].style.outline = '';
            allItems[selectedIndex].style.outlineOffset = '';
            allItems[selectedIndex].classList.remove('selected');
        }

        // Bounds check
        selectedIndex = Math.max(0, Math.min(index, allItems.length - 1));

        // Add selection
        allItems[selectedIndex].style.outline = '2px solid #4a7c59';
        allItems[selectedIndex].style.outlineOffset = '2px';
        allItems[selectedIndex].classList.add('selected');

        // Scroll into view
        allItems[selectedIndex].scrollIntoView({
            behavior: 'auto',
            block: 'center'
        });
    }

    function getGridColumns() {
        // Feature cards are 2 columns, others are 1 column
        if (selectedIndex < featureEnd) {
            return window.innerWidth <= 768 ? 1 : 2;
        }
        return 1;
    }

    function moveUp() {
        const cols = getGridColumns();
        if (selectedIndex < featureEnd) {
            // In feature section - move up by cols, or jump to before section
            const newIndex = selectedIndex - cols;
            if (newIndex >= 0) {
                selectItem(newIndex);
            }
        } else if (selectedIndex < genEnd) {
            // In generation section - up moves to previous gen or last feature
            if (selectedIndex === featureEnd) {
                selectItem(featureEnd - 1);
            } else {
                selectItem(selectedIndex - 1);
            }
        } else {
            // In person section - up moves to previous person or last gen
            if (selectedIndex === genEnd) {
                selectItem(genEnd - 1);
            } else {
                selectItem(selectedIndex - 1);
            }
        }
    }

    function moveDown() {
        const cols = getGridColumns();
        if (selectedIndex < featureEnd) {
            // In feature section - move down by cols or jump to generations
            const newIndex = selectedIndex + cols;
            if (newIndex < featureEnd) {
                selectItem(newIndex);
            } else {
                selectItem(featureEnd);
            }
        } else if (selectedIndex < genEnd) {
            // In generation section - down moves to next gen or first person
            if (selectedIndex === genEnd - 1) {
                selectItem(genEnd);
            } else {
                selectItem(selectedIndex + 1);
            }
        } else {
            // In person section - down moves to next person
            selectItem(selectedIndex + 1);
        }
    }

    function moveLeft() {
        if (selectedIndex < featureEnd) {
            // In feature section - move left within row
            if (selectedIndex > 0) {
                selectItem(selectedIndex - 1);
            } else {
                history.back();
            }
        } else {
            // Other sections have no left movement, go back
            history.back();
        }
    }

    function moveRight() {
        if (selectedIndex < featureEnd) {
            // In feature section - move right within row
            const cols = getGridColumns();
            const row = Math.floor(selectedIndex / cols);
            const nextInRow = (row * cols) + ((selectedIndex % cols) + 1);
            if (nextInRow < featureEnd && nextInRow < (row + 1) * cols) {
                selectItem(nextInRow);
            }
        }
        // Other sections have no right movement
    }

    document.addEventListener('keydown', function(e) {
        // Don't handle if user is typing in an input
        if (e.target.tagName === 'INPUT' || e.target.tagName === 'TEXTAREA') return;
        if (KJVNav.sidebarActive) return;

        if (e.key === 'ArrowDown' || e.key === 'j') {
            e.preventDefault();
            if (selectedIndex < 0) {
                selectItem(0);
            } else {
                moveDown();
            }
        } else if (e.key === 'ArrowUp' || e.key === 'k') {
            e.preventDefault();
            if (selectedIndex < 0) {
                selectItem(0);
            } else {
                moveUp();
            }
        } else if (e.key === 'ArrowLeft' || e.key === 'h') {
            e.preventDefault();
            if (selectedIndex < 0) {
                history.back();
            } else {
                moveLeft();
            }
        } else if (e.key === 'ArrowRight' || e.key === 'l') {
            e.preventDefault();
            if (selectedIndex >= 0) {
                moveRight();
            }
        } else if (e.key === 'Enter' && selectedIndex >= 0) {
            e.preventDefault();
            const href = getLink(allItems[selectedIndex]);
            if (href) window.location.href = href;
        } else if (e.key === 'Escape') {
            e.preventDefault();
            if (selectedIndex >= 0 && selectedIndex < allItems.length) {
                allItems[selectedIndex].style.outline = '';
                allItems[selectedIndex].style.outlineOffset = '';
                allItems[selectedIndex].classList.remove('selected');
            }
            selectedIndex = -1;
        }
    });
});
</script>
{% endblock %}
