script#rule-template(type="text/template")
  li.rule.sortable.draggable(data-bind="css: {deactivated: !active()}")
    a(data-transition='slidefade', href='#edit-rule-page', style="white-space: normal", data-bind="click: $root.onEditRuleClicked")
      span.name(data-bind="text: ($data.name() != '' ? $data.name() : __('Unnamed rule') ) ")
      p
        span.if='When'
        | 
        span.condition(data-bind="text: conditionToken")
        | 
        span.then='then'
        | 
        span.actions(data-bind="text: actionsToken")
script#rule-groups-template(type="text/template")
  <!-- ko if: $root.enabledEditing() || $data.getRules().length > 0  -->
  li.sortable.header.collapsible(data-role='list-divider', data-theme=theme.dividerSwatch, data-bind="click: $root.toggleGroup, css: ($root.isGroupCollapsed($data) ? 'closed' : 'open')")
    label(data-bind="text: name")
  <!-- ko if: !$root.isGroupCollapsed($data) -->
  <!-- ko template: { name: 'rule-template', foreach: $data.getRules, afterRender: $root.afterRenderRule } --><!-- /ko -->
  <!-- /ko -->
  <!-- /ko -->
div#rules-page(data-role='page', data-bind="css: {locked: !$root.enabledEditing(), unlocked: $root.enabledEditing(), notSorting: !$root.isSortingRules() }")
  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=__("Rules")
    <!-- ko if: $root.hasPermission('rules', 'write') || pimatic.isDemo() -->
    a.ui-btn-right.ui-btn.ui-btn-inline.ui-corner-all.ui-btn-icon-left.ui-icon-bars.ui-btn-icon-notext(data-bind="jqmbutton: lockButton(), click: toggleEditing" href="")
    <!-- /ko -->
  div.ui-content.overthrow
    div
      ul#rules(data-role='listview', data-bind="sortable: {isSorting: isSortingRules, sorted: onRulesSorted, drop: onDropRuleOnTrash}, dragslide: {}, css: ruleCss")
        <!-- ko template: { name: 'rule-groups-template', foreach: groups} --><!-- /ko -->
        <!-- ko if: $root.enabledEditing() || $root.getUngroupedRules().length > 0  -->
        <!-- ko with: $root -->
        li.sortable.header.collapsible(data-role='list-divider', data-theme=theme.dividerSwatch, data-bind="click: $root.toggleGroup, css: ($root.isGroupCollapsed($data) ? 'closed' : 'open')")
          label()=__('Ungrouped')
        <!-- ko if: !$root.isGroupCollapsed($data) -->
        <!-- ko template: { name: 'rule-template', foreach: $root.getUngroupedRules, afterRender: $root.afterRenderRule } --><!-- /ko -->
        <!-- /ko -->
        <!-- /ko -->
        <!-- /ko -->
        li.delete-link.droppable(data-theme='a',data-icon="delete", data-bind="visible: $root.isSortingRules()")=__('Drop here to remove rule')
        li#add-rule(data-bind="visible: $root.enabledEditing() && !$root.isSortingRules() ")
          a.ui-btn.ui-btn-icon-left.ui-icon-plus(data-transition='slidefade', href='#edit-rule-page', data-bind="click: $root.onAddRuleClicked")=__('Add a new rule')+'...'
         div.drag-message
      <!-- ko if: !$root.hasPermission('rules', 'read') -->
      div.denied=__('Permission denied')
      <!-- /ko -->