{% extends "base.html" %}

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

{% block head %}
<style>
.sidenote,
.marginnote {
    max-height: 150px;
    overflow: hidden;
    cursor: pointer;
    transition: max-height 0.3s ease;
    position: relative;
}

.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;
}

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

.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(--link-color);
    color: white;
    border: none;
    border-radius: 4px;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.2s;
    display: inline-block;
}

.chapter-nav-btn:hover {
    background: var(--link-hover);
}

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

.chapter-nav-btn.secondary:hover {
    background: var(--code-bg);
    border-color: var(--link-color);
    color: var(--link-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;
}
</style>
{% endblock %}

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

{% if chapter_overview %}
<section>
    {{ chapter_overview|safe }}
</section>
<hr/>
{% 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">{{ verse.verse }}</a> {{ verse.text | link_names | safe }}
        {% if commentary and commentary.cross_references %}
            {% for ref in commentary.cross_references %}
            <label for="sn-{{ verse.verse }}-ref-{{ loop.index }}" class="margin-toggle">⊕</label>
            <input type="checkbox" id="sn-{{ verse.verse }}-ref-{{ loop.index }}" class="margin-toggle"/>
            <span class="marginnote"><strong><a href="{{ ref.url }}">{{ ref.text }}</a></strong>{% if ref.context %} — {{ ref.context }}{% endif %}</span>
            {% endfor %}
        {% endif %}
        {% if commentary and commentary.historical %}
        <label for="sn-{{ verse.verse }}-hist" class="margin-toggle">⊕</label>
        <input type="checkbox" id="sn-{{ verse.verse }}-hist" class="margin-toggle"/>
        <span class="marginnote"><em>Historical context:</em> {{ commentary.historical|safe }}</span>
        {% endif %}
    </p>
    {% endfor %}
</section>

<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>

<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;
            }
        }
    });
});
</script>
{% endblock %}