{% extends "FOMManagerBundle::manager.html.twig" %}

{% block js %}
  {{ parent() }}
  <style type="text/css" media="all">
    .buttons > .button-navigation {
      white-space: nowrap;
    }

    .buttons > .button-navigation button::before {
      white-space: nowrap;
    }
  </style>
  <script src="{{ asset('bundles/mapbenderdatasource/SymfonyAjaxManager.js') }}"></script>
  <script type="text/javascript">
    $(function() {
      var container = $('.content');
      var manager = new SymfonyAjaxManager("{{ path("fom_manager_manager_index") }}{{ routeUri }}");
      var buttons = [];

      manager.query("list").done(function(r) {
        var table = $("<div/>").resultTable({
          lengthChange: false,
          searching:    true,
          ordering:     true,
          paging:       false,
          autoWidth:    false,
          columns:      [{
            data:  'id',
            title: 'ID'
          }, {
            data:  'geomType',
            title: 'Type',
            render: function(data, type, row) {
                return data || row.geomType || null;
            }
          }, {
            data:      'connection',
            title:     'Connection'

          }],
          buttons:      buttons,
          data:         []
        });

        var tableWidget = table.data('visUiJsResultTable');
        var tableApi = table.resultTable('getApi');
        var selectionManager;
        tableApi.on('draw.dt', function(a, b, c) {
          selectionManager = tableWidget.getSelection();
          $.each(tableApi.$('tr'), function() {
            var tr = this;
            var rowData = tableWidget.getDataByRow(tr);

            if(rowData.enabled) {
              selectionManager.add(rowData);
            }
          });
        });

        tableApi.clear();
        tableApi.rows.add(_.toArray(r.list));
        tableApi.draw();
        container.append(table);
      });
    });
  </script>
{% endblock %}