{% load freeadmin %}

<div data-dojo-type="dijit.layout.TabContainer" style="width: 100%; height: 100%;"  data-dojo-props="nested:true, doLayout:true">
  {% if sensors %}
    {% for sensor in sensors %}
      <p>{{ sensor.name }}: {% if sensor.notes %}{{ sensor.notes|join:", " }}{% else %}OK{% endif %}</p>
    {% endfor %}
  {% endif %}
  {% for enclosure in enclosures %}
    <div data-dojo-type="dijit.layout.ContentPane" title="{{ enclosure.label|escape }}">
      <h1 style="float: left;" id="encLabel{{ enclosure.id }}" 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.id|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.id|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.id|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 element in enclosure.elements %}
          <h2>{{ element.name }}</h2>
          <table>
            <thead>
              <tr>
                {% for h in element.header %}
                  <th>{{ h }}</th>
                {% endfor %}
              </tr>
            </thead>
            <tbody>
              {% for e in element.elements %}
                {% if element.has_slot_status %}
                  <tr>
                    {% for h in element.header %}
                      <td>{{ e.data|get_item:h }}</td>
                    {% endfor %}
                    <td>
                      <button data-dojo-type="dijit.form.Button" data-dojo-identify="{% if e.identify or e.fault %}1{% else %}0{% endif %}">
                        {% if not e.fault %}
                          {% trans "Fault" %}
                        {% else %}
                          {% trans "Reset LED" %}
                        {% endif %}
                        <script type="dojo/method" data-dojo-event="onClick" data-dojo-args="evt">
                        var b = this;
                        require([
                          "dojo/json",
                          "dojo/request/xhr"
                          ], function(
                          djson, xhr) {

                          b.set('label', '{% trans "Please wait..."|escapejs %}');
                          b.set('disabled',true);
                          var url;
                          if(b.attr('data-dojo-identify') == "0") {
                            url = '{% url "storage_enclosure_identify" enc=enclosure.id slot=e.slot %}';
                          } else {
                            url = '{% url "storage_enclosure_identify_clear" enc=enclosure.id slot=e.slot %}';
                          }

                          xhr.get(url, {
                            handleAs: 'text'
                          }).then(function(data, ioArgs) {
                            try {
                              var json = djson.parse(data);
                              if(json.error == true) {
                                setMessage(json.message, "error");
                              } else {
                                setMessage(json.message);
                                if(b.attr('data-dojo-identify') == "1") {
                                  b.attr('data-dojo-identify', '0');
                                  b.set('label', '{% trans "Fault"|escapejs %}');
                                } else {
                                  b.attr('data-dojo-identify', '1');
                                  b.set('label', '{% trans "Reset LED"|escapejs %}');
                                }
                              }
                            } catch(e) {
                              console.log(e);
                            }
                            b.set('disabled', false);
                          });
                        });
                        </script>
                      </button>
                    </td>
                  </tr>
                {% else %}
                  <tr>
                    {% for h in element.header %}
                      <td>{{ e.data|get_item:h }}</td>
                    {% endfor %}
                  </tr>
                {% endif %}
              {% endfor %}
            </tbody>
          </table>
        {% endfor %}
    </div>
  {% empty %}
    No enclosure was found.
  {% endfor %}
</div>