{% extends "base.html" %}

{% block title %}{{ topic_name }} - Topical Index - KJV Study{% endblock %}
{% block description %}{{ topic.description }}{% endblock %}

{% block head %}
<style>
.topic-overview {
    max-width: 60%;
    font-size: 1.2rem;
    line-height: 1.9;
    margin: 1.5rem 0;
}

.subtopics-container {
    max-width: 70%;
    margin: 2rem 0;
}

.subtopic-section {
    margin: 2.5rem 0;
}

.topic-actions {
    margin: 1.25rem 0;
}

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

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

@media print {
    .topic-actions,
    .print-btn {
        display: none;
    }
}

.subtopic-header {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--link-color);
    margin-bottom: 0.5rem;
}

.subtopic-description {
    font-style: italic;
    color: var(--text-secondary);
    margin-bottom: 1rem;
}

.verses-list {
    list-style: none;
    padding: 0;
    margin: 1rem 0;
}

.verse-item {
    margin: 1rem 0;
    padding-left: 1.5rem;
    border-left: 2px solid var(--border-color);
}

.verse-ref {
    font-weight: 600;
    font-size: 1.05rem;
}

.verse-ref a {
    color: var(--link-color);
    text-decoration: none;
}

.verse-ref a:hover {
    color: var(--link-hover);
    border-bottom: 1px solid var(--link-hover);
}

.verse-note {
    color: var(--text-secondary);
    font-style: italic;
    margin-left: 0.5rem;
}

.intro-text {
    max-width: 60%;
    font-size: 1.2rem;
    line-height: 1.9;
    margin: 1rem 0;
}
</style>
{% endblock %}

{% block content %}
<h1>{{ topic_name }}</h1>
<p class="subtitle">{{ topic.description }}</p>

{% if pdf_available and pdf_url %}
<div class="topic-actions">
    <a href="{{ pdf_url }}" 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 Topic PDF
    </a>
</div>
{% endif %}

<div>
    <h2>Overview</h2>
    {% if topic.overview %}
        {{ topic.overview | safe }}
    {% else %}
    <div class="topic-overview">
        This topical index organizes key Scripture passages related to {{ topic_name|lower }}. Each subtopic below addresses a specific aspect of this theme, with carefully selected verses that establish biblical teaching on the subject.
    </div>
    {% endif %}
</div>

<div>
    <h2>Subtopics</h2>

    <div class="subtopics-container">
        {% for subtopic_name, subtopic_data in topic.subtopics.items() %}
        <div class="subtopic-section">
            <h3 class="subtopic-header">{{ subtopic_name }}</h3>
            <p class="subtopic-description">{{ subtopic_data.description }}</p>

            <ul class="verses-list">
                {% for verse in subtopic_data.verses %}
                <li class="verse-item">
                    <span class="verse-ref">
                        {% set ref_parts = verse.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] %}
                                {% if '-' not in v %}
                                    {# Single verse - make it a link #}
                                    <a href="/book/{{ book_name }}/chapter/{{ ch }}/verse/{{ v }}">{{ verse.ref }}</a>
                                {% else %}
                                    {# Verse range - link to chapter with anchor #}
                                    {% set v_start = v.split('-')[0] %}
                                    {% set v_end = v.split('-')[1] %}
                                    <a href="/book/{{ book_name }}/chapter/{{ ch }}#verse-{{ v_start }}-{{ v_end }}">{{ verse.ref }}</a>
                                {% endif %}
                            {% else %}
                                {# No colon, just display text #}
                                {{ verse.ref }}
                            {% endif %}
                        {% else %}
                            {{ verse.ref }}
                        {% endif %}
                    </span>
                    {% if verse.note %}
                    <span class="verse-note">— {{ verse.note }}</span>
                    {% endif %}
                </li>
                {% endfor %}
            </ul>
        </div>
        {% endfor %}
    </div>
</div>

<div>
    <h2>Study Guidance</h2>
    <p class="intro-text"><span class="newthought">Topical study benefits</span> from reading verses in their broader context. Click any reference above to view the complete passage and surrounding verses. Consider comparing how different biblical authors address the same theme across various contexts and time periods.</p>

    <p class="intro-text">Cross-reference study deepens understanding. Many verses listed here connect to other passages—use the cross-references provided on individual verse pages to trace theological themes throughout Scripture.</p>
</div>

<div>
    <p><a href="/topics">← Back to all topics</a></p>
</div>
{% endblock %}