{% extends "layout.html" %}
{% block content %}

<div id="selfpublishedindex-all">
<div class="pagetitle" id="selfpublishedindex-title">INDEX BY PUBLICATION DATE FROM NEWEST</div>

<div id="selfpublishedindex-grid">

{% for x in results['results']['bindings']%}
<div class="selfpublishedindex-items">
    <div class="selfpublishedindex-items-top">  
    {% if "image" in x %}
        <a href='/artwork?id={{ x["work"]["value"] | replace("http://daap.bannerrepeater.org/entity/", "") }}'>
            <img class="selfpublishedindex-imgs" src='{{ x["image"]["value"] | replace("wiki/File:","wiki/Special:Redirect/file/") }}'>
        </a> <br>
    {% else %}
        <a href='/artwork?id={{ x["work"]["value"] | replace("http://daap.bannerrepeater.org/entity/", "") }}'>
            <img class="selfpublishedindex-imgs" src="{{ url_for('static', filename='/imgs/Icons/placeholder_no-image2.png') }}"><br>
        </a>
    {% endif %} 
    </div>

    <div class="selfpublishedindex-items-bottom">
        <a class="title"  href='/artwork?id={{ x["work"]["value"] | replace("http://daap.bannerrepeater.org/entity/", "") }}'>
            {{ x["workLabel"]["value"]}}
        </a> <br>
        <span class="date">
        {% if "date" in x %}
            {{ x["date"]["value"] | replace("T00:00:00Z", "") }}  
        </span>

        {% endif %}
    </div>

</div>
{% endfor %}

</div>

<ul id="pagin" class="browsethearchive-pagination">
         
</ul>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

<script type="text/javascript">

// pagination script w/ support from @biberman on stackoverflow - big thanks!


let startPage;
const pageSize = 24;
const totalSlidePage = 5;
const pageCount = Math.ceil($(".selfpublishedindex-items").length / pageSize);
const slideRange = Math.floor(totalSlidePage / 2); 

slide = function() {
    startPage = $("#pagin li a.current").parent().index();
    let paginationStart = (startPage - slideRange) <= 1 ? 0 :
    (startPage >= (pageCount - slideRange) ? (pageCount - totalSlidePage) :
    (startPage - slideRange - 1));

    $("#pagin li").hide();

    for (let t = paginationStart; t < (paginationStart + totalSlidePage); t++) {
        $("#pagin li").eq(t + 1).show();
    }

    next.show();
    prev.show();

    if (startPage == 1) {
            prev.hide();
        }
    if (startPage == pageCount ) {
            next.hide();
    }
}

showPage = function() {
    console.log(startPage);
    $(".selfpublishedindex-items").hide();
    $(".selfpublishedindex-items").each(function(n) {
        if (n >= pageSize * (startPage - 1) && n < pageSize * startPage)
        $(this).show();
    });
}

for (let i = 0 ; i < pageCount; i++) {
    $("#pagin").append('<li><a href="#">' + (i + 1) + '</a></li> ');

    if (i > pageSize) {
        $("#pagin li").eq(i).hide();
    }
}

let prev = $("<li/>").addClass("prev").html("Prev").click(function() {
    let prevLi = $("#pagin li a.current").parent().prev().find("a");

    if (prevLi[0]) {
        $("#pagin li a.current").removeClass("current");
        prevLi.addClass("current");
    }

    slide();

    if (startPage != 0) {
        showPage();
    }
});

let next = $("<li/>").addClass("next").html("Next").click(function() {
    let nextLi = $("#pagin li a.current").parent().next().find("a");

    if (nextLi[0]) {
        $("#pagin li a.current").removeClass("current");
        nextLi.addClass("current");
    }
    slide();

    if (startPage <= pageCount) {
        showPage();
    }
});

$("#pagin").prepend(prev).append(next);

$("#pagin li a").click(function() {
    $('#pagin li a').removeClass('current');
    $(this).addClass('current');

    slide();
    showPage();
});

$("#pagin li a").eq(0).addClass("current");

slide();
showPage();

</script>

</div>


{% endblock content %}