{% extends "base.html" %}

{% block nav %}
{#    <nav class="navbar navbar-expand">#}
{#        <ul class="navbar-nav mr-auto"></ul>#}
{#    <form class="form-inline" method="get" action="/comics/search">#}
{#        <div class="form-group mx-2">#}
{#        <input type="text" class="form-control" minlength="3" name="q">#}
{#        </div>#}
{#        <button type="submit" class="btn btn-primary">Search</button>#}
{#    </form>#}
{#    </nav>#}
{% endblock %}

{% 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 publishers = {{ publishers|tojson }};
    function populate_page() {
        page_container.innerHTML = "";
        for (i = start;i < end; i++) {
            var list_element = `<div class="col-4" style="padding: 10px">
    <a href="/comics/${publishers[i]}">
    <div class="card">
        <img class="card-img" src="/static/images/${publishers[i]}.png" onerror="this.src='/static/images/default_banner.png'">
        <div class="card-body">
            ${publishers[i]}
        </div>
    </div>
    </a>
    </div>`;
            page_container.innerHTML += list_element;
        }
    }
    go_to_page(page_num);
    </script>
{% endblock %}
