//- Actuators and rules page
div#add-item-page(data-role='page')
  div(data-theme=theme.headerSwatch, data-role='header')
    a.ui-btn-left.ui-btn.ui-btn-inline.ui-corner-all.ui-btn-icon-left.ui-icon-arrow-l(href='#index', data-transition="slidefade", data-direction="reverse")=__('Back')
    h3=__('Add an item')
  div.ui-content.overthrow
    ul#device-items(data-role='listview', data-inset='true', data-theme="b")
      li(data-role='list-divider')=__('Devices')
      <!-- ko foreach: devices -->
      li.item(data-theme="a")
        a(href="", data-bind="text: name, jqmlistitem: {icon: $root.deviceEntryIcon($data)}")
      <!-- /ko -->
    //- ul#variable-items(data-role='listview', data-inset='true', data-theme="b")
    //-   li(data-role='list-divider')=__('Variables')
    //-   <!-- ko foreach: variables -->
    //-   li.item(data-theme="a")
    //-     a(href="", data-bind="text: name, jqmlistitem: {icon: icon()}, css: {added: isAdded()}")
    //-   <!-- /ko -->
    //- ul#add-other(data-role='listview', data-inset='true', data-theme="b")
    //-   li(data-role='list-divider')=__('Other')
    //-   li(data-role="fieldcontain", data-theme="a", data-icon="plus", data-iconpos="left")
    //-     a#add-a-header()=__('Add a group header')
    //-   li(data-role="fieldcontain", data-theme="a", data-icon="plus", data-iconpos="left")
    //-     a#add-a-button()=__('Add a button')