<div data-dojo-type="dijit.layout.BorderContainer" style="height:100%; width:100%;" data-dojo-props="gutters: false, baseClass: 'NoGutter'">
<div data-dojo-type="dijit.layout.ContentPane" id="datagrid" data-dojo-props="region: 'center'" style="height:100%; width:100%;">
<script type="dojo/method">

  var me = this;
  require([
  "dojo/on",
  "dojo/store/JsonRest",
  "dojo/data/ObjectStore",
  "dijit/registry",
  "dijit/Tooltip",
  "dijit/form/Button",
  "dijit/layout/ContentPane",
  "dojox/grid/EnhancedGrid"
  ], function(
  on,
  JsonRest,
  ObjectStore,
  registry,
  Tooltip,
  Button,
  ContentPane,
  EnhancedGrid) {
    function acts(json) {
        var content = new ContentPane({});
        if(json['clone_url']) {
            var b = new Button({
                label: '<img src="{{ STATIC_URL }}images/ui/buttons/clone_snapshot.png">',
            });
            new Tooltip({
               connectId: [b.domNode],
               label: "{% trans "Clone Snapshot"|escapejs %}",
               position: ['above'],
            });
            content.domNode.appendChild(b.domNode);
            on(b, 'click', function() {
                editObject('{% trans "Clone snapshot"|force_escape|force_escape %}', json['clone_url'], [this,]);
            });
        }

        if(json['delete_url']) {
            var b = new Button({
                label: '<img src="{{ STATIC_URL }}images/ui/buttons/remove_snapshot.png">',
            });
            new Tooltip({
               connectId: [b.domNode],
               label: "{% trans "Destroy Snapshot"|escapejs %}",
               position: ['above'],
            });
            content.domNode.appendChild(b.domNode);
            on(b, 'click', function() {
                editObject('{% trans "Destroy this snapshot"|force_escape|force_escape %}', json['delete_url'], [this,]);
            });
        }

        if(json['rollback_url']) {
            var b = new Button({
                label: '<img src="{{ STATIC_URL }}images/ui/buttons/rollback_snapshot.png">',
            });
            new Tooltip({
               connectId: [b.domNode],
               label: "{% trans "Rollback Snapshot"|escapejs %}",
               position: ['above'],
            });
            content.domNode.appendChild(b.domNode);
            on(b, 'click', function() {
                editObject('{% trans "Rollback to this snapshot"|force_escape|force_escape %}', json['rollback_url'], [this,]);
            });
        }

        return content;
    }

    var objectStore = new JsonRest({
      target: "{% url "api_dispatch_list" api_name="v1.0" resource_name="storage/snapshot" %}"
    });
    var store = new ObjectStore({objectStore: objectStore});

    var struc = [
    {
        field: 'filesystem',
        name: '{% trans "Volume/Dataset"|escapejs %}',
        width: 'auto',
    },
    {
        field: 'name',
        name: '{% trans "Snapshot Name"|escapejs %}',
        width: 'auto',
    },
    {
        field: 'used',
        name: '{% trans "Used"|escapejs %}',
        width: 'auto',
    },
    {
        field: 'refer',
        name: '{% trans "Refer"|escapejs %}',
        width: 'auto',
    },
    {
        field: 'extra',
        name: '{% trans "Available Actions"|escapejs %}',
        width: 'auto',
        filterable: false,
        formatter: acts,
    },
    ];

    var vd = registry.byId("viewdatagrid");
    if (vd) vd.destroy();

    var grid4 = new EnhancedGrid({
        query: {},
        store: store,
        id: 'viewdatagrid',
        clientSort: true,
        //rowSelector: 'auto',
        plugins: {
            //nestedSorting: true,
            dnd: true,
            pagination: true,
            indirectSelection: true,
            filter: {
                isServerSide: false,
            },
        },
        structure: struc
    });

    // append the new grid to the div "gridContainer4":
    me.domNode.appendChild(grid4.domNode);

    // Call startup, in order to render the grid:
    grid4.startup();

  });
</script>
</div>
<div data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region: 'bottom'" style="height:62px;">
    <button id="delSnapshot" data-dojo-type="dijit.form.Button" style="margin:5px;">
        <img src="{{ STATIC_URL }}images/ui/buttons/remove_snapshot.png">
        <p>{% trans "Destroy" %}</p>

        <script type="dojo/method" data-dojo-event="onClick" data-dojo-args="evt">
          var me = this;
          require([
          "dojo/_base/array",
          "dijit/registry",
          "dojo/cookie",
          "dojo/request/xhr"
          ], function(
          darray,
          registry,
          cookie,
          xhr) {
            dg = registry.byId('viewdatagrid');
            var snaps = [];
            darray.forEach(dg.selection.getSelected(), function(item, idx) {
                snaps.push(item['fullname']);
            });
            console.log(snaps);
            if(snaps.length == 0) return true;

            editObject('{% trans "Delete snapshots"|escapejs %}', null, [me], function(data) {
                var dialog = this;
                xhr.post('{% url "storage_snapshot_delete_bulk" %}', {
                  data: {snaps: snaps.join("|")},
                  handleAs: "text",
                  sync: true,
                  headers: {"X-CSRFToken": dojo.cookie('csrftoken')},
                }).then(function(data){
                     dialog.set('content', data);
                });
            });
          });
        </script>
    </button>
</div>
</div>
