{% extends "base.html" %}

{% block title %}Commentary on {{ book }} - Authorized King James Version (KJV) Bible{% endblock %}
{% block description %}In-depth commentary on the Book of {{ book }} from the Authorized King James Version (KJV) Bible. Explore themes, historical context, and theological significance.{% endblock %}
{% block keywords %}{{ book }} commentary, {{ book }} study guide, {{ book }} KJV, Authorized King James Version, {{ book }} analysis, {{ book }} themes, {{ book }} meaning{% endblock %}

{% block container_class %}narrow-container{% endblock %}

{% block schema_type %}Article{% endblock %}
{% block structured_data %},
        "headline": "Commentary on {{ book }} - Authorized King James Version (KJV)",
        "articleSection": "Biblical Commentary",
        "text": "Comprehensive commentary on the Book of {{ book }} from the Authorized King James Version (KJV) Bible.",
        "isPartOf": {
            "@type": "Book",
            "name": "{{ book }} - Authorized King James Version",
            "isPartOf": {
                "@type": "Book",
                "name": "Authorized King James Version Bible"
            }
        }{% endblock %}

{% block head %}
<style>
.commentary-section p {
    font-family: 'Crimson Text', 'Times New Roman', serif;
    font-size: 1.175rem;
    line-height: 1.7;
    margin-bottom: 1.25rem;
    color: var(--text-primary);
}

.commentary-section li {
    font-family: 'Crimson Text', 'Times New Roman', serif;
    font-size: 1.1rem;
    line-height: 1.6;
    color: var(--text-primary);
}

.verse-reference {
    font-weight: 500;
    color: var(--primary-light);
    text-decoration: none;
    position: relative;
}

.verse-reference:hover {
    text-decoration: underline;
}

.verse-tooltip {
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0, 0, 0, 0.95);
    color: white;
    padding: 0.75rem 1rem;
    border-radius: 6px;
    font-size: 0.9rem;
    line-height: 1.5;
    max-width: 450px;
    min-width: 350px;
    white-space: normal;
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    pointer-events: none;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
    font-family: 'Crimson Text', 'Times New Roman', serif;
    margin-bottom: 8px;
}

@media (max-width: 768px) {
    .verse-tooltip {
        position: fixed;
        bottom: 2rem;
        left: 1rem;
        right: 1rem;
        transform: none;
        max-width: none;
        min-width: auto;
        padding: 1rem;
        font-size: 1rem;
        z-index: 1001;
    }
}

.verse-tooltip::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 6px solid transparent;
    border-top-color: rgba(0, 0, 0, 0.95);
}

.verse-reference:hover .verse-tooltip {
    opacity: 1;
    visibility: visible;
}

.outline-title {
    font-size: 1.2rem;
    font-weight: 600;
    margin-bottom: 0.75rem;
    color: var(--primary-color);
}

.outline-list {
    padding-left: 1.5rem;
    margin: 0;
}

.outline-item {
    margin-bottom: 0.5rem;
}

.outline-nested {
    padding-left: 1.5rem;
    margin-top: 0.5rem;
}

.cross-ref-section {
    margin-top: 2rem;
    padding: 1rem;
    background: rgba(139, 92, 246, 0.1);
    border-radius: var(--radius-md);
}

.cross-ref-title {
    margin-top: 0;
    font-size: 1.1rem;
    margin-bottom: 0.75rem;
    color: var(--text-primary);
}

.cross-ref-list {
    column-count: 2;
    column-gap: 2rem;
}

@media (max-width: 768px) {
    .cross-ref-list {
        column-count: 1;
    }
}

.cross-ref-list li {
    margin-bottom: 0.5rem;
    break-inside: avoid;
    color: var(--text-primary);
}

.backdrop-blur {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

.backdrop-blur.active {
    opacity: 1;
    pointer-events: auto;
}

.verse-popup {
    background: var(--surface-color);
    border-radius: var(--radius-lg);
    padding: 1.5rem;
    box-shadow: var(--shadow-lg);
    max-width: 600px;
    width: 90%;
    max-height: 80vh;
    overflow-y: auto;
}

.verse-popup-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--border-light);
}

.verse-popup-title {
    margin: 0;
    font-size: 1.25rem;
    color: var(--primary-color);
}

.verse-popup-close {
    background: none;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    font-size: 1.5rem;
    line-height: 1;
    padding: 0;
}

.verse-popup-text {
    font-size: 1.125rem;
    line-height: 1.7;
    margin-bottom: 1rem;
    font-family: 'Crimson Text', 'Times New Roman', serif;
}

.verse-popup-comment {
    background: rgba(139, 92, 246, 0.1);
    border-radius: var(--radius-md);
    padding: 1rem;
    margin-top: 1rem;
}

.verse-popup-comment-title {
    margin: 0 0 0.5rem;
    font-size: 0.875rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--primary-color);
}

.verse-popup-actions {
    display: flex;
    gap: 0.5rem;
    margin-top: 1rem;
    justify-content: flex-end;
}

.verse-popup-action {
    padding: 0.5rem 1rem;
    border-radius: var(--radius-sm);
    background: var(--background-color);
    border: 1px solid var(--border-color);
    color: var(--text-secondary);
    text-decoration: none;
    font-size: 0.875rem;
    transition: all 0.2s ease;
}

.verse-popup-action:hover {
    background: var(--primary-color);
    color: white;
    border-color: var(--primary-color);
}
</style>
{% endblock %}

{% block breadcrumb %}
<div class="container commentary-breadcrumb">
    <nav class="breadcrumb">
        <a href="/">📚 All Books</a>
        <span class="breadcrumb-separator">/</span>
        <a href="/book/{{ book }}">{{ book }}</a>
        <span class="breadcrumb-separator">/</span>
        <span>Commentary</span>
    </nav>
</div>
{% endblock %}

{% block content %}
<div class="text-center mb-4">
    <h1 class="section-title" style="font-size: 1.8rem;">Commentary on {{ book }}</h1>
    <p style="font-size: 0.95rem; color: var(--text-secondary);">
        Comprehensive analysis and insights from the Authorized King James Version (KJV)
    </p>
    
    <div class="book-meta" style="margin-top: 1rem; display: flex; justify-content: center; gap: 1rem; flex-wrap: wrap;">
        <span class="book-meta-item" style="background: var(--surface-color); padding: 0.25rem 0.75rem; border-radius: var(--radius-md); font-size: 0.9rem;">{{ testament }}</span>
        <span class="book-meta-item" style="background: var(--surface-color); padding: 0.25rem 0.75rem; border-radius: var(--radius-md); font-size: 0.9rem;">{{ genre }}</span>
        <span class="book-meta-item" style="background: var(--surface-color); padding: 0.25rem 0.75rem; border-radius: var(--radius-md); font-size: 0.9rem;">{{ chapters|length }} Chapters</span>
        <span class="book-meta-item" style="background: var(--surface-color); padding: 0.25rem 0.75rem; border-radius: var(--radius-md); font-size: 0.9rem;">{{ time_period }}</span>
    </div>
</div>

<div class="commentary-container" style="max-width: 800px; margin: 0 auto;">
    <section class="commentary-section" style="background: var(--surface-color); border-radius: var(--radius-lg); padding: 1.75rem; border: 1px solid var(--border-light); box-shadow: var(--shadow-sm); margin-bottom: 2rem;">
        <h2 id="introduction" style="color: var(--text-primary); margin-top: 0; padding-bottom: 0.5rem; border-bottom: 2px solid var(--border-light); font-family: 'Crimson Text', 'Times New Roman', serif; font-size: 1.7rem; margin-bottom: 1.25rem; font-weight: 700;">Introduction to {{ book }}</h2>
        {{ introduction|safe }}
        
        <div class="tags-container" style="margin-top: 1.5rem;">
            {% for tag in tags %}
            <span class="tag" style="display: inline-block; background: var(--primary-color); color: white; padding: 0.25rem 0.75rem; border-radius: var(--radius-md); font-size: 0.85rem; margin-right: 0.5rem; margin-bottom: 0.5rem;">{{ tag }}</span>
            {% endfor %}
        </div>
        
        <div class="author-note" style="background: rgba(139, 92, 246, 0.1); border-radius: var(--radius-md); padding: 1rem; margin-top: 1.5rem; border-left: 4px solid var(--accent-color);">
            <strong>Note:</strong> This commentary provides historical, theological, and literary insights on {{ book }} while remaining faithful to the text of the Authorized King James Version (KJV).
        </div>
    </section>
    
    <section class="commentary-section" style="background: var(--surface-color); border-radius: var(--radius-lg); padding: 1.75rem; border: 1px solid var(--border-light); box-shadow: var(--shadow-sm); margin-bottom: 2rem;">
        <h2 id="historical-context" style="color: var(--text-primary); margin-top: 0; padding-bottom: 0.5rem; border-bottom: 2px solid var(--border-light); font-family: 'Crimson Text', 'Times New Roman', serif; font-size: 1.7rem; margin-bottom: 1.25rem; font-weight: 700;">Historical Context</h2>
        {{ historical_context|safe }}
    </section>
    
    <section class="commentary-section" style="background: var(--surface-color); border-radius: var(--radius-lg); padding: 1.75rem; border: 1px solid var(--border-light); box-shadow: var(--shadow-sm); margin-bottom: 2rem;">
        <h2 id="literary-features" style="color: var(--text-primary); margin-top: 0; padding-bottom: 0.5rem; border-bottom: 2px solid var(--border-light); font-family: 'Crimson Text', 'Times New Roman', serif; font-size: 1.7rem; margin-bottom: 1.25rem; font-weight: 700;">Literary Features</h2>
        {{ literary_features|safe }}
    </section>
    
    <section class="commentary-section" style="background: var(--surface-color); border-radius: var(--radius-lg); padding: 1.75rem; border: 1px solid var(--border-light); box-shadow: var(--shadow-sm); margin-bottom: 2rem;">
        <h2 style="color: var(--text-primary); margin-top: 0; padding-bottom: 0.5rem; border-bottom: 2px solid var(--border-light); font-family: 'Crimson Text', 'Times New Roman', serif; font-size: 1.7rem; margin-bottom: 1.25rem; font-weight: 700;">Key Passages in {{ book }}</h2>
        <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1.25rem; margin-top: 1.25rem;">
            {% for highlight in highlights %}
            <div class="highlight-card" style="background: rgba(255, 235, 59, 0.1); border-radius: var(--radius-md); padding: 1.25rem; border-left: 4px solid var(--accent-color);">
                <h4 class="highlight-title" style="font-weight: 600; margin: 0 0 0.4rem; color: var(--primary-light); font-size: 1.1rem;">{{ highlight.reference }}</h4>
                <p class="highlight-desc" style="margin: 0; color: var(--text-primary); line-height: 1.4; font-size: 1rem;">{{ highlight.description }}</p>
            </div>
            {% endfor %}
        </div>
    </section>
    
    <section class="commentary-section" style="background: var(--surface-color); border-radius: var(--radius-lg); padding: 1.75rem; border: 1px solid var(--border-light); box-shadow: var(--shadow-sm); margin-bottom: 2rem;">
        <h2 id="outline" style="color: var(--text-primary); margin-top: 0; padding-bottom: 0.5rem; border-bottom: 2px solid var(--border-light); font-family: 'Crimson Text', 'Times New Roman', serif; font-size: 1.7rem; margin-bottom: 1.25rem; font-weight: 700;">Book Outline</h2>
                
                {% for section in outline %}
                <div class="outline-section">
                    <h3 class="outline-title">{{ section.title }}</h3>
                    <ul class="outline-list">
                        {% for item in section['items'] %}
                        <li class="outline-item">
                            {{ item.text }}
                            {% if item.reference %}
                            (<a href="{{ item.url }}" class="verse-reference">
                                {{ item.reference }}
                                <span class="verse-tooltip">{{ item.verse_text|default(item.reference + ": " + item.text)|truncate(100) }}</span>
                            </a>)
                            {% endif %}
                            
                            {% if item.subitems %}
                            <ul class="outline-nested">
                                {% for subitem in item.subitems %}
                                <li class="outline-item">
                                    {{ subitem.text }}
                                    {% if subitem.reference %}
                                    (<a href="{{ subitem.url }}" class="verse-reference">
                                        {{ subitem.reference }}
                                        <span class="verse-tooltip">{{ subitem.verse_text|default(subitem.reference + ": " + subitem.text)|truncate(100) }}</span>
                                    </a>)
                                    {% endif %}
                                </li>
                                {% endfor %}
                            </ul>
                            {% endif %}
                        </li>
                        {% endfor %}
                    </ul>
                </div>
                {% endfor %}
    </section>
    
    <section class="commentary-section" style="background: var(--surface-color); border-radius: var(--radius-lg); padding: 1.75rem; border: 1px solid var(--border-light); box-shadow: var(--shadow-sm); margin-bottom: 2rem;">
        <h2 id="themes" style="color: var(--text-primary); margin-top: 0; padding-bottom: 0.5rem; border-bottom: 2px solid var(--border-light); font-family: 'Crimson Text', 'Times New Roman', serif; font-size: 1.7rem; margin-bottom: 1.25rem; font-weight: 700;">Major Themes</h2>
        {{ themes|safe }}
    </section>
    
    <section class="commentary-section" style="background: var(--surface-color); border-radius: var(--radius-lg); padding: 1.75rem; border: 1px solid var(--border-light); box-shadow: var(--shadow-sm); margin-bottom: 2rem;">
        <h2 id="theological-significance" style="color: var(--text-primary); margin-top: 0; padding-bottom: 0.5rem; border-bottom: 2px solid var(--border-light); font-family: 'Crimson Text', 'Times New Roman', serif; font-size: 1.7rem; margin-bottom: 1.25rem; font-weight: 700;">Theological Significance</h2>
                {{ theological_significance|safe }}
                
                <div class="cross-ref-section">
                    <h3 class="cross-ref-title">Cross References to Other Books</h3>
                    <ul class="cross-ref-list">
                        {% for ref in cross_references %}
                        <li>
                            <a href="{{ ref.url }}" class="verse-reference">
                                {{ ref.reference }}
                                <span class="verse-tooltip">{{ ref.verse_text|default(ref.description)|truncate(100) }}</span>
                            </a> - {{ ref.description }}
                        </li>
                        {% endfor %}
                    </ul>
                </div>
    </section>
    
    <section class="commentary-section" style="background: var(--surface-color); border-radius: var(--radius-lg); padding: 1.75rem; border: 1px solid var(--border-light); box-shadow: var(--shadow-sm); margin-bottom: 2rem;">
        <h2 id="chapter-summaries" style="color: var(--text-primary); margin-top: 0; padding-bottom: 0.5rem; border-bottom: 2px solid var(--border-light); font-family: 'Crimson Text', 'Times New Roman', serif; font-size: 1.7rem; margin-bottom: 1.25rem; font-weight: 700;">Chapter Summaries</h2>
                
                {% for chapter_num, chapter_data in chapter_summaries.items() %}
                <h3 id="chapter-{{ chapter_num }}">Chapter {{ chapter_num }}</h3>
                <p>{{ chapter_data.summary }}</p>
                
                {% if chapter_data.key_verses %}
                <div style="margin: 1rem 0 1.5rem; padding: 0.75rem; background: rgba(255, 235, 59, 0.1); border-radius: var(--radius-md);">
                    <h4 style="margin: 0 0 0.5rem; font-size: 0.875rem; color: var(--text-secondary);">Key Verses:</h4>
                    <ul style="margin: 0; padding-left: 1.25rem;">
                        {% for verse in chapter_data.key_verses %}
                        <li>
                            <a href="{{ verse.url }}" class="verse-reference">
                                {{ book }} {{ chapter_num }}:{{ verse.verse_num }}
                                <span class="verse-tooltip">{{ verse.text }}</span>
                            </a> - {{ verse.brief }}
                        </li>
                        {% endfor %}
                    </ul>
                </div>
                {% endif %}
                {% endfor %}
    </section>
    
    <section class="commentary-section" style="background: var(--surface-color); border-radius: var(--radius-lg); padding: 1.75rem; border: 1px solid var(--border-light); box-shadow: var(--shadow-sm); margin-bottom: 2rem;">
        <h2 id="application" style="color: var(--text-primary); margin-top: 0; padding-bottom: 0.5rem; border-bottom: 2px solid var(--border-light); font-family: 'Crimson Text', 'Times New Roman', serif; font-size: 1.7rem; margin-bottom: 1.25rem; font-weight: 700;">Contemporary Application</h2>
        {{ application|safe }}
    </section>

    <!-- Table of Contents -->
    <section class="commentary-section" style="background: var(--surface-color); border-radius: var(--radius-lg); padding: 1.75rem; border: 1px solid var(--border-light); box-shadow: var(--shadow-sm); margin-bottom: 2rem;">
        <h3 style="color: var(--text-primary); margin-top: 0; margin-bottom: 1rem; font-family: 'Crimson Text', 'Times New Roman', serif; font-size: 1.4rem;">Commentary Contents</h3>
        <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 0.5rem;">
            <a href="#introduction" style="padding: 0.5rem; background: var(--background-color); border-radius: var(--radius-md); text-decoration: none; color: var(--text-primary); transition: background-color 0.2s;">Introduction</a>
            <a href="#historical-context" style="padding: 0.5rem; background: var(--background-color); border-radius: var(--radius-md); text-decoration: none; color: var(--text-primary); transition: background-color 0.2s;">Historical Context</a>
            <a href="#literary-features" style="padding: 0.5rem; background: var(--background-color); border-radius: var(--radius-md); text-decoration: none; color: var(--text-primary); transition: background-color 0.2s;">Literary Features</a>
            <a href="#outline" style="padding: 0.5rem; background: var(--background-color); border-radius: var(--radius-md); text-decoration: none; color: var(--text-primary); transition: background-color 0.2s;">Book Outline</a>
            <a href="#themes" style="padding: 0.5rem; background: var(--background-color); border-radius: var(--radius-md); text-decoration: none; color: var(--text-primary); transition: background-color 0.2s;">Major Themes</a>
            <a href="#theological-significance" style="padding: 0.5rem; background: var(--background-color); border-radius: var(--radius-md); text-decoration: none; color: var(--text-primary); transition: background-color 0.2s;">Theological Significance</a>
            <a href="#chapter-summaries" style="padding: 0.5rem; background: var(--background-color); border-radius: var(--radius-md); text-decoration: none; color: var(--text-primary); transition: background-color 0.2s;">Chapter Summaries</a>
            <a href="#application" style="padding: 0.5rem; background: var(--background-color); border-radius: var(--radius-md); text-decoration: none; color: var(--text-primary); transition: background-color 0.2s;">Contemporary Application</a>
        </div>
        
        <h3 style="margin-top: 1.5rem; margin-bottom: 1rem; color: var(--text-primary); font-family: 'Crimson Text', 'Times New Roman', serif; font-size: 1.2rem;">Chapter Quick Links</h3>
        <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(40px, 1fr)); gap: 0.5rem; max-width: 600px;">
            {% for chapter_num in chapter_summaries.keys() %}
            <a href="#chapter-{{ chapter_num }}" style="padding: 0.5rem; background: var(--background-color); border-radius: var(--radius-md); text-decoration: none; color: var(--text-primary); text-align: center; transition: background-color 0.2s;">{{ chapter_num }}</a>
            {% endfor %}
        </div>
        
        <div style="margin-top: 2rem; text-align: center;">
            <a href="/book/{{ book }}" class="nav-button" style="display: inline-block; padding: 0.65rem 1.25rem; background: var(--primary-color); color: white; text-decoration: none; border-radius: var(--radius-md); transition: background-color 0.2s;">
                ← Back to {{ book }}
            </a>
        </div>
    </section>
</div>

<div class="backdrop-blur" id="versePopup">
    <div class="verse-popup">
        <div class="verse-popup-header">
            <h3 class="verse-popup-title" id="popupTitle">Verse Title</h3>
            <button class="verse-popup-close" onclick="closeVersePopup()">×</button>
        </div>
        <div class="verse-popup-text" id="popupText">Verse text will appear here.</div>
        <div class="verse-popup-comment" id="popupCommentContainer">
            <h4 class="verse-popup-comment-title">Commentary</h4>
            <div id="popupComment">Commentary will appear here.</div>
        </div>
        <div class="verse-popup-actions">
            <a href="#" class="verse-popup-action" id="popupReadInContext">Read in Context</a>
            <a href="#" class="verse-popup-action" id="popupViewCommentary">View Full Commentary</a>
        </div>
    </div>
</div>
{% endblock %}

{% block navigation %}
<div class="container commentary-navigation">
    <div class="navigation">
        <a href="/book/{{ book }}" class="nav-button">
            ← Back to {{ book }}
        </a>
        <div style="display: flex; gap: 0.5rem;">
            <a href="/book/{{ book }}/chapter/1" class="nav-button nav-button-primary">
                Begin Reading {{ book }} →
            </a>
        </div>
    </div>
</div>
{% endblock %}

{% block scripts %}
<script>
document.addEventListener('DOMContentLoaded', function() {
    // Handle TOC active state based on scroll position
    const sections = document.querySelectorAll('.commentary-section h2, .commentary-section h3');
    const tocLinks = document.querySelectorAll('.toc-link');
    
    window.addEventListener('scroll', function() {
        let currentSection = '';
        
        sections.forEach(section => {
            const sectionTop = section.offsetTop - 100;
            if (window.scrollY >= sectionTop) {
                currentSection = section.getAttribute('id');
            }
        });
        
        tocLinks.forEach(link => {
            link.classList.remove('active');
            if (link.getAttribute('href') === '#' + currentSection) {
                link.classList.add('active');
            }
        });
    });
    
    // Verse popup functionality
    const verseLinks = document.querySelectorAll('.verse-popup-trigger');
    verseLinks.forEach(link => {
        link.addEventListener('click', function(e) {
            e.preventDefault();
            
            const chapter = this.dataset.chapter;
            const verse = this.dataset.verse;
            const text = this.dataset.text;
            const comment = this.dataset.comment;
            
            document.getElementById('popupTitle').textContent = `${book} ${chapter}:${verse}`;
            document.getElementById('popupText').textContent = text;
            document.getElementById('popupComment').textContent = comment;
            document.getElementById('popupReadInContext').href = `/book/${book}/chapter/${chapter}#verse-${verse}`;
            document.getElementById('popupViewCommentary').href = `/commentary/${book}/${chapter}#verse-${verse}`;
            
            document.getElementById('versePopup').classList.add('active');
        });
    });
    
    // Highlight verse from URL hash
    if (window.location.hash) {
        setTimeout(() => {
            const target = document.querySelector(window.location.hash);
            if (target) {
                target.scrollIntoView({ behavior: 'auto', block: 'center' });
                target.classList.add('highlight-verse');
                setTimeout(() => {
                    target.classList.remove('highlight-verse');
                }, 2000);
            }
        }, 100);
    }
});

function closeVersePopup() {
    document.getElementById('versePopup').classList.remove('active');
}

// Close popup when clicking outside
document.getElementById('versePopup').addEventListener('click', function(e) {
    if (e.target === this) {
        closeVersePopup();
    }
});

// Close popup with escape key
document.addEventListener('keydown', function(e) {
    if (e.key === 'Escape') {
        closeVersePopup();
    }
});
</script>
{% endblock %}