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


<table id="artistsindex-table">
<thead> 
  <tr>
    <th>ID</th>
    <th>Creator's Name</th>
    <th>Alternative aliases</th>
    <th>Description</th>
  </tr>
</thead>
<tbody>
{% for x in results['results']['bindings']%}
<tr>
	<th><a href="person?id={{ x['creators']['value'] | replace('http://daap.bannerrepeater.org/entity/', '') }}">#{{ x['creators']['value'] | replace('http://daap.bannerrepeater.org/entity/', '') }}</a></th>
	<th><a href="person?id={{ x['creators']['value'] | replace('http://daap.bannerrepeater.org/entity/', '') }}">{{ x["creatorsLabel"]['value'] }}</a></th>
	<th>
	{% if "creatorsAltLabel" in x %}
		{{ x["creatorsAltLabel"]["value"] }}
	{% endif %}
	</th>
	<th>
	{% if "creatorsDescription" in x %}
		{{ x["creatorsDescription"]["value"] }}
	{% endif %}
	</th>
</tr>
{% endfor %}

</tbody>
</table>

	<script type="text/javascript">
		$(document).ready(function(){
    $('#data').after('<div id="nav"></div>');
    var rowsShown = 20;
    var rowsTotal = $('#artistsindex-table tbody tr').length;
    var numPages = rowsTotal/rowsShown;
    for(i = 0;i < numPages;i++) {
        var pageNum = i + 1;
        $('#nav').append('<a href="#" rel="'+i+'">'+pageNum+'</a> ');
    }
    $('#artistsindex-table tbody tr').hide();
    $('#artistsindex-table tbody tr').slice(0, rowsShown).show();
    $('#nav a:first').addClass('active');
    $('#nav a').bind('click', function(){

        $('#nav a').removeClass('active');
        $(this).addClass('active');
        var currPage = $(this).attr('rel');
        var startItem = currPage * rowsShown;
        var endItem = startItem + rowsShown;
        $('#artistsindex-table tbody tr').css('opacity','0.0').hide().slice(startItem, endItem).
        css('display','table-row').animate({opacity:1}, 300);
    });
});
	</script>

<style type="text/css">
	#artistsindex-table tr {
  display: none;
}
</style>


{% endblock content %}