{% extends "base.html" %}

{% block title %}Biblical Timeline - Major Bible Events - KJV Study{% endblock %}
{% block description %}Explore the chronological timeline of major biblical events from Creation to the early Church.{% endblock %}

{% block head %}
<style>
.timeline-nav {
    max-width: 75%;
    margin: 2rem 0 3rem 0;
    padding: 1.5rem 2rem;
    background: #fafafa;
    border: 2px solid #ddd;
    border-radius: 4px;
    font-size: 0.95rem;
    line-height: 1.6;
}

.timeline-nav a {
    color: var(--text-color);
    text-decoration: none;
    border-bottom: 1px dotted #999;
    transition: all 0.2s;
}

.timeline-nav a:hover {
    color: var(--link-color);
    border-bottom-color: var(--link-color);
    border-bottom-style: solid;
}

.timeline-nav-period {
    margin: 1.25rem 0;
    padding-bottom: 1rem;
    border-bottom: 1px solid #e5e5e5;
}

.timeline-nav-period:last-child {
    border-bottom: none;
}

.timeline-nav-period-name {
    font-weight: 700;
    font-size: 1.05rem;
    display: block;
    margin-bottom: 0.5rem;
    color: #111;
}

.timeline-nav-events {
    margin-left: 1.5rem;
    color: #555;
    font-size: 0.9rem;
}

@media (max-width: 768px) {
    .timeline-nav {
        max-width: 100%;
        padding: 1rem 1.25rem;
    }

    .timeline-nav-events {
        margin-left: 1rem;
    }
}
</style>
{% endblock %}

{% block content %}
<h1>Biblical Timeline</h1>
<p class="subtitle">Major events from Creation to the early Church</p>

<div class="timeline-nav">
    <h2 style="margin: 0 0 1rem 0; font-size: 1.3rem; font-weight: 600; color: #333;">Table of Contents</h2>
    {% for period_name, events in timeline_events.items() %}
    <div class="timeline-nav-period">
        <span class="timeline-nav-period-name"><a href="#{{ period_name | lower | replace(' ', '-') | replace('&', 'and') }}">{{ period_name }}</a></span>
        <div class="timeline-nav-events">
            {% for event in events %}
            <div style="margin: 0.25rem 0;">
                <a href="#{{ (period_name + '-' + event.title) | lower | replace(' ', '-') | replace('&', 'and') | replace('\'', '') }}">{{ event.title }}</a>
                {% if event.date %}<span style="color: #999; margin-left: 0.5rem;">({{ event.date }})</span>{% endif %}
            </div>
            {% endfor %}
        </div>
    </div>
    {% endfor %}
</div>

<section>
    <p>This timeline presents key events of biblical history with calculated dates and relevant scripture references.</p>

    {% if chronology_note %}
    <p style="font-size: 0.95rem; color: #555; margin-top: 1.5rem; padding: 1rem; background: #f9f9f9; border-left: 3px solid #666;">
        {{ chronology_note | link_verses | safe }}
    </p>
    {% endif %}

    {% if chronology_comparison %}
    <details open style="margin-top: 2rem; max-width: 75%;">
        <summary style="cursor: pointer; font-weight: 600; font-size: 1.1rem; padding: 0.5rem 0; user-select: none;">
            Compare Biblical Chronologies
        </summary>
        <div style="margin-top: 1rem; overflow-x: auto;">
            <table style="width: 100%; border-collapse: collapse; font-size: 0.95rem;">
                <thead>
                    <tr style="border-bottom: 2px solid #333;">
                        <th style="text-align: left; padding: 0.75rem; font-weight: 600;">Event</th>
                        <th style="text-align: center; padding: 0.75rem; font-weight: 600;">Masoretic (Successor Method)</th>
                        <th style="text-align: center; padding: 0.75rem; font-weight: 600;">Ussher (1650)</th>
                        <th style="text-align: center; padding: 0.75rem; font-weight: 600;">Scofield (1909)</th>
                    </tr>
                </thead>
                <tbody>
                    {% for row in chronology_comparison %}
                    <tr style="border-bottom: 1px solid #ddd;">
                        <td style="padding: 0.75rem;">{{ row.event }}</td>
                        <td style="text-align: center; padding: 0.75rem; font-weight: 600; background: #f0f8ff;">{{ row.masoretic }}</td>
                        <td style="text-align: center; padding: 0.75rem;">{{ row.ussher }}</td>
                        <td style="text-align: center; padding: 0.75rem;">{{ row.scofield }}</td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
    </details>
    {% endif %}
</section>

{% for period_name, events in timeline_events.items() %}
<section id="{{ period_name | lower | replace(' ', '-') | replace('&', 'and') }}">
    <h2>{{ period_name }}</h2>

    {% for event in events %}
    <h3 id="{{ (period_name + '-' + event.title) | lower | replace(' ', '-') | replace('&', 'and') | replace('\'', '') }}">{{ event.title }} <span style="color: #666; font-size: 0.9rem; font-weight: normal;">({{ event.date }}{% if event.alt_dates %} • {{ event.alt_dates }}{% endif %})</span></h3>
    <p>{{ event.description | link_verses | safe }}</p>

    {% if event.verses %}
    <ul>
        {% for verse in event.verses %}
        <li>
            {% set ref_parts = verse.reference.split(' ') %}
            {% if ref_parts|length >= 2 %}
                {% if ref_parts[0] in ['1', '2'] and ref_parts|length >= 3 %}
                    {% set book = ref_parts[0] + ' ' + ref_parts[1] %}
                    {% set chapter_verse_part = ref_parts[2] %}
                {% else %}
                    {% set book = ref_parts[0] %}
                    {% set chapter_verse_part = ref_parts[1] %}
                {% endif %}

                {% if ':' in chapter_verse_part %}
                    {% set chapter = chapter_verse_part.split(':')[0] %}
                    {% set verse_part = chapter_verse_part.split(':')[1] %}

                    {# Check if verse part contains a range (e.g., "7-8") #}
                    {% if '-' in verse_part %}
                        {# Verse range - use anchor syntax like #verse-7-8 #}
                        <a href="/book/{{ book }}/chapter/{{ chapter }}#verse-{{ verse_part }}">{{ verse.reference }}</a> — {{ verse.text }}
                    {% else %}
                        {# Single verse - use anchor syntax like #verse-7 #}
                        <a href="/book/{{ book }}/chapter/{{ chapter }}#verse-{{ verse_part }}">{{ verse.reference }}</a> — {{ verse.text }}
                    {% endif %}
                {% elif '-' in chapter_verse_part %}
                    {# Chapter range (e.g., "1-2") - just link to first chapter #}
                    {% set chapter = chapter_verse_part.split('-')[0] %}
                    <a href="/book/{{ book }}/chapter/{{ chapter }}">{{ verse.reference }}</a> — {{ verse.text }}
                {% else %}
                    {# Just chapter number #}
                    {% set chapter = chapter_verse_part %}
                    <a href="/book/{{ book }}/chapter/{{ chapter }}">{{ verse.reference }}</a> — {{ verse.text }}
                {% endif %}
            {% else %}
                {{ verse.reference }} — {{ verse.text }}
            {% endif %}
        </li>
        {% endfor %}
    </ul>
    {% endif %}
    {% endfor %}
</section>
{% endfor %}
{% endblock %}