<div data-dojo-type="dijit.layout.TabContainer" style="width: 100%; height: 100%;"  data-dojo-props="nested:true, doLayout:true">
  {% for enclosure in enclosures %}
    <div data-dojo-type="dijit.layout.ContentPane" title="{{ enclosure.label|escape }}">
    <h1 style="float: left;" id="encLabel{{ enclosure.encid }}" data-value="{{ enclosure.label|escape }}">{{ enclosure.label }}</h1> <button data-dojo-type="dijit.form.Button" style="margin-top: 20px; margin-left: 10px;">
{% trans "Edit" %}
<script type="dojo/method" data-dojo-event="onClick">
var editbtn = this;
require([
  "dojo/dom",
  "dojo/dom-construct",
  "dojo/request/xhr",
  "dijit/registry",
  "dijit/TooltipDialog",
  "dijit/form/TextBox",
  "dijit/popup"
], function(
dom,
domConstruct,
xhr,
registry,
TooltipDialog,
TextBox,
popup
) {
  if(editbtn.get('editing') == true) {
    editbtn.set('disabled', true);
    xhr.post('{% url "storage_enclosure_label" %}', {
      headers: {"X-CSRFToken": CSRFToken},
      data: {"encid": "{{ enclosure.encid|escapejs }}", "label": editbtn.get('textf').get('value')},
      handleAs: 'json'
    }).then(function(data) {
      if(data.error == true) {
        var td = new TooltipDialog({
          content: data.errors.hostname[0],
          onMouseLeave: function() {
            popup.close(td);
            td.destroyRecursive();
          }
        });
        popup.open({
          popup: td,
          around: editbtn.get('textf').domNode,
          orient: ["above", "after", "below-alt"]
        });
      } else {
        editbtn.set('editing', false);
        editbtn.set('label', 'Edit');
        var encid = dom.byId("encLabel{{ enclosure.encid|escapejs }}");
        domConstruct.empty(encid);
        encid.innerHTML = editbtn.get('textf').get('value');
        encid.setAttribute("data-value", editbtn.get('textf').get('value'));
        editbtn.get('textf').destroyRecursive();
        var pane = registry.getEnclosingWidget(editbtn.domNode.parentNode);
        pane = registry.getEnclosingWidget(pane.domNode.parentNode);
        pane = registry.getEnclosingWidget(pane.domNode.parentNode);
        pane.refresh();
      }
      editbtn.set('disabled', false);
    });
  } else {
    editbtn.set('label', 'OK');
    editbtn.set('editing', true);
    var encid = dom.byId("encLabel{{ enclosure.encid|escapejs }}");
    domConstruct.empty(encid);
    var text = new TextBox({
      value: encid.getAttribute("data-value"),
    });
    text.placeAt(encid);
    editbtn.set('textf', text);
  }
});
</script>
</button>
<div style="clear: both;"></div>
    {% for name, elements in enclosure.iter_by_name.items %}
      <h2>{{ name }}</h2>
      <table>
        {% for element in elements %}
          {% if forloop.first %}
        <thead>
          <tr>
            {% for key in element.get_columns.keys %}
            <th>{{ key }}</th>
            {% endfor %}
          </tr>
        </thead>
        <tbody>
          {% endif %}
          {{ element.render_row }}
        {% endfor %}
        <tbody>
      </table>
    {% endfor %}
    </div>
  {% empty %}
  No enclosure was found.
  {% endfor %}
</div>
