kjvstudy.org/kjvstudy_org/templates/family_tree_search.html

{% extends "base.html" %}

{% block title %}Search Family Tree - KJV Study{% endblock %}
{% block description %}Search the biblical family tree from Adam to Jesus Christ.{% endblock %}

{% block head %}
<style>
.ft-search-form {
    margin: 1.5rem 0;
}

.ft-search-input {
    width: 100%;
    max-width: 55%;
    padding: 0.75rem;
    font-size: 1.1rem;
    font-family: inherit;
    background: var(--bg-elevated);
    color: var(--text-color);
    border: 1px solid var(--border-color-darker);
    border-radius: 6px;
    box-sizing: border-box;
}

.ft-search-input::placeholder {
    color: var(--text-tertiary);
    font-style: italic;
}

.ft-search-input:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-soft);
}

.ft-search-btn {
    margin-top: 1rem;
    padding: 0.75rem 1.5rem;
    font-family: inherit;
    font-size: 0.95rem;
    background: var(--accent-fill);
    color: var(--on-accent);
    border: 1px solid var(--accent-fill);
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.15s ease;
}

.ft-search-btn:hover {
    background: var(--accent-fill-hover);
    border-color: var(--accent-fill-hover);
}

.ft-results {
    margin: 1.5rem 0;
}

.ft-results-heading {
    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);
}

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

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

.ft-result h3 a {
    color: var(--text-strong);
}

.ft-result h3 a:hover {
    color: var(--accent-strong);
}

.ft-result p {
    color: var(--text-secondary);
}

.ft-back-link {
    margin: 1.5rem 0;
}

.ft-back-link 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: all 0.15s ease;
}

.ft-back-link a:hover {
    background: var(--accent-softer);
    border-color: var(--accent);
    color: var(--accent-strong);
}
</style>
{% endblock %}

{% block content %}
<h1>Search Family Tree</h1>
<p class="subtitle">Find individuals in the biblical genealogy</p>

<form method="get" action="/family-tree/search" class="ft-search-form">
    <input
        type="text"
        name="q"
        value="{{ query }}"
        placeholder="Enter a name..."
        list="person-names"
        class="ft-search-input"
        autofocus
        autocomplete="off"
    >
    <datalist id="person-names">
        {% for name in all_names %}
        <option value="{{ name }}">
        {% endfor %}
    </datalist>
    <br>
    <button type="submit" class="ft-search-btn">Search</button>
</form>

{% if query %}
    <div class="ft-results">
        <h2 class="ft-results-heading">Results</h2>

        {% if results %}
            <p>Found {{ results|length }} individual{% if results|length != 1 %}s{% endif %} matching "{{ query }}"</p>

            {% for result in results %}
            <div class="ft-result">
                <h3><a href="/family-tree/person/{{ result.id }}">{{ result.name }}</a></h3>
                <p>
                    {% if result.generation %}Generation {{ result.generation }}{% endif %}
                    {% if result.birth_year != "Unknown" %}<br>Born: {{ result.birth_year }}{% endif %}
                    {% if result.death_year != "Unknown" %}<br>Died: {{ result.death_year }}{% endif %}
                </p>
            </div>
            {% endfor %}
        {% else %}
            <p>No results found for "{{ query }}"</p>
        {% endif %}
    </div>
{% endif %}

<p class="ft-back-link"><a href="/family-tree">← Back to Family Tree</a></p>

<script>
(function() {
    const results = Array.from(document.querySelectorAll('.ft-result'));
    if (results.length === 0) return;

    let selectedIndex = -1;

    function selectResult(index) {
        if (selectedIndex >= 0 && selectedIndex < results.length) {
            results[selectedIndex].style.outline = '';
            results[selectedIndex].style.outlineOffset = '';
            results[selectedIndex].classList.remove('selected');
        }
        selectedIndex = Math.max(0, Math.min(index, results.length - 1));
        results[selectedIndex].style.outline = '2px solid var(--accent)';
        results[selectedIndex].style.outlineOffset = '4px';
        results[selectedIndex].classList.add('selected');
        results[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(results, selectedIndex)) {
                selectResult(KJVNav.findFirstVisibleIndex(results));
            } else {
                selectResult(selectedIndex < 0 ? 0 : selectedIndex + 1);
            }
        } else if (e.key === 'ArrowUp' || e.key === 'k') {
            e.preventDefault();
            if (KJVNav.isSelectionOffScreen(results, selectedIndex)) {
                selectResult(KJVNav.findFirstVisibleIndex(results));
            } else if (selectedIndex <= 0) {
                selectResult(0);
            } else {
                selectResult(selectedIndex - 1);
            }
        } else if (e.key === 'ArrowLeft' || e.key === 'h') {
            e.preventDefault();
            history.back();
        } else if (e.key === 'Enter' && selectedIndex >= 0) {
            e.preventDefault();
            const link = results[selectedIndex].querySelector('a');
            if (link) window.location.href = link.href;
        } else if (e.key === 'Escape') {
            e.preventDefault();
            if (selectedIndex >= 0 && selectedIndex < results.length) {
                results[selectedIndex].style.outline = '';
                results[selectedIndex].style.outlineOffset = '';
                results[selectedIndex].classList.remove('selected');
            }
            selectedIndex = -1;
        }
    });
})();
</script>
{% endblock %}