{% extends "base.html" %}

{% block title %}Theological Resources - KJV Study{% endblock %}
{% block description %}Explore comprehensive biblical resources including people, theology, history, and study tools{% endblock %}

{% block head %}
<style>
.intro-text {
    max-width: 65%;
    font-size: 1.2rem;
    line-height: 1.9;
    margin: 1.5rem 0 3rem 0;
}

.resource-category {
    margin-bottom: 3rem;
}

.category-title {
    font-size: 1.4rem;
    font-weight: 400;
    font-style: italic;
    margin-bottom: 1.5rem;
    color: var(--text-secondary);
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 0.5rem;
}

.resource-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1.5rem;
    margin-bottom: 2rem;
}

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

.resource-card:hover {
    border-color: var(--border-color-darker);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    cursor: pointer;
}

.resource-card h3 {
    font-size: 1.2rem;
    font-weight: 600;
    margin: 0 0 0.5rem 0;
    color: var(--text-color);
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.resource-card:hover h3 {
    color: var(--link-hover);
}

.resource-badge {
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 0.15rem 0.4rem;
    border-radius: 3px;
    background: #d4af37;
    color: #fff;
    font-weight: 600;
}

.resource-card.featured {
    border-color: #d4af37;
    border-width: 2px;
    background: linear-gradient(135deg, #fffde7, var(--bg-color));
}

.resource-count {
    font-size: 0.8rem;
    color: var(--text-tertiary);
    font-style: italic;
    margin-bottom: 0.75rem;
}

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

@media (max-width: 768px) {
    .resource-grid {
        grid-template-columns: 1fr;
        gap: 1.25rem;
    }

    .intro-text {
        max-width: 100%;
        font-size: 1.1rem;
        line-height: 1.8;
    }

    .category-title {
        font-size: 1.3rem;
        color: var(--text-color);
        border-bottom: 2px solid var(--border-color-darker);
        padding-bottom: 0.75rem;
        margin-bottom: 1.25rem;
    }

    .resource-card {
        padding: 1.25rem;
        border: 2px solid var(--border-color-darker);
        border-radius: 6px;
        background: var(--bg-color);
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
    }

    .resource-card h3 {
        font-size: 1.15rem;
        margin-bottom: 0.6rem;
        color: var(--text-color);
        font-weight: 600;
        border-bottom: 2px solid var(--border-color-darker);
        padding-bottom: 2px;
    }

    .resource-count {
        font-size: 0.85rem;
        color: var(--text-secondary);
        font-weight: 500;
        margin-bottom: 0.65rem;
    }

    .resource-description {
        font-size: 0.95rem;
        line-height: 1.65;
        color: var(--text-color);
    }

    .resource-category {
        margin-bottom: 2.5rem;
    }
}

/* Dark mode */
[data-theme="dark"] .resource-card {
    background: #1a1a1a;
    border-color: #333;
}

[data-theme="dark"] .resource-card:hover {
    border-color: #555;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

[data-theme="dark"] .resource-card.featured {
    background: linear-gradient(135deg, #2a2a1a, #1a1a1a);
    border-color: #d4af37;
}

[data-theme="dark"] .resource-card h3 {
    color: #e0e0e0;
}

[data-theme="dark"] .resource-card:hover h3 {
    color: #6b9b7a;
}

[data-theme="dark"] .resource-count {
    color: #888;
}

[data-theme="dark"] .resource-description {
    color: #aaa;
}
</style>
{% endblock %}

{% block content %}
<h1>Theological Resources</h1>
<p class="subtitle">A Curated Collection of Biblical Study Materials</p>

<div>
    <p class="intro-text"><span class="newthought">These resources</span> provide comprehensive explorations of biblical people, theological concepts, historical contexts, and study tools. Each section offers detailed treatments grounded in the Authorized King James Version, with careful attention to scriptural accuracy and theological precision.</p>
</div>

{% for category, items in resources.items() %}
<div id="{{ category | lower | replace(' ', '-') }}" class="resource-category">
    <h2 class="category-title">{{ category }}</h2>
    <div class="resource-grid">
        {% for resource in items %}
        <a href="{{ resource.url }}" class="resource-card{% if resource.badge %} featured{% endif %}">
            <h3>
                {{ resource.name }}
                {% if resource.badge %}
                <span class="resource-badge">{{ resource.badge }}</span>
                {% endif %}
            </h3>
            <div class="resource-count">{{ resource.count }}</div>
            <p class="resource-description">{{ resource.description }}</p>
        </a>
        {% endfor %}
    </div>
</div>
{% endfor %}

<div id="additional-tools">
    <h2>Additional Tools</h2>
    <p>Beyond these theological resources, explore our <a href="/reading-plans">Reading Plans</a> for structured Bible study, browse the <a href="/topics">Topical Index</a> for thematic studies, or use the <a href="/search">Search</a> to find specific passages.</p>
</div>

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