<div class="row-fluid">
  <div id="left-side">
    <label> <i class="icon-tasks"></i> {{ _("Messages") }} </label>
    <div class="plugin-klipper-log" data-bind="foreach: logMessages">
      <div class="log-item" data-bind="css: type">
        <div data-bind="text: time" class="ts"></div>
        <div data-bind="html: msg" class="msg"></div>
      </div>
    </div>
    &nbsp;
    <button
      class="btn btn-mini pull-right clear-btn"
      data-bind="click: onClearLog"
      title="Clear Log"
    >
      <i class="fa fa-trash"></i> {{ _("Clear") }}
    </button>
  </div>
  <div id="right-side">
    <div class="control-group">
      <div class="control-group">
        <div class="controls">
          <label class="control-label"></label>
          <button
            class="btn btn-block btn-small"
            data-bind="click: onGetStatus, enable: isActive()"
            title="Query Klipper for its current status"
          >
            <i class="fa icon-black fa-info-circle"></i> {{ _("Get Status") }}
          </button>
          <button
            class="btn btn-block btn-small"
            data-bind="visible: hasRight('CONFIG', 'Ko'), click: function() {openOctoKlipperSettings('klipper-config');}"
            title="Open the Klipper configurationfile"
          >
            <i class="fa icon-black fa-file-code-o"></i>
            {{ _("Open Klipper config") }}
          </button>
        </div>
      </div>
      <div class="control-group">
        <div class="controls">
          <label class="control-label small"
            ><i class="icon-refresh"></i> {{ _("Restart") }}</label
          >
          <button
            class="btn btn-block btn-small"
            data-bind="click: onRestartHost, enable: isActive()"
            title="This will cause the host software to reload its config and perform an internal reset"
          >
            {{ _("Host") }}
          </button>
          <button
            class="btn btn-block btn-small"
            data-bind="click: onRestartFirmware, enable: isActive()"
            title="Similar to a host restart, but also clears any error state from the micro-controller"
          >
            {{ _("Firmware") }}
          </button>
        </div>
      </div>
      <div class="control-group">
        <div class="controls">
          <label class="control-label"
            ><i class="icon-wrench"></i> {{ _("Tools") }}</label
          >
          <button
            class="btn btn-block btn-small"
            data-bind="click: showLevelingDialog, enable: isActive()"
            title="Assists in manually leveling your printbed by moving the head to a configurable set of positions in sequence."
          >
            {{ _("Assisted Bed Leveling") }}
          </button>
          <button
            class="btn btn-block btn-small"
            data-bind="click: showPidTuningDialog, enable: isActive()"
            title="Determines optimal PID parameters by heat cycling the hotend/bed."
          >
            {{ _("PID Tuning") }}
          </button>
          <button
            class="btn btn-block btn-small"
            data-bind="click: showOffsetDialog, enable: isActive()"
            title="Sets a offset for subsequent GCODE coordinates."
          >
            {{ _("Coordinate Offset") }}
          </button>
          <button
            class="btn btn-block btn-small"
            data-bind="click: showGraphDialog"
            title="Assists in debugging performance issues by analyzing the Klipper log files."
          >
            {{ _("Analyze Klipper Log") }}
          </button>
        </div>
      </div>
      <div class="controls" data-bind="visible: hasRight('MACRO', 'Ko')">
        <label class="control-label"
          ><i class="icon-list-alt"></i> {{ _("Macros") }}</label
        >
        <div data-bind="foreach: settings.settings.plugins.klipper.macros">
          <!-- ko if: tab -->
          <button
            class="btn btn-block btn-small"
            data-bind="text: name, click: $parent.executeMacro, enable: $parent.isActive()"
          ></button>
          <!-- /ko -->
        </div>
      </div>
    </div>
  </div>
</div>