script#switch-template(type='text/template')
  li.sortable.switch-device.no-header(data-bind="attr:{ id: device.id }")
    label.device-label(data-bind="text: name, tooltip: $data.labelTooltipHtml")
    | 
    select.switch(
      data-bind="attr: { id: switchId }, value: switchState")
      option(value="off")=__('Off')
      option(value="on")=__('On')
    | 
    span.error(data-bind="text: ($data.error() ? $data.error() : '') ")
    | 
    span.attributes(data-bind="template: { name: 'switch-attribute-template', foreach: $data.device.attributes, afterRender: $data.afterAttributeRender }")
script#shutter-template(type='text/template')
  li.sortable.shutter-device.no-header(data-bind="attr:{ id: device.id }")
    label.device-label(data-bind="text: name, tooltip: $data.labelTooltipHtml")
    | 
    div.shutter-buttons.ui-mini.ui-controlgroup.ui-controlgroup-horizontal.ui-corner-all(data-role='controlgroup', data-type='horizontal', data-mini='true', data-enhanced="true")
      div.ui-controlgroup-controls
        a.shutter-down.ui-first-child.ui-btn.ui-corner-all.ui-icon-arrow-d.ui-btn-icon-left(href='#')=__('Down')
        a.shutter-up.ui-last-child.ui-btn.ui-corner-all.ui-icon-arrow-u.ui-btn-icon-left(href='#')=__('Up')
script#dimmer-template(type='text/template')
  li.sortable.dimmer-device.no-header(data-bind="attr:{ id: device.id }")
    div.item-inner
      label.device-label(data-bind="text: name, tooltip: $data.labelTooltipHtml")
      | 
      input.dimmer(min="0", max="100", step="1", data-highlight="true",
        data-bind="attr: { id: sliderId }, value: sliderValue")
      | 
      span.attributes(data-bind="template: { name: 'dimmer-attribute-template', foreach: $data.device.attributes, afterRender: $data.afterAttributeRender }")  
script#device-template(type='text/template')     
  li.sortable.device.no-header(data-bind="attr:{ id: device.id }")
    label.device-label(data-bind="text: name, tooltip: $data.labelTooltipHtml")
    | 
    span.error(data-bind="text: ($data.error() ? $data.error() : '') ")
    | 
    span.attributes(data-bind="template: { name: 'attribute-template', foreach: $data.device.attributes, afterRender: $data.afterAttributeRender }")
script#buttons-template(type='text/template')
  li.sortable.button.no-header(data-bind="attr:{ id: device.id }")
    label.device-label(data-bind="text: name, tooltip: $data.labelTooltipHtml")
    div.buttons(data-bind="foreach: $data.device.configWithDefaults().buttons")
      <!-- ko if: $data.id == $parent.buttonId() -->
      a.ui-btn.ui-mini.ui-btn-inline.ui-corner-all.ui-btn-active(data-bind="attr:{ id: $data.id }, jqmbutton: {text: $data.text}, click: $parent.onButtonPress")
      <!-- /ko -->
      <!-- ko ifnot: $data.id == $parent.buttonId() -->
      a.ui-btn.ui-mini.ui-btn-inline.ui-corner-all(data-bind="attr:{ id: $data.id }, jqmbutton: {text: $data.text}, click: $parent.onButtonPress")
      <!-- /ko -->
script#input-template(type='text/template')
  li.sortable.input.no-header.no-carousel-slide(data-bind="attr:{ id: device.id }")
    label.device-label(data-bind="text: name, tooltip: $data.labelTooltipHtml")
    div.inputs()
      <!-- ko if: $data.getConfig('type') === 'string'  -->
      input.ui-input-text.ui-corner-all(data-bind='textInput: inputValue')
      <!-- /ko -->
      <!-- ko if: $data.getConfig('type') === 'number' -->
      .spinbox.no-carousel-slide
        input(type='text', data-role='spinbox', name='spin', data-mini='true', data-bind='textInput: inputValue')
      <!-- /ko -->
script#inputTime-template(type='text/template')
  li.sortable.input.no-header.no-carousel-slide(data-bind="attr:{ id: device.id }")
    label.device-label(data-bind="text: name, tooltip: $data.labelTooltipHtml")
    div.inputs()
      .timebox.no-carousel-slide
        input(type='time', name='time', data-role='timebox', data-mini='true', data-bind='textInput: inputValue')
script#musicplayer-template(type='text/template')
  li.sortable.musicplayer.no-header(data-bind="attr:{ id: device.id }")
    label.device-label(data-bind="text: name, tooltip: $data.labelTooltipHtml")
    div.controls()
      span.songTitle(data-bind="text: $data.currentTitle")
      | 
      span.controls-inner
        a.ui-btn.ui-mini.ui-btn-inline.ui-corner-all.ui-btn-icon-notext.ui-icon.ui-icon-step-backward(data-bind="click: function(){$data.sendPlayerAction('previous');}")=__('Previous')
        a.ui-btn.ui-mini.ui-btn-inline.ui-corner-all.ui-btn-icon-notext.ui-icon(data-bind="jqmbutton: {icon: $data.playButtonIcon}, click: $data.togglePlay")
        a.ui-btn.ui-mini.ui-btn-inline.ui-corner-all.ui-btn-icon-notext.ui-icon-stop(data-bind="click: function(){$data.sendPlayerAction('stop');}")=__('Stop')
        a.ui-btn.ui-mini.ui-btn-inline.ui-corner-all.ui-btn-icon-notext.ui-icon.ui-icon-step-forward(data-bind="click: function(){$data.sendPlayerAction('next');}")=__('Next')
script#thermostat-template(type='text/template')
  li.sortable.device.no-header.thermostat(data-bind='css: {unsynced: !$data.synced(), attr: { id: device.id }}')
    label.device-label(data-bind="text: name, tooltip: $data.labelTooltipHtml")
    <!-- ko if: $data.getConfig('guiShowValvePosition')  -->
    .valve-position
      .valve-position-bar!='&nbsp'
    <!-- /ko -->
    .controls.no-carousel-slide
      <!-- ko if: $data.getConfig('guiShowModeControl')  -->
      .button-control.ui-controlgroup.ui-controlgroup-horizontal.ui-corner-all.ui-mini.no-carousel-slide(data-role='controlgroup', data-type='horizontal', data-mini='true', data-enhanced='true')
        .ui-controlgroup-controls
          a.ui-first-child.ui-btn.ui-corner-all(name='autoButton', data-bind='click: modeAuto') auto
          a.ui-btn.ui-corner-all(name='manuButton', data-bind='click: modeManu') manu    
          a.ui-last-child.ui-btn.ui-corner-all(name='boostButton', data-bind='click: modeBoost') boost
      <!-- /ko -->
      <!-- ko if: $data.getConfig('guiShowPresetControl')  -->
      .button-control.ui-controlgroup.ui-controlgroup-horizontal.ui-corner-all.ui-mini.no-carousel-slide(data-role='controlgroup', data-type='horizontal', data-mini='true', data-enhanced='true')
        .ui-controlgroup-controls
          a.ui-first-child.ui-btn.ui-corner-all(name='ecoButton', data-bind='click: modeEco') eco      
          a.ui-last-child.ui-btn.ui-corner-all(name='comfyButton', data-bind='click: modeComfy') comfy
      <!-- /ko -->
      <!-- ko if: $data.getConfig('guiShowTemperatureInput') -->
      .spinbox.no-carousel-slide
        input(type='text', data-role='spinbox', name='spin', value='0', min='0', max='100', data-mini='true', step='0.5', data-bind='textInput: inputValue')
      <!-- /ko -->
script#timer-template(type='text/template')
  li.sortable.timer.no-header
    label.device-label(data-bind="text: name, tooltip: $data.labelTooltipHtml")
    div.controls()
      span.attribute(data-bind="template: { name: 'attribute-template', data: $data.device.getAttribute('time'), afterRender: $data.afterAttributeRender }")
      | 
      span.controls-inner
        a.ui-btn.ui-mini.ui-btn-inline.ui-corner-all.ui-btn-icon-notext.ui-icon(data-bind="jqmbutton: {icon: $data.startButtonIcon}, click: $data.toggleRunning")
        a.ui-btn.ui-mini.ui-btn-inline.ui-corner-all.ui-btn-icon-notext.ui-icon.ui-icon-refresh(data-bind="click: function(){$data.sendTimerAction('resetTimer');}")=__('Reset')
script#attribute-template(type='text/template')
  <!-- ko if: !$data.hidden -->
  span.attribute(data-bind="tooltip: $data.tooltipHtml, css: {outOfDate: $data.outOfDate()}")
    <!-- ko if: $data.shouldDisplayAcronym() -->
    span.acronym(data-bind="text: $data.displayAcronym()")
    <!-- /ko -->
    <!-- ko if: $data.shouldDisplayIcon() -->
    span.attribute-icon(data-bind="css: $data.getIconClass()")
    <!-- /ko -->
    <!-- ko if: $data.shouldDisplayValue() -->
    span.val(data-bind="text: $data.displayValueText()")
    span.unit(data-bind="text: $data.displayUnitText()")
    <!-- /ko -->
    <!-- ko if: $data.shouldDisplaySparkline() -->
    span.sparkline(data-bind="sparkline: {data: $data.sparklineHistory, tooltipFormatter: $data.tooltipFormatter}")
    <!-- /ko -->
  <!-- /ko -->
script#switch-attribute-template(type='text/template')
  <!-- ko if: $data.name !== 'state' -->
  <!-- ko template: {name: 'attribute-template', data: $data} --><!-- /ko -->
  <!-- /ko -->
script#dimmer-attribute-template(type='text/template')
  <!-- ko if: $data.name !== 'state' && $data.name !== 'dimlevel' -->
  <!-- ko template: {name: 'attribute-template', data: $data} --><!-- /ko -->
  <!-- /ko -->
script#sortable-handle-template(type='text/template')
  div.handle.no-carousel-slide
    div.ui-btn-icon-notext.ui-icon.ui-icon-bars.ui-alt-icon.ui-nodisc-icon
script#edit-devicepage-link-template(type='text/template')
  li
    a(data-ajax="false", href='#devicepages-page', id="edit-devicepages-link")
      div.edit-handle.no-carousel-slide
        div.ui-btn-icon-notext.ui-icon.ui-icon-gear.ui-alt-icon.ui-nodisc-icon
      span.edit-pages-handle-label=__('Edit Pages')
script#page-menuentry-template(type='text/template')
  li(data-theme=theme.menuSwatch)
    a(href='#index', data-rel='close', data-transition="slidefade", data-bind="text: name, click: $root.showDevicePage")
script#devicepages-template(type='text/template')
  <!-- ko template: { name: 'devicepage-template', foreach: devicepages} --><!-- /ko -->
script#devicepage-template(type='text/template')
  div(data-bind="id: 'device-page-'+$data.id()")
    ul(data-role="listview", class="items", 
      data-bind="sortable: {isSorting: $root.isSortingItems, sorted: $root.onItemsSorted, drop: $root.onDropItemOnTrash, droppable: '.droppable-' + $data.id, scroller: '.owl-item'}")
      <!-- ko if: ! $root.enabledEditing() && $data.devices().length === 0  -->
      li.empty-list()=__("I'm an empty page, add some items!")
      <!-- /ko -->
      <!-- ko template: { name: 'device-group-template', foreach: $root.groups} --><!-- /ko -->
      <!-- ko if: $root.enabledEditing() || $data.getUngroupedDevices().length > 0  -->
      li.sortable.header.collapsible(data-role='list-divider', data-theme=theme.dividerSwatch, data-bind="click: $root.createToggleGroupCallback($data, {id: '$ungrouped'}), css: ($root.isGroupCollapsed($data, {id: '$ungrouped'}) ? 'closed' : 'open')")
        label()=__('Ungrouped')
      <!-- ko if: !$root.isGroupCollapsed($data, {id: '$ungrouped'}) -->
      <!-- ko template: { name: $root.getItemTemplate, foreach: $data.getUngroupedDevices(), afterRender: $data.afterRenderDevice } --><!-- /ko -->
      <!-- /ko -->
      <!-- /ko -->
      li.delete-link(data-theme='a', data-icon="delete", data-bind="visible: $root.isSortingItems, attr: {id: 'delete-item-' + $data.id}, css: 'droppable-' + $data.id")=__('Drop here to remove item')
      li(data-bind="visible: $root.enabledEditing() && !$root.isSortingItems(), attr: {id: 'add-item-link-' + $data.id}")
        a(data-transition='slidefade', href='#add-item-page', data-bind="click: $root.onAddItemClicked")=__('Add a new item')+'...'
script#device-group-template(type='text/template')
  <!-- ko if: $root.enabledEditing() || $parent.getDevicesInGroup($data.id).length > 0  -->
  li.sortable.header.collapsible(data-role='list-divider', data-theme=theme.dividerSwatch, data-bind="click: $root.createToggleGroupCallback($parent, $data), css: ($root.isGroupCollapsed($parent, $data) ? 'closed' : 'open')")
    label(data-bind="text: $data.name")
  <!-- ko if: !$root.isGroupCollapsed($parent, $data) -->
  <!-- ko template: { name: $root.getItemTemplate, foreach: $parent.getDevicesInGroup($data.id), afterRender: $parent.afterRenderDevice } --><!-- /ko -->
  <!-- /ko -->
  <!-- /ko -->
div#index(data-role='page' data-bind="css: {locked: !$root.enabledEditing(), unlocked: $root.enabledEditing(), notSorting: !$root.isSortingItems()}")
  div(data-theme=theme.headerSwatch, data-role='header')
    a#nav-button.ui-btn-left.ui-btn.ui-btn-inline.ui-corner-all.ui-btn-icon-left.ui-icon-bars.ui-btn-icon-notext(href='#nav-panel')=__('Menu')
    h3=customTitle
    div.ui-mini.ui-btn-right(data-role="controlgroup" data-type="horizontal")
      <!-- ko if: $root.hasPermission('messages', 'read') -->
      a#error-count.ui-btn.ui-btn-inline.ui-mini.ui-btn-icon-left.ui-icon-alert(href='#log-page', data-transition="slidedown", data-bind="jqmbutton: {text: errorCount}, visible: errorCount() > 0, click: onLogMessageClicked")
      <!-- /ko -->
      <!-- ko if: $root.hasPermission('pages', 'write') || pimatic.isDemo() -->
      a.ui-btn.ui-btn-inline.ui-btn-icon-left.ui-icon-bars.ui-btn-icon-notext(data-bind="jqmbutton: lockButton(), click: toggleEditing" href="")
      <!-- /ko -->
  div.ui-content.overthrow(data-role="main", tabindex="1")
    div#item-tabs(data-insert="false")
    div#item-lists.owl-carousel()
    <!-- ko if: !$root.hasPermission('pages', 'read') -->
    div.denied=__('Permission denied')
    <!-- /ko -->
  div.content-overlay.ui-content
  div#nav-panel.overthrow(data-role='panel', data-position='left', data-position-fixed='false', data-display='reveal', data-theme=theme.menuSwatch, tabindex="0")
    ul.nav-panel-menu(data-role='listview', data-theme=theme.menuSwatch, data-divider-theme=theme.menuSwatch, style='margin-top: -16px;')
      li(data-icon='delete', data-theme=theme.menuSwatch)
        a(href='#', data-rel='close')=__("Close menu")
      <!-- ko if: $root.hasPermission('pages', 'read') -->
      li(data-theme=theme.menuSwatch, data-role="list-divider")=__('Pages')
      <!-- ko template: { name: 'page-menuentry-template', foreach:devicepages} --><!-- /ko -->
      <!-- /ko -->
      <!-- ko if: $root.hasPermission('rules', 'read') || $root.hasPermission('variables', 'read') -->
      li(data-theme=theme.menuSwatch, data-role="list-divider")=__('Automation')
      <!-- ko if: $root.hasPermission('rules', 'read') -->
      li(data-theme=theme.menuSwatch)
        a(href='#rules-page', data-transition="slidefade")=__('Rules')
      <!-- /ko -->
      <!-- ko if: $root.hasPermission('variables', 'read') -->
      li(data-theme=theme.menuSwatch)
        a(href='#variables-page', data-transition="slidefade")=__('Variables')
      <!-- /ko -->   
      <!-- /ko -->
      <!-- ko if: $root.hasPermission('messages', 'read') || $root.hasPermission('events', 'read') -->
      li(data-theme=theme.menuSwatch, data-role="list-divider")=__('Log')
      <!-- ko if: $root.hasPermission('messages', 'read') -->
      li(data-theme=theme.menuSwatch)
        a(href='#log-page', data-transition="slidefade")=__('Messages')
      <!-- /ko --> 
      <!-- ko if: $root.hasPermission('events', 'read') -->
      li(data-theme=theme.menuSwatch)
        a(href='#events-page', data-transition="slidefade")=__('Events') 
      <!-- /ko -->
      <!-- /ko --> 
      li(data-theme=theme.menuSwatch, data-role="list-divider")=__('Settings')
      <!-- ko if: $root.hasPermission('devices', 'read') -->
      li(data-theme=theme.menuSwatch)  
        a(href='#devices-page', data-transition="slidefade")=__('Devices')
      <!-- /ko --> 
      <!-- ko if: $root.hasPermission('groups', 'read') -->
      li(data-theme=theme.menuSwatch)  
        a(href='#groups-page', data-transition="slidefade")=__('Groups') 
      <!-- /ko --> 
      <!-- ko if: $root.hasPermission('plugins', 'read') -->
      li(data-theme=theme.menuSwatch)
        a(href='#plugins-page', data-transition="slidefade")=__('Plugins') 
      <!-- /ko --> 
      <!-- ko if: $root.hasPermission('config', 'read') -->
      li(data-theme=theme.menuSwatch)
        a(href='#config-page', data-transition="slidefade")=__('Config')
      <!-- /ko --> 
      <!-- ko if: $root.hasPermission('database', 'read') -->
      li(data-theme=theme.menuSwatch)
        a(href='#database-page', data-transition="slidefade")=__('Database')
      <!-- /ko --> 
      <!-- ko if: $root.hasPermission('updates', 'read') -->
      li(data-theme=theme.menuSwatch)
        a(href='#updates-page', data-transition="slidefade")=__('Updates')
      <!-- /ko --> 
      li#import-ca-cert(data-theme=theme.menuSwatch)
        a(href='root-ca-cert.crt', data-ajax="false", data-bind="visible: hasRootCACert")=__('Show CA root certificate')
      li(data-theme=theme.menuSwatch)
        a(href='/logout',data-bind="text: $root.logoutText, click: onLogoutClicked")=__('Logout')
// Resize
script.
  if (typeof(Event) === 'function') {
  // modern browsers
  window.dispatchEvent(new Event('resize'));
  } else {
  // for IE and other old browsers
  // causes deprecation warning on modern browsers
  var evt = window.document.createEvent('UIEvents');
  evt.initUIEvent('resize', true, false, window, 0);
  window.dispatchEvent(evt);
  };