div#events-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')
    a.ui-btn-right.ui-btn.ui-btn-inline.ui-corner-all.ui-btn-icon-left(href='#graph-page')=__('Graph')
    h3=__('Events')
  div.ui-content.overthrow
    .controls
      select#select-device(name='select-device', data-mini="true", data-inline="true", data-bind="jqmoptions: devices, value: chosenDevice")
      select#select-attribute(name='select-attribute', data-mini="true", data-inline="true", data-bind="jqmoptions: attributes, value: chosenAttribute")
      span(data-bind="text: eventsCountText")
    .outdent
      table#events-table.table-stroke.ui-table()
        thead
          tr
            th.time-column=__('Time')
            th.device-column=__('Device')
            th.attribute-column=__('Attribute')
            th.value-column(data-priority='1')=__('Value')
        tbody(data-bind="foreach: displayedEvents")
          tr
            td.time-column(data-bind="html: formatedTime()")
            td.device-column(data-bind="html: formatedDeviceName()")
            td.attribute-column(data-bind="text: formatedAttributeName()")
            td.value-column(data-bind="html: formatedValue()")