extends layout

block content
  div.container-fluid(ng-controller='StatsCtrl')
    div.row
      div.col-lg-6(ng-cloak)
        div.col-sm-12
          h1= title
          p Welcome to #{title}

        div.clearfix

        div.col-xs-6.stat-holder
          div.row.big-info.nodesactive(class="{{ nodesActive | nodesActiveClass : nodesTotal }}")
            div.pull-left.icon-full-width
              i.icon-bulb
            div.pull-left
              span.small-title active nodes
              span.big-details {{nodesActive}}/{{nodesTotal}}
            div.clearfix
        div.col-xs-6.stat-holder
          div.row.big-info.bestblock.text-info
            div.pull-left.icon-full-width
              i.icon-block
            div.pull-left
              span.small-title best block
              span.big-details {{"#" + bestBlock}}
            div.clearfix
        div.col-xs-6.stat-holder
          div.row.big-info.blocktime(class="{{ lastBlock | timeClass }}")
            div.pull-left.icon-full-width
              i.icon-time
            div.pull-left
              span.small-title last block
              span.big-details(am-time-ago="lastBlock", am-preprocess="unix") ∞
            div.clearfix
        div.col-xs-6.stat-holder
          div.row.big-info.uptime(class="{{ upTimeTotal | upTimeClass }}")
            div.pull-left.icon-full-width
              i.icon-clock
            div.pull-left
              span.small-title up-time
              span.big-details {{ upTimeTotal | upTimeFilter }}
            div.clearfix

        div.clearfix

      div.col-lg-6
        div.col-xs-12
          nodemap#mapHolder(data="map")

      div.clearfix

      div.col-sm-12(ng-cloak)
        h1 Nodes in detail

        table.table.table-striped
          thead
            tr.text-info
              th
                i.icon-node(data-toggle="tooltip", data-placement="top", title="Node")
              th
                i.icon-laptop(data-toggle="tooltip", data-placement="top", title="Node type")
              th
                i.icon-group(data-toggle="tooltip", data-placement="top", title="Peers")
              th
                i.icon-mining(data-toggle="tooltip", data-placement="top", title="Is mining")
              th
                i.icon-block(data-toggle="tooltip", data-placement="top", title="Last node block")
              th.hidden-sm.hidden-xs  
              th
                i.icon-time(data-toggle="tooltip", data-placement="top", title="Last node time")
              th
                i.icon-clock(data-toggle="tooltip", data-placement="top", title="Up-time")
          tbody
            tr(ng-repeat='node in nodes', class="{{ node.stats | mainClass : bestBlock }}")
              td(rel="{{node.id}}")
                span(data-toggle="tooltip", data-placement="top", data-original-title="{{node.geo | geoTooltip}}") {{node.name}}
              td {{node.type}}
              td(class="{{ node.stats.peers | peerClass }}") {{node.stats.peers}}
              td(class="{{ node.stats.mining | miningClass }}")
                i(class="{{ node.stats.mining | miningIconClass }}")
              td(class="{{ node.stats.block.number | blockClass : bestBlock }}") {{'#' + node.stats.block.number}}
              td(class="{{ node.stats.block.number | blockClass : bestBlock }}").hidden-sm.hidden-xs
                span.small {{node.stats.block.hash}}
              td(am-time-ago="node.stats.block.timestamp", am-preprocess="unix", class="{{ node.stats.block.timestamp | timeClass }}") ∞
              td(class="{{ node.stats.uptime.total | upTimeClass }}") {{ node.stats.uptime.total | upTimeFilter }}