anchor.diff:                    | ,&nbsp;
                   | ]
                 td=host.ip
  -              td=(host.healthy ? 'healthy' : 'unhealthy')
                 td=humane_time(host.time)
   
             tr(class="table-hack")
  
positive.code:   link(href='/static/css/service_health.less', rel='stylesheet/less', type='text/css')
    style(type="text/css")
      .#{health.healthy}{
        background-color: #B9FAEA;
      }
      .#{health.unhealthy}{
        background-color: #FF7D7D;
      }
      .table{
        border: 2px solid #000;
        border-radius: 10px;
      }
      .table tbody td, thead th{
        width: 14%;
        vertical-align: middle;
      }
      .table td{
        border: 1px solid #000;
      }
      .table th{
        font-weight: bold;
        border: 2px solid #000;
      }
      .table tr{
        vertical-align: middle;
        font-weight: bold;
      }
      .data-row{
        border-top: 1px dotted #000;
        display: none;
      }
      .data-row a{
        color: #333;
        text-decoration: underline;
      }
      select{
        width: 100px;
      }
      table.table .table-hack{
        margin: 0; padding: 0; line-height: 0; height: 0; border: 0 none;
      }
  
  block content
    -var hosts = service_health.get_data();
    .container
      if hosts
        h3
          | filters: health:
          select(id='filter-health')
            option(class='#{health.unhealthy}')='Unhealthy'
            option(class='#{health.healthy}')='Healthy'
            option(class='all')='All'
  
        h1 Services:
        table.table#service-stats.table-stats.sortable
          thead
            tr#header
              th type
              th name
              th host
              th ip
              th health
              th last updated
          tbody
            for host in hosts
              for service,name in host.services
                - var service_color = service.healthy ? health.healthy : health.unhealthy
                tr(class=service_color+' data-row service-row')
                  td=service.service
                  td
                    a(name=host.service_name+'_'+name)=host.service_name
                    div.metric_data.hidden
                      - var service_error_msg = service.error_msg
                      - var service_metrics = service.metrics
  
negative.code:                               tr
                                  td=metric.name
                                  td=metric.value
                  
                  td=service.service
  
                  td
                    a(name=host.service_name+'_'+name)=host.service_name
                  td
                    a(href="#host-name-"+host.service_name)=host.service_name
                  td=host.ip
                  
                  td=humane_time(host.time)
  
            tr(class="table-hack")
  