{% extends "base.html" %}

{% block title %}Topical Index - KJV Study{% endblock %}
{% block description %}Find Bible verses by theme and theological topic{% endblock %}

{% block head %}
<style>
.topic-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 1.5rem;
    max-width: 90%;
    margin: 2rem 0;
}

.topic-card {
    display: block;
    padding: 1.5rem;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    transition: all 0.2s;
    text-decoration: none;
    color: var(--text-color);
}

.topic-card:hover {
    border-color: var(--border-color-darker);
    box-shadow: 0 2px 12px rgba(0,0,0,0.1);
    cursor: pointer;
}

.topic-name {
    font-size: 1.4rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
    color: var(--link-color);
}

.topic-card:hover .topic-name {
    color: var(--link-hover);
}

.topic-description {
    font-size: 1rem;
    color: var(--text-secondary);
    line-height: 1.6;
    margin: 0.5rem 0;
}

.topic-subtopics {
    font-size: 0.9rem;
    color: var(--text-tertiary);
    font-style: italic;
    margin-top: 0.75rem;
}

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

/* Mobile optimizations */
@media (max-width: 768px) {
    .topic-grid {
        max-width: 100%;
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .topic-card {
        padding: 1.25rem;
    }

    .topic-name {
        font-size: 1.2rem;
    }

    .topic-description {
        font-size: 0.95rem;
    }

    .intro-text {
        max-width: 100%;
        font-size: 1.05rem;
    }
}
</style>
{% endblock %}

{% block content %}
<h1>Topical Index</h1>
<p class="subtitle">Find Verses by Theme and Subject</p>

<div>
    <p class="intro-text"><span class="newthought">Systematic topical study</span> enables thematic exploration of Scripture across both testaments. This concordance organizes key theological and practical themes, providing structured access to related passages that illuminate each subject from multiple biblical perspectives.</p>

    <p class="intro-text">Select a topic below to explore its subtopics and discover the verses that address each theme. Each reference includes contextual notes to aid understanding of its relevance to the broader subject.</p>
</div>

<div id="major-topics">
    <h2>Major Topics</h2>

    <div class="topic-grid">
        {% for topic_name, topic_data in topics.items() %}
        <a href="/topics/{{ topic_name }}" class="topic-card">
            <div class="topic-name">{{ topic_name }}</div>
            <div class="topic-description">{{ topic_data.description }}</div>
            <div class="topic-subtopics">{{ topic_data.subtopics|length }} subtopics</div>
        </a>
        {% endfor %}
    </div>
</div>

<div id="using-the-topical-index">
    <h2>Using the Topical Index</h2>
    <p class="intro-text">Each major topic contains multiple subtopics with carefully selected verses. The references provided represent foundational passages for each theme, though they are not exhaustive. Consider these as entry points for deeper study, using cross-references and concordances to expand your exploration.</p>

    <p class="intro-text">Topical study complements sequential Bible reading by allowing focused examination of specific doctrines or practical matters. Compare passages across different books and testaments to grasp the full biblical teaching on any subject.</p>
</div>

<script>
// Use standardized grid navigation from base.js
KJVNav.initGridNav('.topic-card', { gridSelector: '.topic-grid' });
</script>
{% endblock %}