{% 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>
/* Override Tufte's 55% width for paragraphs on this page */
section > p,
section > table {
    width: 100%;
    max-width: 75%;
}

section > ol,
section > ul {
    width: 100%;
    max-width: 70%;
}

.timeline-nav {
    max-width: 75%;
    margin: 2rem 0 3rem 0;
    padding: 1.5rem 2rem;
    background: var(--surface-color);
    border: 2px solid var(--border-color);
    border-radius: 4px;
    font-size: 0.95rem;
    line-height: 1.6;
}

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

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

.timeline-nav-period {
    margin: 1.25rem 0;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--border-color);
}

.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: var(--text-primary);
}

.timeline-nav-events {
    margin-left: 1.5rem;
    color: var(--text-secondary);
    font-size: 0.9rem;
}

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

    .timeline-nav-events {
        margin-left: 1rem;
    }
}

.timeline-actions {
    margin: 1rem 0 1.5rem;
}

.timeline-download-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.35rem 0.75rem;
    font-size: 0.85rem;
    color: var(--text-secondary, #666);
    background: var(--code-bg, #f8f8f8);
    border: 1px solid var(--border-color, #ddd);
    border-radius: 4px;
    text-decoration: none;
    transition: all 0.2s;
}

.timeline-download-btn:hover {
    background: var(--bg-color, #fff);
    border-color: var(--link-color);
    color: var(--link-color);
}

.timeline-download-btn svg {
    width: 14px;
    height: 14px;
}

@media print {
    .timeline-actions,
    .timeline-download-btn {
        display: none;
    }
}
</style>
{% endblock %}

<script>
document.body.dataset.resourceReader = 'true';
</script>

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

{% if pdf_available %}
<div class="timeline-actions">
    <a class="timeline-download-btn" href="/biblical-timeline/pdf">
        <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 Timeline (PDF)
    </a>
</div>
{% endif %}

<div class="timeline-nav">
    <h2 style="margin: 0 0 1rem 0; font-size: 1.3rem; font-weight: 600; color: var(--text-primary);">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: var(--text-muted); margin-left: 0.5rem;">({{ event.date }})</span>{% endif %}
            </div>
            {% endfor %}
        </div>
    </div>
    {% endfor %}
</div>

{% if introduction %}
<section style="max-width: 75%; margin: 2rem 0 3rem 0;">
    <p style="font-size: 1.2rem; line-height: 1.8;">{{ introduction | link_verses | safe }}</p>
</section>
{% endif %}

<section id="timeline-introduction">
    <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: var(--text-secondary); margin-top: 1.5rem; padding: 1rem; background: var(--surface-color); border-left: 3px solid var(--text-muted);">
        {{ chronology_note | link_verses | safe }}
    </p>
    {% endif %}

    {% if chronology_comparison %}
    <details open style="margin-top: 2rem; max-width: 85%;">
        <summary style="cursor: pointer; font-weight: 600; font-size: 1.1rem; padding: 0.5rem 0; user-select: none;">
            Alternative Date Interpretations
        </summary>
        <div style="margin-top: 1rem;">
            <p style="font-size: 0.95rem; color: var(--text-secondary); margin-bottom: 1.5rem; line-height: 1.7;">
                Biblical chronology has been calculated in different ways by faithful scholars. This table compares three major chronological systems, all based on the Masoretic text but differing in their interpretation of genealogical relationships in Genesis 5 and 11.
            </p>
            <div style="overflow-x: auto;">
                <table style="width: 100%; border-collapse: collapse; font-size: 0.9rem;">
                    <thead>
                        <tr style="border-bottom: 2px solid var(--border-color); background: var(--surface-color);">
                            <th style="text-align: left; padding: 0.85rem; font-weight: 600;">Event</th>
                            <th style="text-align: center; padding: 0.85rem; font-weight: 600; min-width: 140px; background: rgba(75, 46, 131, 0.15);">This Timeline<br><span style="font-weight: 400; font-size: 0.85rem; color: var(--text-muted);">(Traditional)</span></th>
                            <th style="text-align: center; padding: 0.85rem; font-weight: 600; min-width: 130px;">Ussher<br><span style="font-weight: 400; font-size: 0.85rem; color: var(--text-muted);">(1650)</span></th>
                            <th style="text-align: center; padding: 0.85rem; font-weight: 600; min-width: 130px;">Scofield<br><span style="font-weight: 400; font-size: 0.85rem; color: var(--text-muted);">(1909)</span></th>
                            <th style="text-align: left; padding: 0.85rem; font-weight: 600; min-width: 200px;">Note</th>
                        </tr>
                    </thead>
                    <tbody>
                        {% for row in chronology_comparison %}
                        <tr style="border-bottom: 1px solid var(--border-color);">
                            <td style="padding: 0.85rem; font-weight: 500;">{{ row.event }}</td>
                            <td style="text-align: center; padding: 0.85rem; background: rgba(75, 46, 131, 0.15); font-weight: 700; color: var(--primary-light);">{{ row.masoretic }}</td>
                            <td style="text-align: center; padding: 0.85rem; color: var(--text-muted);">{{ row.ussher }}</td>
                            <td style="text-align: center; padding: 0.85rem; color: var(--text-muted);">{{ row.scofield }}</td>
                            <td style="padding: 0.85rem; font-size: 0.85rem; color: var(--text-secondary);">
                                {% if row.event == "Creation/Adam" %}
                                    Difference reflects genealogical interpretation
                                {% elif row.event == "The Flood" %}
                                    Gap vs. successive reckoning of Genesis 5
                                {% elif row.event == "Call of Abraham" %}
                                    Gap vs. successive reckoning of Genesis 11
                                {% elif row.event == "The Exodus" %}
                                    All chronologies align closely from this point
                                {% elif row.event == "Solomon's Temple" %}
                                    Minor variations in regnal year calculations
                                {% elif row.event == "Fall of Jerusalem" %}
                                    Confirmed by Babylonian records
                                {% elif row.event == "Birth of Christ" %}
                                    Based on reign of Herod the Great
                                {% endif %}
                            </td>
                        </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>
            <p style="font-size: 0.85rem; color: var(--text-muted); margin-top: 1rem; font-style: italic;">
                <strong>Key Difference:</strong> This timeline follows traditional conservative chronology with successive reckoning of Genesis genealogies, similar to Ussher and Scofield. Some interpreters allow for potential genealogical gaps, yielding earlier dates for Creation and the Flood. All conservative chronologies agree on dates from the Assyrian period onward (8th century BC), confirmed by extrabiblical sources.
            </p>
        </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: var(--text-muted); font-size: 0.9rem; font-weight: normal;">({{ event.date }}{% if event.alt_dates %} • {{ event.alt_dates }}{% endif %})</span></h3>
    <p>{% if event.sidenote %}<label for="sn-{{ loop.index }}-{{ period_name | lower | replace(' ', '-') }}" class="margin-toggle sidenote-number"></label>
        <input type="checkbox" id="sn-{{ loop.index }}-{{ period_name | lower | replace(' ', '-') }}" class="margin-toggle"/>
        <span class="sidenote">{{ event.sidenote | link_verses | safe }}</span>{% endif %}{{ 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 %}

{% if conclusion %}
<section id="conclusion" style="max-width: 75%; margin: 3rem 0 2rem 0;">
    <h2>Conclusion</h2>
    <p style="font-size: 1.05rem; line-height: 1.8;">{{ conclusion | link_verses | safe }}</p>
</section>
{% endif %}

<script>
(function() {
    // Get all navigable sections (period sections with IDs)
    const sections = Array.from(document.querySelectorAll('section[id]'));
    if (sections.length === 0) return;

    let selectedIndex = -1;

    function selectSection(index) {
        // Update index with bounds checking
        selectedIndex = Math.max(0, Math.min(index, sections.length - 1));

        // Scroll to the section
        sections[selectedIndex].scrollIntoView({
            behavior: 'auto',
            block: 'start'
        });

        // Update URL hash
        history.replaceState(null, null, '#' + sections[selectedIndex].id);
    }

    // Initialize from hash if present
    function initFromHash() {
        const hash = window.location.hash;
        if (hash) {
            const targetId = hash.substring(1);
            const index = sections.findIndex(s => s.id === targetId);
            if (index >= 0) {
                selectedIndex = index;
            }
        }
    }

    initFromHash();

    document.addEventListener('keydown', function(e) {
        // Don't handle if user is typing in an input
        if (e.target.tagName === 'INPUT' || e.target.tagName === 'TEXTAREA') return;
        if (KJVNav.sidebarActive) return;

        if (e.key === 'ArrowDown' || e.key === 'j') {
            e.preventDefault();
            selectSection(selectedIndex + 1);
        } else if (e.key === 'ArrowUp' || e.key === 'k') {
            e.preventDefault();
            selectSection(selectedIndex - 1);
        } else if (e.key === 'ArrowLeft') {
            e.preventDefault();
            history.back();
        }
    });
})();
</script>
{% endblock %}