<div class="list-grid">

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

  <table id="grid" class="table table-condensed table-hover table-striped">
    <thead>
      <tr>
        <th data-field="actions"
            data-sortable="false"
            data-switchable="false"
            class="actions"
        ></th>
        {% for field in list_fields %}
        <th data-field="{{field.id()}}"
            data-sortable="{{'true' if field.sortable() else 'false'}}"
            class="{{field.id()}}"
        >{{request.localizer.translate(field.label())}}</th>
        {% endfor %}
      </tr>
    </thead>
  </table>

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

    const namespace = '{{ request.registry.package_name }}';

    const $grid = $('#grid');
    $grid.bootstrapTable({
      height: $(window).height() - $('nav').height() - 30,
      url: "{{request.route_url('c2cgeoform_grid')}}",

      toolbar: "#toolbar",
      search: true,
      showRefresh: true,
      showColumns: true,

      pagination: true,
      sidePagination: 'server',
      pageSize: localStorage.getItem('pageSize') || 25,
      pageList: [10, 25, 50, 100],

      {# see: https://github.com/wenzhixin/bootstrap-table/tree/develop/src/locale #}
      {% set bootstrap_table_locales = {
          'de': 'de-DE',
          'en': 'en-US',
          'fr': 'fr-FR',
      } %}
      locale: '{{ bootstrap_table_locales[request.locale_name] }}',

      uniqueId: '_id_',
      columns: [
        {
          field: 'actions',
          formatter: function(value, row, index, field) {
            var content = '\
              <div class="btn-group dropdown">\
                <button type="button" class="btn btn-xs btn-default dropdown-toggle" data-toggle="dropdown" data-target="item-' + row._id_ + '-actions" aria-haspopup="true" aria-expanded="false">\
                  <span class="caret"></span>\
                </button>\
                <ul id="item-' + row._id_ + '-actions" class="dropdown-menu">';

            row.actions.dropdown.forEach(function(action) {
              if (action.confirmation || action.method) {
                content += '\
                  <li>\
                    <a class="c2cgeoform-item-action c2cgeoform-action-ajax ' + action.name + ' ' + action.css_class + '"\
                       href="#"\
                       data-url="' + action.url + '"\
                       data-method="' + action.method + '"\
                       data-confirmation="' + action.confirmation + '">\
                       <span class="' + action.icon + '"></span>\
                       ' + action.label + '\
                    </a>\
                  </li>';
              } else {
                content += '\
                  <li>\
                    <a class="c2cgeoform-item-action ' + action.name + ' ' + action.css_class + '"\
                       href="' + action.url + '">\
                       <span class="' + action.icon + '"></span>\
                       ' + action.label + '\
                    </a>\
                  </li>';
              }
            });

            content += '\
                </ul>\
              </div>';

            return content
            return value;
          }
        }
      ]
    });

    $(window).resize(function() {
      $grid.bootstrapTable('resetView', {
        height: $(window).height() - $('nav').height() - 30
      });
    });

    $grid.on('dbl-click-row.bs.table', function (e, row, $element) {
      if (row['actions']['dblclick']) {
        window.location = row['actions']['dblclick'];
      };
    });

    $grid.on('page-change.bs.table', function(e, number, size) {
      localStorage.setItem('pageSize', size);
    });

    $grid.on('load-success.bs.table', function (e) {

      $(".dropdown").on("shown.bs.dropdown", function () {
        $(this).children(".dropdown-menu").scrollintoview({viewPadding: 5});
      });

      $(this).find('a.c2cgeoform-action-ajax').on('click', function(e) {
        var execute = function() {
          $.ajax({
            url: $(this).data('url'),
            type: $(this).data('method'),
            success: function(data) {
              if (this.type == 'DELETE') {
                $grid.bootstrapTable('refresh');
              } else {
                window.location = data.redirect;
              }
            }
          });
        }.bind(this);

        if ($(this).data('confirmation')) {
          if (window.confirm($(this).data('confirmation'))) {
            execute();
          }
        } else {
          execute();
        }

      });

    });

  });
  </script>
</div>
