{% extends "base.html" %}

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

{% block description %}{{ verse_text[:155] if verse_text else 'Study the Authorized King James Version Bible' }}{% endblock %}

{% block og_type %}article{% endblock %}
{% block og_title %}{{ book }} {{ chapter }}:{{ verse_num }} - KJV Bible{% endblock %}
{% block og_description %}{{ verse_text[:150] if verse_text else '' }}...{% endblock %}

{% block structured_data %}
<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "Article",
  "headline": {{ (book ~ " " ~ chapter|string ~ ":" ~ verse_num|string) | tojson }},
  "articleBody": {{ verse_text | tojson }},
  "author": {
    "@type": "Organization",
    "name": "KJV Study"
  },
  "publisher": {
    "@type": "Organization",
    "name": "KJV Study",
    "url": "https://kjvstudy.org"
  },
  "mainEntityOfPage": {
    "@type": "WebPage",
    "@id": "https://kjvstudy.org/book/{{ book }}/chapter/{{ chapter }}/verse/{{ verse_num }}"
  },
  "isPartOf": {
    "@type": "Book",
    "name": {{ book | tojson }},
    "@id": "https://kjvstudy.org/book/{{ book }}"
  }
}
</script>
{% endblock %}

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

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

/* Prevent sidenotes from inheriting red color */
.words-of-christ .sidenote,
.words-of-christ .marginnote,
.words-of-christ .sidenote-number,
.words-of-christ label.sidenote-number {
    color: #111;
}

[data-theme="dark"] .words-of-christ .sidenote,
[data-theme="dark"] .words-of-christ .marginnote,
[data-theme="dark"] .words-of-christ .sidenote-number,
[data-theme="dark"] .words-of-christ label.sidenote-number {
    color: #ddd;
}

/* Prevent word definitions from inheriting red color */
.words-of-christ .word-original,
.words-of-christ .word-english,
.words-of-christ .word-definition {
    color: #111;
}

.words-of-christ .word-transliteration,
.words-of-christ .word-parsing {
    color: #666;
}

.words-of-christ .word-strongs {
    color: #0066cc;
}

[data-theme="dark"] .words-of-christ .word-original,
[data-theme="dark"] .words-of-christ .word-english,
[data-theme="dark"] .words-of-christ .word-definition {
    color: #ddd;
}

[data-theme="dark"] .words-of-christ .word-transliteration,
[data-theme="dark"] .words-of-christ .word-parsing {
    color: #999;
}

[data-theme="dark"] .words-of-christ .word-strongs {
    color: #6699ff;
}

.verse-text {
    font-size: 1.8rem;
    line-height: 2.4rem;
    margin: 2rem 0;
    font-style: italic;
}

.verse-reference {
    color: #666;
    font-size: 1.2rem;
    margin-bottom: 0.5rem;
}

.share-container {
    max-width: 60%;
    margin: 1.5rem 0;
    padding: 1rem;
    border-top: 1px solid var(--border-color);
    border-bottom: 1px solid var(--border-color);
}

.share-label {
    font-size: 0.9rem;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 0.75rem;
    font-weight: 600;
}

.share-buttons {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
}

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

.share-btn:hover {
    background: var(--code-bg);
    border-color: var(--link-color);
    color: var(--link-color);
}

.share-btn.copied {
    border-color: var(--link-color);
    color: var(--link-color);
}

/* Cross-reference tooltip styles */
.cross-ref-link {
    position: relative;
    cursor: help;
}

.cross-ref-tooltip {
    display: none;
    position: absolute;
    bottom: 100%;
    left: 0;
    min-width: 300px;
    max-width: 400px;
    padding: 0.75rem 1rem;
    margin-bottom: 0.5rem;
    background: var(--bg-color);
    border: 1px solid var(--border-color-darker);
    border-radius: 6px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    z-index: 1000;
    font-size: 0.9rem;
    line-height: 1.6;
    color: var(--text-color);
}

.cross-ref-link:hover .cross-ref-tooltip {
    display: block;
}

.tooltip-verse-text {
    font-weight: 600;
    font-style: italic;
    color: var(--text-secondary);
    margin-top: 0.5rem;
    padding-top: 0.5rem;
    border-top: 1px solid var(--border-color);
}

[data-theme="dark"] .cross-ref-tooltip {
    background: #2a2a2a;
    border-color: #444;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}

@media (prefers-color-scheme: dark) {
    .cross-ref-tooltip {
        background: #2a2a2a;
        border-color: #444;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
    }
}

/* Interlinear styles */
.interlinear-container {
    max-width: 90%;
    margin: 2rem 0;
    overflow-x: auto;
}

.interlinear-words {
    display: flex;
    flex-wrap: wrap;
    gap: 2rem;
    margin: 2rem 0;
}

.interlinear-word {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 120px;
    max-width: 180px;
    padding: 1rem;
    background: #f9f9f9;
    border-radius: 4px;
    border: 1px solid #e0e0e0;
}

.word-position {
    font-size: 0.7rem;
    color: #999;
    margin-bottom: 0.5rem;
}

.word-original {
    font-size: 1.8rem;
    font-weight: 600;
    margin: 0.5rem 0;
    color: #111;
    direction: ltr;
}

.word-transliteration {
    font-size: 0.9rem;
    color: #666;
    font-style: italic;
    margin: 0.25rem 0;
}

.word-strongs {
    font-size: 0.75rem;
    color: #0066cc;
    font-family: monospace;
    margin: 0.25rem 0;
    font-weight: 600;
}

.word-strongs a {
    color: inherit;
    text-decoration: none;
    border-bottom: 1px dotted currentColor;
    transition: all 0.2s;
}

.word-strongs a:hover {
    border-bottom-style: solid;
    opacity: 0.8;
}

.word-english {
    font-size: 1rem;
    color: #111;
    font-weight: 600;
    margin: 0.5rem 0;
    text-align: center;
}

.word-parsing {
    font-size: 0.75rem;
    color: #666;
    margin: 0.25rem 0;
    text-align: center;
    font-style: italic;
}

.word-definition {
    font-size: 0.85rem;
    color: #444;
    margin: 0.5rem 0;
    text-align: center;
    line-height: 1.4;
    border-top: 1px solid #ddd;
    padding-top: 0.5rem;
}
</style>
{% endblock %}

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

<section>
    <p class="verse-text">{{ verse_text | red_letter(book, chapter, verse_num) | link_names | safe }}</p>

    {% if interlinear_words %}
    <details class="interlinear-container">
        <summary style="cursor: pointer; font-size: 1.2rem; font-weight: 600; margin: 1rem 0;">Word-by-Word Analysis</summary>
        <div class="interlinear-words">
            {% for word in interlinear_words %}
            <div class="interlinear-word">
                <div class="word-position">#{{ word.position }}</div>
                <div class="word-original">{{ word.original }}</div>
                <div class="word-transliteration">{{ word.transliteration }}</div>
                <div class="word-strongs">
                    {% if word.strongs %}
                        {% set lang = word.strongs[0]|lower %}
                        {% set num = word.strongs[1:] %}
                        {% if lang == 'g' %}
                            <a href="https://biblehub.com/greek/{{ num }}.htm" target="_blank" rel="noopener noreferrer">{{ word.strongs }}</a>
                        {% elif lang == 'h' %}
                            <a href="https://biblehub.com/hebrew/{{ num }}.htm" target="_blank" rel="noopener noreferrer">{{ word.strongs }}</a>
                        {% else %}
                            {{ word.strongs }}
                        {% endif %}
                    {% endif %}
                </div>
                <div class="word-english">{{ word.english }}</div>
                <div class="word-parsing">{{ word.parsing }}</div>
                <div class="word-definition">{{ word.definition }}</div>
            </div>
            {% endfor %}
        </div>
    </details>
    {% endif %}

    <nav style="margin: 1.5rem 0;">
        <p>
            <a href="/book/{{ book }}">← {{ book }}</a> |
            <a href="/book/{{ book }}/chapter/{{ chapter }}#verse-{{ verse_num }}">View in Chapter {{ chapter }}</a>
            {% if verse_num > 1 %} | <a href="/book/{{ book }}/chapter/{{ chapter }}/verse/{{ verse_num - 1 }}">← Verse {{ verse_num - 1 }}</a>{% endif %}
            {% if verse_num < total_verses %} | <a href="/book/{{ book }}/chapter/{{ chapter }}/verse/{{ verse_num + 1 }}">Verse {{ verse_num + 1 }} →</a>{% endif %}
        </p>
    </nav>

    <div class="share-container">
        <div class="share-label">Share This Verse</div>
        <div class="share-buttons">
            <button class="share-btn" onclick="copyToClipboard()" id="copy-btn">
                <span>📋</span> Copy
            </button>
            <a class="share-btn twitter"
               href="https://twitter.com/intent/tweet?text={{ verse_text | striptags | urlencode }}%20—%20{{ book }}%20{{ chapter }}:{{ verse_num }}%20(KJV)&url={{ request.url }}"
               target="_blank"
               rel="noopener">
                <span>🐦</span> Tweet
            </a>
            <a class="share-btn facebook"
               href="https://www.facebook.com/sharer/sharer.php?u={{ request.url }}"
               target="_blank"
               rel="noopener">
                <span>f</span> Share
            </a>
        </div>
    </div>

    <script>
        function copyToClipboard() {
            const verseText = {{ verse_text | striptags | tojson }};
            const reference = "{{ book }} {{ chapter }}:{{ verse_num }} (KJV)";
            const fullText = verseText + " — " + reference;

            navigator.clipboard.writeText(fullText).then(function() {
                const btn = document.getElementById('copy-btn');
                const originalHTML = btn.innerHTML;
                btn.classList.add('copied');
                btn.innerHTML = '<span>✓</span> Copied!';

                setTimeout(function() {
                    btn.classList.remove('copied');
                    btn.innerHTML = originalHTML;
                }, 2000);
            }, function(err) {
                alert('Failed to copy: ' + err);
            });
        }
    </script>
</section>

{% if cross_references %}
<div class="cross-references-section">
    <h2>Cross References</h2>
    <p>Related verses that illuminate this passage (hover to preview):</p>
    <ul style="max-width: 60%; list-style: none; padding: 0;">
        {% for ref in cross_references %}
        <li style="margin: 1rem 0; padding-left: 1.5rem; border-left: 2px solid var(--border-color-dark);">
            <sup style="font-size: 0.75rem; vertical-align: super; margin-right: 0.25rem;">{{ loop.index }}</sup>
            {% set ref_parts = ref.ref.rsplit(' ', 1) %}
            {% if ref_parts|length == 2 %}
                {% set book_name = ref_parts[0] %}
                {% set chapter_verse = ref_parts[1] %}
                {% if ':' in chapter_verse %}
                    {% set ch = chapter_verse.split(':')[0] %}
                    {% set v = chapter_verse.split(':')[1] %}
                    <strong><a href="/book/{{ book_name }}/chapter/{{ ch }}/verse/{{ v }}" class="cross-ref-link">
                        {{ ref.ref }}
                        {% if ref.text %}
                        <span class="cross-ref-tooltip">
                            <strong>{{ ref.ref }}</strong>
                            <div class="tooltip-verse-text">{{ ref.text }}</div>
                        </span>
                        {% endif %}
                    </a></strong>
                {% else %}
                    <strong>{{ ref.ref }}</strong>
                {% endif %}
            {% else %}
                <strong>{{ ref.ref }}</strong>
            {% endif %}
            {% if ref.note %} — <em style="color: var(--text-secondary);">{{ ref.note }}</em>{% endif %}
        </li>
        {% endfor %}
    </ul>
</div>
{% endif %}

{% if commentary %}
    {% if commentary.analysis %}
    <div>
        <h2>Analysis</h2>
        <p>{{ commentary.analysis|format_lists|safe }}</p>
    </div>
    {% endif %}

    {% if commentary.historical %}
    <div>
        <h2>Historical Context</h2>
        <p>{{ commentary.historical|format_lists|safe }}</p>
    </div>
    {% endif %}

    {% if commentary.theological %}
    <div>
        <h2>Theological Significance</h2>
        <p>{{ commentary.theological|format_lists|safe }}</p>
    </div>
    {% endif %}

    {% if commentary.questions %}
    <div>
        <h2>Questions for Reflection</h2>
        <ul>
            {% for question in commentary.questions %}
            <li>{{ question }}</li>
            {% endfor %}
        </ul>
    </div>
    {% endif %}
{% endif %}

<!-- Related Content for Internal Linking -->
{% if related_content and (related_content.topics or related_content.people or related_content.resources) %}
<div style="border-top: 1px solid var(--border-color); padding-top: 2rem; margin-top: 3rem;">
    <h2>Related Resources</h2>
    <p style="font-size: 0.95rem; color: var(--text-secondary); margin-bottom: 1.5rem;">
        Explore related topics, people, and study resources to deepen your understanding of this passage.
    </p>

    <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1.5rem;">
        {% if related_content.topics %}
        <div>
            <h3 style="font-size: 1rem; margin-bottom: 0.75rem; color: var(--text-secondary);">Topics</h3>
            <ul style="list-style: none; padding: 0; margin: 0;">
                {% for topic in related_content.topics %}
                <li style="margin-bottom: 0.5rem;">
                    <a href="{{ topic.url }}" style="font-size: 0.95rem;">{{ topic.name }}</a>
                </li>
                {% endfor %}
            </ul>
        </div>
        {% endif %}

        {% if related_content.people %}
        <div>
            <h3 style="font-size: 1rem; margin-bottom: 0.75rem; color: var(--text-secondary);">People</h3>
            <ul style="list-style: none; padding: 0; margin: 0;">
                {% for person in related_content.people %}
                <li style="margin-bottom: 0.5rem;">
                    <a href="{{ person.url }}" style="font-size: 0.95rem;">{{ person.name }}</a>
                </li>
                {% endfor %}
            </ul>
        </div>
        {% endif %}

        {% if related_content.resources %}
        <div>
            <h3 style="font-size: 1rem; margin-bottom: 0.75rem; color: var(--text-secondary);">Study Resources</h3>
            <ul style="list-style: none; padding: 0; margin: 0;">
                {% for resource in related_content.resources %}
                <li style="margin-bottom: 0.5rem;">
                    <a href="{{ resource.url }}" style="font-size: 0.95rem;">{{ resource.name }}</a>
                </li>
                {% endfor %}
            </ul>
        </div>
        {% endif %}
    </div>
</div>
{% endif %}

{% endblock %}