OctoprintKlipperPlugin/octoprint_klipper/templates/klipper_settings.jinja2

<form class="form-horizontal">
    <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.serialport">
        </div>
    </div>
    <div class="control-group">
        <label class="control-label">{{ _('Replace Connection Panel') }}</label>
        <div class="controls">
            <input type="checkbox" class="input-block-level" data-bind="checked: settings.settings.plugins.klipper.replace_connection_panel">
        </div>
    </div>
    <div class="control-group">
      <h4>{{ _('Macros') }}<h4>
    </div>
    <div data-bind="foreach: settings.settings.plugins.klipper.macros">   
       <div class="control-group">
           <label class="control-label">{{ _('Name') }}</label>
           <div class="controls">
                <div class="row-fluid">
                  <div class="span9">
                    <input type="text" class="input-block-level" data-bind="value: name">
                  </div>
                  <div class="span2">
                     <a href='#' data-bind='click: $parent.moveMacroUp' class="fa fa-chevron-up"></a>
                     <a href='#' data-bind='click: $parent.moveMacroDown' class="fa fa-chevron-down"></a>
                     <a href='#' data-bind='click: $parent.removeMacro' class="fa fa-trash-o"></a>
                  </div>
                </div>
              
           </div>
           <label class="control-label">{{ _('GCODE') }}</label>
           <div class="controls">
               <div class="row-fluid">
                 <div class="span9">
                    <textarea rows="4" class="block" data-bind="value: macro">
                    </textarea>
                 </div>
                 <div class="span2"></div>
               </div>
           </div>
       </div>
    </div>
    <div class="control-group">
      <div class="controls">
        <a href='#' data-bind='click: addMacro' class="fa fa-plus-circle"></a> Add Macro
      </div>
    </div>
    
    <div class="control-group">
      <h4>{{ _('Assisted Bed Leveling') }}</h4>
    </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.probeHeight">
            <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.probeLift">
           <span class="add-on">mm</span>
         </div>
         <span class="help-inline">Lift Z before moving to next point.</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.probeSpeedZ">
           <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.probeSpeedXy">
           <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">X(mm)</div>
          <div class="span3">Y(mm)</div>
          <div class="span3"> </div>
        </div>
      </div>
    </div>
    <div data-bind="foreach: settings.settings.plugins.klipper.probePoints" 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: 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' class="fa fa-plus-circle"></a> Add Point
     </div>
   </div>
</form>