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:             td(class="table-hack")
              td(class="table-hack")
              td(class="table-hack")
      section(id='hosts')
        h1 Hosts
        hr
        table.table.table-bordered#host-stats.sortable
          thead
            tr#header
              th Health
              th Hostname
              th(colspan=2) Services Provided
              th IP Address
              th Last Updated
          tbody
            for host in hosts
              - var host_name = host.service_name;
              - var host_color = host.healthy ? health.healthy : health.unhealthy
              tr
                td(class=host_color+' data-row host-row', style='text-align: center;')=(host.healthy ? '☺' : '☹')
                td
                  a(name="host-name-"+host_name)=host_name
                td(colspan=2)
  