<form class="form-horizontal">
<ul class="nav nav-pills" id="klipper-settings">
  <li><a href="#basic" data-toggle="tab" data-profile-type="klipper-basic">Basic</a></li>
  <li><a href="#macros" data-toggle="tab" data-profile-type="klipper-macros">Macros</a></li>
  <li><a href="#level" data-toggle="tab" data-profile-type="klipper-bed">Bed Leveling</a></li>
  <li><a href="#conf" data-toggle="tab" data-profile-type="klipper-config">Klipper Configuration</a></li>
</ul>
<div class="tab-content">
  <!-- Basics -->
  <div class="tab-pane active" id="basic">
    <div class="control-group">
        <label class="control-label">{{ _('Serial Port') }}</label>
        <div class="controls">
            <input type="text" class="input-block-level" data-bind="value: settings.settings.plugins.klipper.connection.port">
        </div>
    </div>
    <div class="control-group">
        <label class="control-label">{{ _('Replace Connection Panel') }}</label>
        <div class="controls">
            <input class="controls-checkbox" title="{{ _('Replace Connection Panel') }}" type="checkbox" data-bind="checked: settings.settings.plugins.klipper.connection.replace_connection_panel">
        </div>
    </div>

    <div class="control-group">
        <label class="control-label">{{ _('Show Short Messages') }}</label>
        <div class="controls">
          <label class="checkbox" title="{{ _('on NavBar') }}"><input type="checkbox" data-bind="checked: settings.settings.plugins.klipper.configuration.shortStatus_navbar"> {{ _('on NavBar') }}</label>
          <label class="checkbox" title="{{ _('on SideBar') }}"><input type="checkbox" data-bind="checked: settings.settings.plugins.klipper.configuration.shortStatus_sidebar"> {{ _('on SideBar') }}</label>
        </div>
    </div>
    <div class="control-group">
        <label class="control-label">{{ _('Enable debug logging') }}</label>
        <div class="controls">
            <input class="controls-checkbox" title="{{ _('Enable debug logging') }}" type="checkbox" data-bind="checked: settings.settings.plugins.klipper.configuration.debug_logging">
        </div>
    </div>
    <div class="control-group">
        <label class="control-label">{{ _('Klipper Config File') }}</label>
        <div class="controls">
            <input type="text" class="input-block-level" data-bind="value: settings.settings.plugins.klipper.configuration.configpath">
        </div>
    </div>
    <div class="control-group">
        <label class="control-label">{{ _('Klipper Log File') }}</label>
        <div class="controls">
            <input type="text" class="input-block-level" data-bind="value: settings.settings.plugins.klipper.configuration.logpath">
        </div>
    </div>
    <div class="control-group">
        <label class="control-label">{{ _('Configuration Reload Command') }}</label>
        <div class="controls">
           <select data-bind="value: settings.settings.plugins.klipper.configuration.reload_command">
              <option value="RESTART">RESTART</option>
              <option value="FIRMWARE_RESTART">FIRMWARE_RESTART</option>
              <option value="manually">Manually</option>
           </select>
           <span class="help-block">
              The command that is executed when the Klipper configuration changed and needs to be reloaded.<br>
              Set this to "Manually" if you don't want to immediately restart klipper.
           </span>
        </div>
    </div>
  </div>
  <!-- Macros -->
  <div class="tab-pane" id="macros">
    <div class="control-group" style="margin-bottom: 0px;">
       <div class="controls" style="margin-left: 82px;">
          <div class="row-fluid">
            <div class="span8" style="text-align: right"><small>{{ _('Add macro button to:') }}</small></div>
            <div class="span1" style="margin: auto;text-align: center"><small>{{ _('Klipper Tab') }}</small></div>
            <div class="span2" style="margin: auto;"><small>{{ _('Sidebar') }}</small></div>
          </div>
       </div>
    </div>
    <div data-bind="foreach: settings.settings.plugins.klipper.macros">
       <div class="control-group" id="item">
           <label class="control-label">{{ _('Name') }}</label>
           <div class="controls" style="margin-left: 82px;">
                <div class="row-fluid">
                  <div class="span8">
                    <input type="text" class="input-block-level" data-bind="value: name"/>
                  </div>
                  <div class="span1" style="margin: auto; text-align: center;">
                    <input title="{{ _('Klipper Tab') }}" style="margin: auto;" type="checkbox" class="input-block-level" data-bind="checked: tab"/>
                  </div>
                  <div class="span1" style="margin: auto; text-align: center;">
                    <input title="{{ _('Sidebar') }}" style="margin: auto;" type="checkbox" class="input-block-level" data-bind="checked: sidebar"/>
                  </div>
                  <div class="span2" style="margin: auto; text-align: center;">
                     <a href='#' style="vertical-align: bottom;" data-bind='click: $parent.moveMacroUp' class="fa fa-chevron-up"></a>
                     <a href='#' style="vertical-align: bottom;" data-bind='click: $parent.moveMacroDown' class="fa fa-chevron-down"></a>
                     <a href='#' style="vertical-align: bottom;" data-bind='click: $parent.removeMacro' class="fa fa-trash-o"></a>
                  </div>
                </div>
           </div>
           <label class="control-label">{{ _('Command') }}</label>
           <div class="controls" style="margin-left: 82px;">
               <div class="row-fluid">
                 <div class="span12" style="margin-top:2px;">
                    <textarea rows="2" class="block" data-bind="value: macro">
                    </textarea>
                 </div>
               </div>
           </div>
       </div>
    </div>
    <div class="control-group">
      <div class="controls">
        <a href='#' data-bind='click: addMacro' title="{{ _('Add Macro') }}" class="fa fa-plus-circle"></a> {{ _('Add Macro') }}
      </div>
    </div>
    <div class="control-group">
        <span class="help-block">
         To show a dialog that asks for parameters you can write your macro like in the following example:<br>
        </span>
    </div>
    <div class="control-group">
      <pre>
        PID_CALIBRATE
        HEATER={label:Heater, default:extruder, options:extruder|extruder1}
        TARGET={label:Target Temperature, unit:°C, default:190}
        WRITE_FILE={label:Write to File, default:0, options:0|1}
      </pre>
    </div>
  </div>
  <!-- Leveling -->
  <div class="tab-pane" id="level">
    <div class="control-group">
       <span class="help-block">
           This feature assists in manually leveling you print bed by moving the head to the defined points in sequence.<br>
           If you use a piece of paper for leveling, set "Probe Height" to the paper thickness eg. "0.1".
        </span>
    </div>
    <div class="control-group">
      <label class="control-label">{{ _('Probe Height') }}</label>
      <div class="controls">
         <div class="input-append">
            <input type="text" class="input-block-level span3" data-bind="value: settings.settings.plugins.klipper.probe.height">
            <span class="add-on">mm</span>
         </div>
         <span class="help-inline">{{ _('Z-height to probe at') }}</span>
      </div>
    </div>
    <div class="control-group">
      <label class="control-label">{{ _('Probe Lift') }}</label>
      <div class="controls">
         <div class="input-append">
           <input type="text" class="input-block-level span3" data-bind="value: settings.settings.plugins.klipper.probe.lift">
           <span class="add-on">mm</span>
         </div>
         <span class="help-inline">{{ _('Lift Head by this amount before moving.') }}</span>
      </div>
    </div>
    <div class="control-group">
      <label class="control-label">{{ _('Probe Feedrate Z') }}</label>
      <div class="controls">
        <div class="input-append">
          <input type="text" class="input-block-level span3" data-bind="value: settings.settings.plugins.klipper.probe.speed_z">
          <span class="add-on">mm/min</span>
        </div>
      </div>
    </div>
    <div class="control-group">
      <label class="control-label">{{ _('Feedrate X/Y') }}</label>
      <div class="controls">
        <div class="input-append">
          <input type="text" class="input-block-level span3" data-bind="value: settings.settings.plugins.klipper.probe.speed_xy">
          <span class="add-on">mm/min</span>
        </div>
      </div>
    </div>
    <div class="control-group">
      <h5>{{ _('Probe Points') }}</h5>
      <div class="controls">
        <div class="row-fluid">
          <div class="span3">name</div>
          <div class="span3">x(mm)</div>
          <div class="span3">y(mm)</div>
          <div class="span3"> </div>
        </div>
      </div>
    </div>
    <div data-bind="foreach: settings.settings.plugins.klipper.probe.points" class="control-group">
      <label class="control-label" data-bind="text: $index"></label>
      <div class="controls">
        <div class="row-fluid">
          <div class="span3"><input type="text" class="input-block-level" data-bind="value: name"></div>
          <div class="span3"><input type="text" class="input-block-level" data-bind="value: x"></div>
          <div class="span3"><input type="text" class="input-block-level" data-bind="value: y"></div>
          <div class="span3">
            <a href='#' data-bind='click: $parent.moveProbePointUp' class="fa fa-chevron-up"></a>
            <a href='#' data-bind='click: $parent.moveProbePointDown' class="fa fa-chevron-down"></a>
            <a href='#' data-bind='click: $parent.removeProbePoint' class="fa fa-trash-o"></a>
          </div>
        </div>
      </div>
    </div>
    <div class="control-group">
      <div class="controls">
        <a href='#' data-bind="click: addProbePoint" title="{{ _('Add Point') }}" class="fa fa-plus-circle"></a> {{ _('Add Point') }}
      </div>
    </div>
  </div>
  <!-- Klipper Conf -->
  <div class="tab-pane" id="conf">
    <div class="control-group">
      <script src="plugin/klipper/static/js/lib/ace/ace.min.js" type="text/javascript" charset="utf-8"></script>
      <script src="plugin/klipper/static/js/lib/ace/theme-monokai.min.js" type="text/javascript" charset="utf-8"></script>
      <script src="plugin/klipper/static/js/lib/ace/mode-klipper_config.js" type="text/javascript"></script>
      <div class="editor-controls">
        <button class="btn btn-small" data-bind="click: loadLastSession"
          title="{{ _('Reload last changes') }}">
          <i class="fas fa-redo"></i> {{ _('Reload last changes') }}
        </button>
        <button class="btn btn-small" data-bind='click: reloadFromFile'
          title="{{ _('Reload from file') }}">
          <i class="fas fa-upload"></i> {{ _('Reload from file') }}
        </button>
        <label class="inline"><input class="inline-checkbox" type="checkbox" data-bind="checked: settings.settings.plugins.klipper.configuration.parse_check"> {{ _('Check parsing on save') }}</label>
        &nbsp;&nbsp;
        <a href='#' data-bind="click: minusFontsize" title="{{ _('Decrease Fontsize') }}" class="fas fa-search-minus"></a>
        <a href='#' data-bind="click: plusFontsize" title="{{ _('Increase Fontsize') }}" class="fas fa-search-plus"></a>
      </div>
      <div class="conf-editor">
        <input id="hdnLoadKlipperConfig" type="hidden" data-bind="value: configBound(settings.settings.plugins.klipper.config)" />
        <div id="plugin-klipper-config"></div>
      </div>
    </div>
  </div>
</div>
</form>