{% load i18n %}

<h4>{{caption}}</h4>
<table id='grid_{{name}}' class='jqgrid'></table>
<div id='pager_{{name}}'></div>

<div id='foot_{{name}}' class='gridfooter'>
{% if source_full %}
{% trans "Export as CSV" %} ({{encoding}})
<a href='{{simple_source}}csv{{ source_attrs|safe }}' target='_blank'>{% trans "simple" %}</a> - 
<a href='{{source_full}}csv{{ source_attrs|safe }}' target='_blank'>{% trans "full" %}</a>
{% else %}
<a href="{{simple_source}}csv{{ source_attrs|safe }}" target="_blank">{% trans "Export as CSV" %} ({{encoding}})</a>
{% endif %}
</div>

<script type="text/javascript" language='javascript'>

setTimeout(
    function(){
      $("#grid_{{name}}").jqGrid({
        url:'{{source|safe}}',
        datatype: "json",
        mtype: 'GET',
        colNames:['id', '', {{col_names|safe}}],
        colModel:[
          {name:'id', index:'id', hidden:true},
          {name:'link', index:'link', width:30},
          {{extra_cols|safe}}
        ],
        sortname: 'value',
        viewrecords: true,
        sortorder: "asc",
        emptyrecords: "{{no_result}}",
        loadtext: "{{loading}}",
        pager: '#pager_{{name}}',
        width: null,
        shrinkToFit: false,
        rowNum:20,
        jsonReader : {repeatitems: false},
        loadError: function (jqXHR, textStatus, errorThrown) {
            alert("{% trans "An error as occured during search. Check your query fields." %}");
        }
      });
      {% if large %}jQuery("#grid_{{name}}").jqGrid('setGridHeight', 400);{% endif %}
}, 200);

</script>

