kjvstudy.org/kjvstudy_org/templates/verse.html

{% extends "base.html" %}

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

{% block head %}
<style>
.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.twitter {
    background: #1DA1F2;
    color: white;
    border-color: #1DA1F2;
}

.share-btn.twitter:hover {
    background: #0d8bd9;
    border-color: #0d8bd9;
}

.share-btn.facebook {
    background: #4267B2;
    color: white;
    border-color: #4267B2;
}

.share-btn.facebook:hover {
    background: #365899;
    border-color: #365899;
}

.share-btn.copied {
    background: #28a745;
    color: white;
    border-color: #28a745;
}
</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 | link_names | safe }}</p>

    <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 %}
<section>
    <h2>Cross References</h2>
    <p>Related verses that illuminate this passage:</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);">
            {% 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 }}">{{ ref.ref }}</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>
</section>
{% endif %}

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

    {% if commentary.cross_references %}
    <section>
        <h2>Cross References</h2>
        <ul>
            {% for ref in commentary.cross_references %}
            <li>
                <strong><a href="{{ ref.url }}">{{ ref.text }}</a></strong>
                {% if ref.context %} — {{ ref.context }}{% endif %}
            </li>
            {% endfor %}
        </ul>
    </section>
    {% endif %}

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

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

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

<nav>
    <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>
{% endblock %}