<div class="list-grid">

  <a class='btn btn-primary btn-new' href="{{request.route_url('c2cgeoform_item', action='edit', id='new')}}">{{_("New")}}</a>

  <table id="grid" data-toggle="bootgrid" class="table table-condensed table-hover table-striped">
    <thead>
      <tr>
        <th data-column-id="_id_" data-searchable="false" data-sortable="false"
            data-formatter="actions"></th>
        {% for field in list_fields %}
        <th data-column-id="{{field.id()}}" data-sortable="{{'true' if field.sortable() else 'false'}}" >{{field.label()}}</th>
        {% endfor %}
      </tr>
    </thead>
    <tbody></tbody>
  </table>

  <script type="text/javascript">
  $(function() {

    actions_template = '\
      <ul class="grid-row-actions">\
        <li class="grid-row-action">\
          <a class="btn btn-edit btn-sm btn-primary glyphicon glyphicon-pencil"\
             title="{{_("Edit")}}"\
             href="{{request.route_url('c2cgeoform_item', id='_id_')}}"></a>\
        </li>\
        <li class="grid-row-action">\
          <a class="btn btn-delete btn-sm btn-danger glyphicon glyphicon-remove"\
             title="{{_("Delete")}}"\
             data-url="{{request.route_url('c2cgeoform_item', id='_id_')}}"\
             href="#" role="button"></a>\
        </li>\
      </ul>';

    $('#grid').bootgrid({
      ajax: true,
      ajaxSettings: {
        method: "GET"
      },
      multiSort: true,
      url: "{{request.route_url('c2cgeoform_grid')}}",
      labels: {
          all: '{{_('All')}}',
          infos: '{{_('Showing ((ctx.start)) to ((ctx.end)) of ((ctx.total)) entries')}}'.replace(/\(\(/g, '{{ '{{' }}').replace(/\)\)/g, '{{ '}}' }}'),
          loading: '{{_('Loading...')}}',
          noResults: '{{_('No results found!')}}',
          refresh: '{{_('Refresh')}}',
          search: '{{_('Search')}}'
      },
      formatters: {
          "actions": function(column, row) {
              return actions_template.replace(/_id_/g, row._id_);
          }
      }
    }).on("loaded.rs.jquery.bootgrid", function(e, appendedRows) {

      $("a.btn-delete", this).on('click', function() {
        if (window.confirm('{{_("Are your sure ?")}}')) {
          $.ajax({
              url: $(this).attr("data-url"),
              type: 'DELETE',
              success: function(result) {
                  location.reload();
              }
          });
        }
      });

    });

  });
  </script>
</div>
