{% extends "base.html" %}

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

{% block description %}Read {{ book }} chapter {{ chapter }} from the King James Version Bible. {{ verses[0].text[:100] if verses and verses|length > 0 else '' }}...{% endblock %}

{% block head %}
<style>
/* Red Letter Edition - Words of Christ */
.words-of-christ {
    color: #c41e3a;
}

[data-theme="dark"] .words-of-christ {
    color: #ff6b6b;
}

.sidenote,
.marginnote {
    max-height: 150px;
    overflow: hidden;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
}

/* Highlight sidenote when its checkbox is checked */
.margin-toggle:checked + .sidenote,
.margin-toggle:checked + .marginnote {
    background-color: rgba(255, 237, 160, 0.3);
    border-left: 3px solid rgba(255, 193, 7, 0.6);
    padding-left: 0.5rem;
    margin-left: -0.5rem;
}

[data-theme="dark"] .margin-toggle:checked + .sidenote,
[data-theme="dark"] .margin-toggle:checked + .marginnote {
    background-color: rgba(255, 193, 7, 0.15);
    border-left: 3px solid rgba(255, 193, 7, 0.5);
}

.sidenote.expanded,
.marginnote.expanded {
    max-height: none;
    overflow: visible;
}

.sidenote.truncated:not(.expanded)::after,
.marginnote.truncated:not(.expanded)::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 60px;
    background: linear-gradient(to bottom, transparent, #fffff8);
    pointer-events: none;
}

.marginnote {
    margin-top: 0.3rem;
    margin-bottom: 1rem;
}

@media (max-width: 760px) {
    .sidenote,
    .marginnote {
        max-height: 120px;
    }
}

hr {
    border: 0;
    height: 0;
    text-align: center;
    margin: 2em 0;
}

hr::before {
    content: "⁂";
    font-size: 1.5rem;
    letter-spacing: 0.6em;
    color: #111;
}

.verse-number-link {
    font-family: et-book-roman-old-style;
    font-size: 1rem;
    vertical-align: super;
    text-decoration: none;
    color: inherit;
    position: relative;
    top: -0.5rem;
    left: 0.1rem;
    margin-right: 0.2rem;
}

.verse-number-link:hover {
    color: #111;
    text-decoration: underline;
}

.verse-number-link.has-commentary {
    color: #c41e3a;
}

[data-theme="dark"] .verse-number-link.has-commentary {
    color: #ff6b6b;
}

/* Prevent sidenote numbers from appearing too close to verse numbers */
.verse-number-link + label.sidenote-number {
    margin-left: 0.3rem;
}

/* Reset sidenote counter for each verse paragraph */
section p[id^="verse-"] {
    counter-reset: sidenote-counter;
}

.chapter-nav {
    max-width: 60%;
    margin: 2rem 0;
    padding: 1.5rem;
    border: 1px solid var(--border-color);
    border-radius: 4px;
}

.chapter-nav-controls {
    display: flex;
    gap: 1rem;
    align-items: center;
    flex-wrap: wrap;
}

.chapter-nav-btn {
    padding: 0.5rem 1rem;
    font-size: 0.95rem;
    font-weight: 600;
    background: var(--bg-color);
    color: var(--text-color);
    border: 1px solid var(--border-color-darker);
    border-radius: 4px;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.2s;
    display: inline-block;
}

.chapter-nav-btn:hover {
    background: var(--code-bg);
    border-color: var(--text-secondary);
    color: var(--link-hover);
}

.chapter-nav-btn.secondary {
    background: transparent;
    color: var(--text-secondary);
    border: 1px solid var(--border-color);
}

.chapter-nav-btn.secondary:hover {
    background: var(--code-bg);
    border-color: var(--border-color-darker);
    color: var(--text-color);
}

.chapter-select {
    padding: 0.5rem;
    font-size: 0.95rem;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    background: var(--bg-color);
    color: var(--text-color);
    font-family: inherit;
    cursor: pointer;
}

.chapter-select:focus {
    outline: none;
    border-color: var(--link-color);
}

.nav-help {
    font-size: 0.85rem;
    color: var(--text-secondary);
    font-style: italic;
    margin-top: 0.75rem;
}

.chapter-actions {
    margin: 1.5rem 0 1rem;
}

.print-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.45rem 0.9rem;
    font-size: 0.9rem;
    color: var(--text-secondary);
    background: var(--code-bg);
    border: 1px solid var(--border-color);
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s;
    text-decoration: none;
}

.print-btn:hover {
    background: var(--bg-color);
    border-color: var(--link-color);
    color: var(--link-color);
    text-decoration: none;
}

.print-btn svg {
    width: 16px;
    height: 16px;
}

.chapter-overview-divider {
    border: none;
    border-top: 1px solid var(--border-color, #ddd);
    margin: 3rem 0 2rem;
    height: 0;
}

@media print {
    .chapter-actions,
    .print-btn {
        display: none;
    }
}
</style>
{% endblock %}

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

{% if pdf_available %}
<div class="chapter-actions">
    <a href="/book/{{ book }}/chapter/{{ chapter }}/pdf" class="print-btn">
        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 10v6m0 0l-3-3m3 3l3-3m2 8H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
        </svg>
        Download PDF
    </a>
</div>
{% endif %}

<section>
    {% for verse in verses %}
    {% set commentary = commentaries[verse.verse] if commentaries and verse.verse in commentaries else none %}
    <p id="verse-{{ verse.verse }}">
        <a href="/book/{{ book }}/chapter/{{ chapter }}/verse/{{ verse.verse }}" class="verse-number-link{% if commentary and commentary['is_enhanced'] == True %} has-commentary{% endif %}">{{ verse.verse }}</a> {{ verse.text | red_letter(book, chapter, verse.verse) | inject_word_markers(commentary.word_studies if commentary else [], verse.verse) | link_names | safe }}
        {% if commentary %}
            {% if commentary.cross_references %}
                {% for ref in commentary.cross_references %}
                <label for="sn-{{ verse.verse }}-ref-{{ loop.index }}" class="margin-toggle sidenote-number"></label>
                <input type="checkbox" id="sn-{{ verse.verse }}-ref-{{ loop.index }}" class="margin-toggle"/>
                <span class="sidenote"><strong><a href="{{ ref.url }}">{{ ref.text }}</a></strong>{% if ref.context %} — {{ ref.context }}{% endif %}</span>
                {% endfor %}
            {% endif %}
        {% endif %}
    </p>
    {% endfor %}
</section>

{% if chapter_overview %}
<hr class="chapter-overview-divider"/>
<section>
    {{ chapter_overview|safe }}
</section>
{% endif %}

<nav class="chapter-nav">
    <div class="chapter-nav-controls">
        {% if chapter > 1 %}
        <a href="/book/{{ book }}/chapter/{{ chapter - 1 }}" class="chapter-nav-btn" id="prev-chapter">
            ← Previous
        </a>
        {% endif %}

        <select class="chapter-select" onchange="if(this.value) window.location.href=this.value">
            <option value="">Jump to chapter...</option>
            {% for ch in chapters %}
            <option value="/book/{{ book }}/chapter/{{ ch }}"{% if ch == chapter %} selected{% endif %}>
                Chapter {{ ch }}
            </option>
            {% endfor %}
        </select>

        {% if chapter < chapters|length %}
        <a href="/book/{{ book }}/chapter/{{ chapter + 1 }}" class="chapter-nav-btn" id="next-chapter">
            Next →
        </a>
        {% endif %}

        <a href="/book/{{ book }}" class="chapter-nav-btn secondary">
            {{ book }}
        </a>
    </div>
    <div class="nav-help">
        Tip: Use left/right arrow keys to navigate chapters
    </div>
</nav>

{% if pdf_available %}
{% endif %}

<script>
document.addEventListener('DOMContentLoaded', function() {
    // Function to link verse references
    function linkVerseReferences(element) {
        let html = element.innerHTML;

        // Match patterns like "Verse 1", "Verses 1-5", "verse 12", etc.
        html = html.replace(/\b(Verse|verse)s?\s+(\d+)(?:-(\d+))?\b/g, function(match, word, start, end) {
            if (end) {
                return '<a href="#verse-' + start + '-' + end + '">' + match + '</a>';
            } else {
                return '<a href="#verse-' + start + '">' + match + '</a>';
            }
        });

        element.innerHTML = html;
    }

    const sidenotes = document.querySelectorAll('.sidenote, .marginnote');

    // Make sidenotes and marginnotes expandable and link verse references
    sidenotes.forEach(function(sidenote) {
        // Check if content is actually truncated
        if (sidenote.scrollHeight > sidenote.clientHeight) {
            sidenote.classList.add('truncated');
        }

        sidenote.addEventListener('click', function(e) {
            // Don't expand if clicking a link
            if (e.target.tagName !== 'A') {
                this.classList.toggle('expanded');
            }
        });

        linkVerseReferences(sidenote);
    });

    // Also link verse references in chapter overview
    const chapterOverview = document.querySelector('section');
    if (chapterOverview) {
        linkVerseReferences(chapterOverview);
    }

    // Handle verse ranges in URL hash
    function highlightVerses() {
        const hash = window.location.hash.substring(1); // Remove the #
        if (hash.startsWith('verse-')) {
            const versePart = hash.substring(6); // Remove 'verse-'
            const rangeParts = versePart.split('-');

            if (rangeParts.length === 2) {
                // Verse range (e.g., verse-22-23)
                const start = parseInt(rangeParts[0]);
                const end = parseInt(rangeParts[1]);

                for (let i = start; i <= end; i++) {
                    const verseEl = document.getElementById('verse-' + i);
                    if (verseEl) {
                        verseEl.style.backgroundColor = 'rgba(255, 235, 59, 0.2)';
                    }
                }

                // Scroll to first verse
                const firstVerse = document.getElementById('verse-' + start);
                if (firstVerse) {
                    firstVerse.scrollIntoView({ behavior: 'smooth', block: 'center' });
                }
            } else {
                // Single verse
                const verseEl = document.getElementById('verse-' + versePart);
                if (verseEl) {
                    verseEl.style.backgroundColor = 'rgba(255, 235, 59, 0.2)';
                    verseEl.scrollIntoView({ behavior: 'smooth', block: 'center' });
                }
            }
        }
    }

    highlightVerses();
    window.addEventListener('hashchange', highlightVerses);

    // Keyboard navigation for chapters
    document.addEventListener('keydown', function(e) {
        // Don't trigger if user is typing
        if (e.target.tagName === 'INPUT' || e.target.tagName === 'TEXTAREA' || e.target.tagName === 'SELECT') {
            return;
        }

        // Left arrow: Previous chapter
        if (e.key === 'ArrowLeft') {
            const prevBtn = document.getElementById('prev-chapter');
            if (prevBtn) {
                e.preventDefault();
                window.location.href = prevBtn.href;
            }
        }

        // Right arrow: Next chapter
        if (e.key === 'ArrowRight') {
            const nextBtn = document.getElementById('next-chapter');
            if (nextBtn) {
                e.preventDefault();
                window.location.href = nextBtn.href;
            }
        }
    });

    // Only allow one sidenote to be highlighted at a time
    document.querySelectorAll('.margin-toggle').forEach(function(checkbox) {
        checkbox.addEventListener('change', function() {
            if (this.checked) {
                // Uncheck all other margin-toggle checkboxes
                document.querySelectorAll('.margin-toggle').forEach(function(otherCheckbox) {
                    if (otherCheckbox !== checkbox) {
                        otherCheckbox.checked = false;
                    }
                });
            }
        });
    });
});
</script>
{% endblock %}