<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>
<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>