anchor.diff:              td(class="table-hack")
               td(class="table-hack")
               td(class="table-hack")
  -
  -      h1 Hosts:
  -
  -      table.table#host-stats.table-stats.sortable
  +    section(id='hosts')
  +      h1 Hosts
  +      hr
  +      table.table.table-bordered#host-stats.sortable
           thead
             tr#header
  -            th hostname
  -            th(colspan=2) services provided
  -            th ip
  -            th health
  -            th last updated
  +            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(class=host_color+' data-row host-row')
  +            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)
  
positive.code:                   | ,&nbsp;
                  | ]
                td=host.ip
                td=(host.healthy ? 'healthy' : 'unhealthy')
                td=humane_time(host.time)
  
            tr(class="table-hack")
  
negative.code:   link(href='/static/css/service_health.less', rel='stylesheet/less', type='text/css')
    style(type="text/css")
      .#{health.healthy}{
        background-color: green;
        font-size: 200%;
      }
      .#{health.unhealthy}{
        background-color: red;
        font-size: 200%;
      }
      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(style='text-align:right')
          |Filter:
          select(id='filter-health')
            option(class='all')='All'
            option(class='#{health.healthy}')='Healthy'
            option(class='#{health.unhealthy}')='Unhealthy'
       section(id='services')     
        h1 Services
        hr
        table.table.table-bordered#service-stats.sortable
          thead
            tr#header
              th Health
              th Type
              th Name
              th Host
              th IP Address
              th Last Updated
          tbody
            for host in hosts
              for service,name in host.services
                - var service_color = service.healthy ? health.healthy : health.unhealthy
                tr
                  td(class=service_color+' data-row service-row', style='text-align: center;')=(service.healthy ? '☺' : '☹')
                    div.metric_data.hidden
                      - var service_error_msg = service.error_msg
                      - var service_metrics = service.metrics
  