{% if enableTemperatureGraph %}
    <div class="row-fluid">
        <div class="dropdown pull-right" aria-hidden="true">
            <div class="btn-group">
                <button class="btn btn-small dropdown-toggle" data-toggle="dropdown" href="javascript:void(0)">
                    <i class="fas fa-wrench"></i>
                </button>
                <ul class="dropdown-menu pull-right">
                    <li><a href="javascript:void(0)" data-bind="click: toggleStateMarks"><i class="fas fa-check" data-bind="style: {visibility: showStateMarks() ? 'visible' : 'hidden'}"></i> {{ _('Show state marks') }}</a></li>
                </ul>
            </div>
        </div>
    </div>
    <div class="row-fluid">
        <div id="temperature-graph" style="width: 100%" aria-hidden="true"></div>
    </div>
{% endif %}
<div class="row-fluid">

    <table id="temperature-table" class="table table-bordered table-hover" data-bind="visible: loginState.hasPermissionKo(access.permissions.CONTROL)">
        <tr>
            <th class="temperature_tool"></th>
            <th class="temperature_actual" title="{{ _('Current actual temperature as reported by your printer')|edq }}">{{ _('Actual') }}</th>
            <th class="temperature_target" title="{{ _('Current target temperature as reported by your printer')|edq }}">
                {{ _('Target') }}
                <div class="btn-group pull-right">
                    <button class="btn btn-small dropdown-toggle" title="{{ _('Set temperature profile')|edq }}" aria-label="{{ _('Set temperature profile')|edq }}" data-toggle="dropdown" data-bind="enable: $root.isOperational() && $root.loginState.hasPermissionKo($root.access.permissions.CONTROL)()"><span class="caret"></span></button>
                    <ul class="dropdown-menu">
                        <li>
                            <a href="javascript:void(0)" data-bind="click: $root.setTargetsToZero">{{ _('Off') }}</a>
                        </li>
                        <li class="divider"></li>
                        <!-- ko foreach: $root.temperature_profiles -->
                        <li>
                            <a href="javascript:void(0)" data-bind="click: function() { $root.setTargetsFromProfile($data);}, text: $root.profileText('all', $data)"></a>
                        </li>
                        <!-- /ko -->
                    </ul>
                </div>
            </th>
            <th class="temperature_offset" title="{{ _('Offset to apply to temperature commands sent from files')|edq }}">{{ _('Offset') }}</th>
        </tr>
        <!-- ko foreach: tools -->
        <tr data-bind="template: { name: 'temprow-template' }"></tr>
        <!-- /ko -->
        <tr data-bind="template: { name: 'temprow-template', data: bedTemp }, visible: hasBed"></tr>
        <tr data-bind="template: { name: 'temprow-template', data: chamberTemp }, visible: hasChamber"></tr>
    </table>

    <script type="text/html" id="temprow-template">
        <th class="temperature_tool" data-bind="text: name, attr: {title: name}"></th>
        <td class="temperature_actual" data-bind="html: formatTemperature(actual()), attr: {title: formatTemperature(actual(), undefined, undefined, true)}"></td>
        <td class="temperature_target">
            <form class="form-inline" style="margin:0" data-bind="submit: function(element) { $root.setTarget($data, element) }">
                <div class="input-prepend input-append">
                    <button type="button" class="btn btn-input-dec" data-bind="click: $root.decrementTarget, enable: $root.isOperational() && $root.loginState.hasPermissionKo($root.access.permissions.CONTROL)()" title="{{ _('Fine adjust: -1°C')|edq }}" aria-label="{{ _('Fine adjust: -1°C')|edq }}"><i class="fas fa-minus"></i></button>
                    <input type="number" min="0" max="999" class="input-mini input-nospin" style="width: 30px" data-bind="attr: {placeholder: cleanTemperature(target(), 1)}, value: newTarget, valueUpdate: 'input', enable: $root.loginState.hasPermissionKo($root.access.permissions.CONTROL)() && $root.isOperational(), event: { focus: function(d, e) {$root.handleFocus(e, 'target', $data) } }">
                    <span class="add-on">&deg;C</span>
                    <button type="button" class="btn btn-input-inc" data-bind="click: $root.incrementTarget, enable: $root.isOperational() && $root.loginState.hasPermissionKo($root.access.permissions.CONTROL)()" title="{{ _('Fine adjust: +1°C')|edq }}" aria-label="{{ _('Fine adjust: +1°C')|edq }}"><i class="fas fa-plus"></i></button>
                </div>
                <div class="btn-group">
                    <button type="submit" data-bind="enable: $root.loginState.hasPermissionKo($root.access.permissions.CONTROL)() && $root.isOperational() && $data.newTargetValid()" class="btn btn-primary" title="{{ _('Set')|edq }}" aria-label="{{ _('Set')|edq }}"><i class="fas fa-check"></i></button>
                    <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" data-bind="enable: $root.isOperational() && $root.loginState.hasPermissionKo($root.access.permissions.CONTROL)()">
                        <span class="caret"></span>
                    </button>
                    <ul class="dropdown-menu">
                        <li>
                            <a href="javascript:void(0)" data-bind="click: $root.setTargetToZero">{{ _('Off') }}</a>
                        </li>
                        <li class="divider"></li>
                        <!-- ko foreach: $root.temperature_profiles -->
                        <li>
                            <a href="javascript:void(0)" data-bind="click: function() { $root.setTargetFromProfile($parent, $data);}, text: $root.profileText($parent, $data)"></a>
                        </li>
                        <!-- /ko -->
                    </ul>
                </div>
            </form>
        </td>
        <td class="temperature_offset">
            <form class="form-inline" style="margin:0" onsubmit="return false;">
                <div class="input-append">
                    <span class="input-mini uneditable-input text-right" style="width: 30px" data-bind="text: offset"></span>
                    <span class="add-on">&deg;C</span>
                    <button class="btn" title="{{ _('Change Offset')|edq }}" aria-label="{{ _('Change Offset')|edq }}" data-bind="click: $root.changeOffset, enable: $root.isOperational() && $root.loginState.hasPermissionKo($root.access.permissions.CONTROL)()"><i class="fas fa-pencil-alt"></i></button>
                    <button class="btn" title="{{ _('Delete Offset')|edq }}" aria-label="{{ _('Delete Offset')|edq }}" data-bind="click: $root.setOffsetToZero, enable: $root.isOperational() && $root.loginState.hasPermissionKo($root.access.permissions.CONTROL)()"><i class="far fa-trash-alt"></i></button>
                </div>
            </form>
        </td>
    </script>
</div>
