{% extends "layout.html" %}
{% block content %}
<h1>Dashboard</h1>
<div class="ui stackable inverted menu">
  <a class="item active">
    Services
  </a>
  <a class="item">
    Incidents
  </a>
</div>

<table class="ui celled structured table">
  <thead>
    <tr>
      <th rowspan="2">owner</th>
      <th rowspan="2">name</th>
      <th rowspan="2">pinged times</th>
      <th colspan="3">Metrics</th>
    </tr>
    <tr>
      <th>15min</th>
      <th>10min</th>
      <th>5min</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Alpha</td>
      <td>service 1</td>
      <td class="right aligned">2</td>
      <td class="center aligned">
        <i class="large green checkmark icon"></i>
      </td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td rowspan="3">Beta</td>
      <td>service 1</td>
      <td class="right aligned">52</td>
      <td class="center aligned">
        <i class="large green checkmark icon"></i>
      </td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td>service 2</td>
      <td class="right aligned">12</td>
      <td></td>
      <td class="center aligned">
        <i class="large green checkmark icon"></i>
      </td>
      <td></td>
    </tr>
    <tr>
      <td>service 3</td>
      <td class="right aligned">21</td>
      <td class="center aligned">
        <i class="large green checkmark icon"></i>
      </td>
      <td></td>
      <td></td>
    </tr>
  </tbody>
</table>

{% endblock %}