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

<div class="pagetitle" id="zinesindex-title">INDEX OF ZINES</div>

<table id="zinesindex-table">
<thead> 
  <tr>
    <th>ID</th>
    <th>Work</th>
    <th>Alternative aliases</th>
    <th>Description</th>
  </tr>
</thead>
<tbody>
{% for x in results['results']['bindings']%}
<tr>
    <th class="idnumber"><a href="artwork?id={{ x['work']['value'] | replace('http://wikibase.svc/entity/', '') }}">{{ x['work']['value'] | replace('http://wikibase.svc/entity/', '') }}</a></th>
    <th class="label"><a href="artwork?id={{ x['work']['value'] | replace('http://wikibase.svc/entity/', '') }}">{{ x["workLabel"]['value'] }}</a></th>
    <th class="altaliases">
    {% if "workAltLabel" in x %}
        {{ x["workAltLabel"]["value"] }}
    {% endif %}
    </th>
    <th class="description">
    {% if "workDescription" in x %}
        {{ x["workDescription"]["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(){
    $('#zinesindex-table').dataTable({
        ordering: false,
        searching: false,
        lengthChange: false,
        pageLength:20,
        info:     false
    });
});
</script>


{% endblock content %}