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

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

<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 class="label"><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 class="description">
    {% if "creatorsDescription" in x %}
        {{ x["creatorsDescription"]["value"] }}
    {% endif %}
    </th>
</tr>
{% endfor %}

</tbody>
</table>


<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>
$(document).ready(function(){
    $('#artistsindex-table').dataTable({
        ordering: false,
        searching: false,
        lengthChange: false,
        pageLength:20,
        info:     false
    });
});
</script>

{% endblock content %}