<h1>{% trans "System Information" %}</h1>
<table class="form">
    <tr>
        <th>{% trans "Hostname" %}</th>
        <td><span id="sysInfo_hostname" data-value="{{ hostname|force_escape }}">{{ hostname }}</span>
          <button data-dojo-type="dijit/form/Button">
            {% trans "Edit" %}
            <script type="dojo/method" data-dojo-event="onClick" data-dojo-args="evt">
              var editbtn = this;
              require([
                "dojo/dom",
                "dojo/dom-construct",
                "dojo/request/xhr",
                "dijit/TooltipDialog",
                "dijit/form/TextBox",
                "dijit/popup"
              ], function(
              dom,
              domConstruct,
              xhr,
              TooltipDialog,
              TextBox,
              popup
              ) {
                if(editbtn.get('editing') == true) {
                  editbtn.set('disabled', true);
                  xhr.post('{% url "network_hostname" %}', {
                    headers: {"X-CSRFToken": CSRFToken},
                    data: {"hostname": 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 host = dom.byId("sysInfo_hostname");
                      domConstruct.empty(host);
                      host.innerHTML = editbtn.get('textf').get('value');
                      host.setAttribute("data-value", editbtn.get('textf').get('value'));
                      editbtn.get('textf').destroyRecursive();
                    }
                    editbtn.set('disabled', false);
                  });
                } else {
                  editbtn.set('label', 'OK');
                  editbtn.set('editing', true);
                  var host = dom.byId("sysInfo_hostname");
                  domConstruct.empty(host);
                  var text = new TextBox({
                    value: host.getAttribute("data-value"),
                  });
                  text.placeAt(host);
                  editbtn.set('textf', text);
                }
              });
            </script>
          </button>
        </td>
    </tr>
    <tr>
        <th>{% trans "Build" %}</th>
        <td>{{ freenas_build }}</td>
    </tr>
    <tr>
        <th>{% trans "Platform" %}</th>
        <td>{{ platform }}</td>
    </tr>
    <tr>
        <th>{% trans "Memory" %}</th>
        <td>{{ physmem }}</td>
    </tr>
    <tr>
        <th>{% trans "System Time" %}</th>
        <td>{{ date }}</td>
    </tr>
    <tr>
        <th>{% trans "Uptime" %}</th>
        <td class="descr">{{ uptime }}</td>
    </tr>
    <tr>
        <th>{% trans "Load Average" %}</th>
        <td class="descr">{{ loadavg }}</td>
    </tr>
    {% for info in info_hook %}
    <tr>
        <th>{{ info.name|safe }}</th>
        <td class="descr">{{ info.value|safe }}</td>
    </tr>
    {% endfor %}
</table>
