OctoprintKlipperPlugin/octoprint_klipper/templates/klipper_settings.jinja2

<form class="form-horizontal">
<ul class="nav nav-pills" id="klipper-settings">
  <li><a href="#basic" data-toggle="tab">Basic</a></li>
  <li><a href="#macros" data-toggle="tab">Macros</a></li>
  <li><a href="#level" data-toggle="tab">Bed Leveling</a></li>
  <li><a href="#conf" data-toggle="tab">Klipper Configuration</a></li>
</ul>
<div class="tab-content">
  <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 type="checkbox" class="input-block-level" data-bind="checked: settings.settings.plugins.klipper.connection.replace_connection_panel">
        </div>
    </div>
    <div class="control-group">
        <label class="control-label">{{ _('Klipper Config Path') }}</label>
        <div class="controls">
            <input type="text" class="input-block-level" data-bind="value: settings.settings.plugins.klipper.configuration.path">
        </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>
           </select>
           <span class="help-block">
              The command that is executed when the Klipper configuration changed and needs to be reloaded.
           </span>
        </div>
    </div>
  </div>
  <div class="tab-pane" id="macros">
    <div class="control-group">
       <div class="controls">
          <div class="row-fluid">
            <div class="span8" style="text-align: right"><small>{{ _('Add macro button to:') }}</small></div>
            <div class="span1"><small>{{ _('Klipper Tab') }}</small></div>
            <div class="span2"><small>{{ _('Sidebar') }}</small></div>
          </div>
       </div>
    </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="span8">
                    <input type="text" class="input-block-level" data-bind="value: name"/>
                  </div>
                  <div class="span1">
                    <input type="checkbox" class="input-block-level" data-bind="checked: tab"/>
                  </div>
                  <div class="span1">
                    <input type="checkbox" class="input-block-level" data-bind="checked: sidebar"/>
                  </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="span8">
                    <textarea rows="2" 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>
  <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' class="fa fa-plus-circle"></a> {{ _('Add Point') }}
     </div>
   </div>
  </div>
  <div class="tab-pane" id="conf">
   <div class="control-group">
      <textarea id="plugin-klipper-config" rows="31" class="block" data-bind="value: settings.settings.plugins.klipper.config"></textarea>
   </div>
  </div>
</div>
</form>