script#graph-group-template(type='text/template')
  <!-- ko if: $data.getDevicesWithGraphableAttribute().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: 'graph-device-template', foreach: $data.getDevicesWithGraphableAttribute() } --><!-- /ko -->
  <!-- /ko -->
  <!-- /ko -->
script#graph-device-template(type='text/template')
  li.graph-device.ui-li-static.ui-body-inherit
    label(data-bind='text: name')
    <!-- ko template: { name: 'graph-attribute-template', foreach: $data.attributes(), afterRender: $root.afterRenderAttribute } --><!-- /ko -->
script#graph-attribute-template(type='text/template')
  <!-- ko if: $data.type == "number" || $data.type == "boolean" -->
  div.graph-device-attribute(data-role="fieldcontain")
    <!-- ko with: $root.getDisplayedAttribute($parent, $data) -->
    <!-- ko if: $data.serie -->
    div.color-label(data-bind="style: {'background-color': $data.serie().color}")
    <!-- /ko -->
    <!-- /ko -->
    span.name(data-bind='text: label')
    div.controls(data-role="controlgroup")
      <!-- ko if: !$root.getDisplayedAttribute($parent, $data) -->
      a.ui-btn.ui-mini.ui-btn-inline.ui-corner-all.show-button()=__("Show")
      <!-- /ko -->
      <!-- ko if: $root.getDisplayedAttribute($parent, $data) -->
      a.ui-btn.ui-mini.ui-btn-inline.ui-corner-all.hide-button.ui-btn-b=__("Hide")
      <!-- /ko -->
  <!-- /ko -->
div#graph-page(data-role='page')
  div(data-theme=theme.headerSwatch, data-role='header')
    a(href='#index', data-role='button', data-icon='arrow-l', data-iconpos='left', 
      data-inline='true', data-transition="slide", data-direction="reverse")=__('Back')
    h3=__('Graph')
  div.ui-content.overthrow
    //-   li(data-role='list-divider')=__('Sensor values')
    div#chart-container
      div.controls
        span=__('Show ')
        select#chart-select-range(name='chart-select-range', data-bind="value: chosenRange", data-inline="true", data-mini="true")
          option(value="day")=__('24 hours')
          option(value="week")=__('7 days')
          option(value="month")=__('30 days')
          option(value="year")=__('365 days')
        span=__('up to ')
        input#chart-select-date(type="text", data-role="date", data-mini="true", data-bind="value: chosenDate", data-date-format="yy-mm-dd")
      div#chart-wrapper
        div#chart
      div#chart-no-data=__("No data to display.")
      div#chart-info
        div#chart-legend-wrapper
          div#chart-legend
        div#average-info(data-bind="if: averageDuration && displayedAttributes().length > 0")
          span(data-bind="text: averageDurationText()")
    //-     span=__('Last Update: ')
    //-     span.last-update-time
    //-     span=' ('
    //-     span.last-update-value
    //-     soan=')'
    ul#graph-device-list.device-attribute-list(data-role='listview')
      <!-- ko template: { name: 'graph-group-template', foreach: groups} --><!-- /ko -->
      <!-- ko if: $root.getUngroupedDevicesWithGraphableAttribute().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()=__('Ungrouped')
      <!-- ko if: !$root.isGroupCollapsed($data) -->
      <!-- ko template: { name: 'graph-device-template', foreach: $root.getUngroupedDevicesWithGraphableAttribute() } --><!-- /ko -->
      <!-- /ko -->
      <!-- /ko -->