{% extends "base.html" %}

{% block title %}{{ book }} - KJV Bible{% endblock %}

{% block head %}
<style>
section h2 + p a {
    font-size: 1.8rem;
    font-weight: 500;
}

.popular-chapter {
    font-weight: bold;
}
</style>
<script>
document.addEventListener('DOMContentLoaded', function() {
    const bookName = "{{ book }}";

    // Function to link verse references in text
    function linkVerseReferences(element) {
        if (!element) return;

        // Get all text nodes
        const walker = document.createTreeWalker(element, NodeFilter.SHOW_TEXT, null, false);
        const textNodes = [];
        let node;
        while (node = walker.nextNode()) {
            textNodes.push(node);
        }

        textNodes.forEach(function(textNode) {
            let text = textNode.textContent;
            let changed = false;

            // Match chapter ranges in parentheses like "(21-22)" or "(21)"
            text = text.replace(/\((\d+)(?:-(\d+))?\)/g, function(match, chapterStart, chapterEnd) {
                changed = true;
                if (chapterEnd) {
                    return '(<a href="/book/' + bookName + '/chapter/' + chapterStart + '">' + chapterStart + '-' + chapterEnd + '</a>)';
                } else {
                    return '(<a href="/book/' + bookName + '/chapter/' + chapterStart + '">' + chapterStart + '</a>)';
                }
            });

            // Create regex for book name references
            const bookRegex = new RegExp('\\b' + bookName.replace(/\s+/g, '\\s+') + '\\s+(\\d+):(\\d+)-(\\d+)\\b', 'g');
            text = text.replace(bookRegex, function(match, chapter, verseStart, verseEnd) {
                changed = true;
                return '<a href="/book/' + bookName + '/chapter/' + chapter + '#verse-' + verseStart + '-' + verseEnd + '">' + match + '</a>';
            });

            // Match verse ranges like "1:1-5"
            text = text.replace(/\b(\d+):(\d+)-(\d+)\b/g, function(match, chapter, verseStart, verseEnd) {
                changed = true;
                return '<a href="/book/' + bookName + '/chapter/' + chapter + '#verse-' + verseStart + '-' + verseEnd + '">' + match + '</a>';
            });

            // Match single verses like "1:1"
            text = text.replace(/\b(\d+):(\d+)\b/g, function(match, chapter, verse) {
                changed = true;
                return '<a href="/book/' + bookName + '/chapter/' + chapter + '#verse-' + verse + '">' + match + '</a>';
            });

            if (changed) {
                const span = document.createElement('span');
                span.innerHTML = text;
                textNode.parentNode.replaceChild(span, textNode);
                // Replace the span's children with its contents
                while (span.firstChild) {
                    span.parentNode.insertBefore(span.firstChild, span);
                }
                span.parentNode.removeChild(span);
            }
        });
    }

    // Link verse references in all sections
    document.querySelectorAll('section').forEach(function(section) {
        linkVerseReferences(section);
    });
});
</script>
{% endblock %}

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

<section>
    <h2>Chapters</h2>
    <p>
        <label for="mn-popular" class="margin-toggle">⊕</label>
        <input type="checkbox" id="mn-popular" class="margin-toggle"/>
        <span class="marginnote">Chapters in <strong>bold</strong> are among the most frequently read and studied passages.</span>
        {% for chapter in chapters %}
        <a href="/book/{{ book }}/chapter/{{ chapter }}" {% if chapter_popularity[chapter] >= 7 %}class="popular-chapter"{% endif %}>{{ chapter }}</a>{% if not loop.last %} · {% endif %}
        {% endfor %}
    </p>
</section>

{% if introduction %}
<section>
    <h2>Introduction</h2>
    {{ introduction|safe }}
</section>
{% endif %}

{% if historical_context %}
<section>
    <h2>Historical Context</h2>
    {{ historical_context|safe }}
</section>
{% endif %}

{% if themes %}
<section>
    <h2>Major Themes</h2>
    {{ themes|safe }}
</section>
{% endif %}

{% if key_passages %}
<section>
    <h2>Key Passages</h2>
    <ul>
        {% for passage in key_passages %}
        <li><a href="{{ passage.url }}">{{ passage.reference }}</a> — {{ passage.description }}</li>
        {% endfor %}
    </ul>
</section>
{% endif %}

<nav>
    <p><a href="/">← All Books</a></p>
</nav>
{% endblock %}