{% extends "base.html" %}

{% block content %}
<div class="page-header">
    <h1>Comic Archive</h1>
    <p>Browse all {{ comics|length }} comics</p>
</div>

<section class="archive-content">
    <div class="archive-grid">
        {% for comic in comics %}
        <div class="archive-item">
            <a href="{{ url_for('comic', comic_id=comic.number) }}">
                <img src="{{ url_for('static', filename='images/thumbs/' + comic.filename) }}"
                     alt="{{ comic.title }}">
                <div class="archive-info">
                    <h3>#{{ comic.number }}: {{ comic.title }}</h3>
                    <p class="archive-date">{{ comic.date }}</p>
                </div>
            </a>
        </div>
        {% endfor %}
    </div>
</section>
{% endblock %}