OctoprintKlipperPlugin/octoprint_klipper/templates/klipper_sidebar.jinja2

<div class="control-group">
   <div class="controls">
      <label for="connection_printers" data-bind="css: {disabled: !connectionState.isErrorOrClosed()}, enable: connectionState.isErrorOrClosed() && loginState.isUser()">{{ _('Printer Profile') }}</label>
      <select id="connection_printers" data-bind="options: connectionState.printerOptions, optionsText: 'name', optionsValue: 'id', value: connectionState.selectedPrinter, css: {disabled: !connectionState.isErrorOrClosed()}, enable: connectionState.isErrorOrClosed() && loginState.isUser()"></select>
      <button class="btn btn-block" data-bind="click: connectionState.connect, text: connectionState.buttonText(), enable: loginState.isUser()">{{ _('Connect') }}</button>
      <button class="btn btn-block" data-bind="visible: hasRight('CONFIG', 'Ko'), click: function() {openOctoKlipperSettings('klipper-config');}">{{ _('Open Klipper config') }}</button>
   </div>
</div>
<div class="control-group" data-bind="visible: hasRight('MACRO', 'Ko')">
   <div class="controls">
      <button class="btn btn-block" data-bind="visible: loginState.hasPermissionKo(access.permissions.PLUGIN_KLIPPER_CONFIG), click: function() {openOctoKlipperSettings('klipper-config');}">{{ _('Open Klipper config') }}</button>
   </div>
</div>
<div class="control-group">
   <div class="controls">
      <label class="control-label small"><i class="icon-list-alt"></i> {{ _('Macros') }}</label>
      <div data-bind="foreach: settings.settings.plugins.klipper.macros">
         <!-- ko if: sidebar -->
         <button class="btn btn-block" data-bind="text: name, click: $parent.executeMacro, enable: $parent.isActive()"></button>
         <!-- /ko -->
      </div>
   </div>
</div>