{% extends "base.html" %}

{% block content %}
{% if archive_full_width %}
</div> {# Close container for full-width mode #}
{% endif %}

<div class="page-header{% if archive_full_width %} page-header-fullwidth{% endif %}">
    <h1>Comic Archive</h1>
    <p>Browse all {{ total_comics }} comics</p>
</div>

<section class="archive-content{% if archive_full_width %} archive-content-fullwidth{% endif %}"
         data-total-comics="{{ total_comics }}"
         data-initial-batch="{{ initial_batch }}">
    {% for section_title, section_comics in sections %}
        {% if section_title and sections_enabled %}
        <div class="section-header">
            <h2>{{ section_title }}</h2>
        </div>
        {% endif %}

        <div class="archive-grid{% if archive_full_width %} archive-grid-fullwidth{% endif %}">
            {% for comic in section_comics %}
            <div class="archive-item{% if archive_full_width %} archive-item-fullwidth{% endif %}">
                <a href="{{ url_for('comic', comic_id=comic.number) }}">
                    <img src="{{ url_for('static', filename='images/thumbs/' + comic.filename) }}"
                         onerror="this.onerror=null; this.src='{{ url_for('static', filename='images/thumbs/default.jpg') }}';"
                         alt="{{ comic.title if comic.title else '#' ~ comic.number }}"
                         loading="lazy">
                    <div class="archive-info">
                        {% if not archive_full_width %}
                        <h3>#{{ comic.number }}{% if comic.title %}: {{ comic.title }}{% endif %}</h3>
                        {% endif %}
                        <p class="archive-date">{{ comic.date }}</p>
                    </div>
                </a>
            </div>
            {% endfor %}
        </div>
    {% endfor %}
</section>

{% if archive_full_width %}
<div class="container"> {# Reopen container for footer #}
{% endif %}
{% endblock %}

{% block extra_js %}
<script src="{{ url_for('static', filename='js/archive-lazy-load.js') }}"></script>
{% endblock %}