script#devicepage-item-template(type="text/template")
  li.devicepage.sortable
    a(data-transition='slidefade', href='#edit-devicepage-page', data-bind="click: $root.onEditDevicepageClicked")
      span.name(data-bind="text: $data.name()")
div#devicepages-page(data-role='page', data-bind="css: {locked: !$root.enabledEditing(), unlocked: $root.enabledEditing(), notSorting: !$root.isSortingDevicepages() }")
  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=__("Edit Pages")
      
  div.ui-content.overthrow
    div
      ul#devicepages(data-role='listview', data-bind="sortable: {isSorting: isSortingDevicepages, sorted: onDevicepagesSorted, drop: onDropDevicepageOnTrash}")
        <!-- ko template: { name: 'devicepage-item-template', foreach: devicepages, afterRender: $root.afterRenderDevicepage} --><!-- /ko -->
        li.delete-link.droppable(data-theme='a',data-icon="delete", data-bind="visible: $root.isSortingDevicepages()")=__('Drop here to remove page')
        li#add-devicepage(data-bind="visible: $root.enabledEditing() && !$root.isSortingDevicepages() ")
          a(data-transition='slidefade', href='#edit-devicepage-page', data-bind="click: $root.onAddDevicepageClicked")=__('Add a new page')+'...'