{% extends "base.html" %}

{% block content %}
    <div style="text-align: center">
    {% include "pagination.html" %}
    </div>
    <div class="container col-7">
        <div id="page-container" class="row justify-content-start"></div>
    </div>
    <div style="text-align: center">
    {% include "pagination.html" %}
    </div>
{% endblock %}

{% block footer %}
    <script>
    var publisher_series = {{ publisher_series|tojson }};
    function populate_page() {
        page_container.innerHTML = "";
        for (i = start;i < end; i++) {
            var list_element = `<div class="col-3" style="padding: 10px">
    <a href="/comics/${encodeURI(publisher_series[i].publisher)}?series=${encodeURI(publisher_series[i].series)}&seriesYear=${publisher_series[i].seriesyear}">
    <div class="card">
        <img class="card-img" src="/comics/get_comic/${publisher_series[i]['id']}/0/thumbnail" onerror="this.src='/static/images/default.png'">
        <div class="card-body">
            ${publisher_series[i].series} ${publisher_series[i].seriesyear}
        </div>
    </div>
    </a>
    </div>`;
            page_container.innerHTML += list_element;
        }
    }
    go_to_page(page_num);
    </script>
{% endblock %}
