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

<div class="pagetitle" id="artistsindex-title">INDEX OF CREATORS / CONTRIBUTORS</div>

<table id="artistsindex-table">
<thead> 
  <tr>
    <th>ID</th>
    <th>LABEL</th>
    <th>ALIASES</th>
    <th>DESCRIPTION</th>
  </tr>
</thead>
<tbody>
{% for x in results['results']['bindings']%}
<tr>
    <th class="idnumber"><a href="item?id={{ x['creators']['value'] | replace('http://daap.bannerrepeater.org/entity/', '') }}">{{ x['creators']['value'] | replace('http://daap.bannerrepeater.org/entity/', '') }}</a></th>
    <th class="label"><a href="item?id={{ x['creators']['value'] | replace('http://daap.bannerrepeater.org/entity/', '') }}">{{ x["creatorsLabel"]['value'] }}</a></th>
    <th class="altaliases">
    {% if "creatorsAltLabel" in x %}
        {{ x["creatorsAltLabel"]["value"] }}
    {% endif %}
    </th>
    <th class="description">
    {% if "creatorsDescription" in x %}
        {{ x["creatorsDescription"]["value"] }}
    {% endif %}
    </th>
</tr>
{% endfor %}

</tbody>
</table>


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

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript"  src="http://cdn.datatables.net/1.10.2/js/jquery.dataTables.min.js"></script>
<script type="text/javascript"  src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>


<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($("tr").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);
    $("tr").hide();
    $("tr").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>



{% endblock content %}