{% extends "base.html" %}

{% block title %}Bible Study Guides - KJV Bible{% endblock %}

{% block description %}Structured KJV Bible study guides covering foundational Christian truths, character development, and biblical themes from the King James Version.{% endblock %}



{% block content %}
<h1>Bible Study Guides</h1>
<p class="subtitle"><a href="/">Authorized King James Version</a></p>

<section>
    <p><span class="newthought">These study guides</span> offer structured explorations of foundational Christian truths, character development, and biblical themes. Each guide includes relevant Scripture passages and reflections for deeper understanding of God's Word.</p>
</section>

{% for category, guides in study_guides.items() %}
<section id="{{ category | lower | replace(' ', '-') }}">
    <h2>{{ category }}</h2>

    {% for guide in guides %}
    <p>
        <strong><a href="/study-guides/{{ guide.slug }}">{{ guide.title }}</a></strong><label for="sn-{{ guide.slug }}" class="margin-toggle sidenote-number"></label>
        <input type="checkbox" id="sn-{{ guide.slug }}" class="margin-toggle"/>
        <span class="sidenote">
            <strong>Key Verses:</strong><br/>
            {% for verse_ref in guide.verse_refs[:5] %}
                <a href="{{ verse_ref.url }}">{{ verse_ref.text }}</a>{% if not loop.last %}, {% endif %}
            {% endfor %}
            {% if guide.verse_refs|length > 5 %}
                <br/><em>+{{ guide.verse_refs|length - 5 }} more</em>
            {% endif %}
        </span>
        — {{ guide.description }}
    </p>
    {% endfor %}
</section>
{% endfor %}

<nav>
    <p><a href="/">← Home</a></p>
</nav>

<script>
(function() {
    const links = Array.from(document.querySelectorAll('section p strong a[href^="/study-guides/"]'));
    if (links.length === 0) return;

    let selectedIndex = -1;

    function clearSelection() {
        if (selectedIndex >= 0 && selectedIndex < links.length) {
            links[selectedIndex].style.outline = '';
            links[selectedIndex].style.outlineOffset = '';
            links[selectedIndex].classList.remove('selected');
        }
    }

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