{% extends "base.html" %}

{% block content %}
    <div style="text-align: center">
    <div class="comic-grid">
    {% for page_number in range(comic["pageCount"]|int) %}
        <div style="margin: auto" class="comic-thumbnail card bg-dark text-white">
            <a href="/comics/{{ comic["publisher"]|urlencode }}?series={{ comic["series"]|urlencode }}&seriesYear={{ comic["seriesYear"] }}&issue={{ comic["issue"]|urlencode }}&pageNumber={{ page_number }}">
                <img src="/comics/get_comic/{{ comic["id"] }}/{{ page_number }}/thumbnail" alt="" style="display: inline">
                <p class="card-text">{{ 1+page_number }}/{{ comic["pageCount"] }}</p>
            </a>
        </div>
    {% endfor %}
    </div>
    </div>
{% endblock %}