{% extends "layout.html" %}
{% block content %}
<h1>Dashboard</h1>
<div class="ui icon message">
  <i class="notched circle loading icon"></i>
  <div class="content">
    <div class="header">
      Just one second
    </div>
    <p>We're fetching that content for you.</p>
  </div>
</div>
<div class="ui placeholder">
  <div class="line"></div>
  <div class="line"></div>
  <div class="line"></div>
  <div class="line"></div>
  <div class="line"></div>
</div>
<div class="ui divider"></div>
<div class="ui orange message">
    <div class="header">
        Performance degraded
    </div>
    Some services are experiencing issues
</div>
<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 class="two column wide" rowspan="2" colspan="1">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 class="selectable warning"><a href="#alpha-service1">service 1</a></td>
      <td class="right aligned">2</td>
      <td class="center aligned">
        <i class="large green checkmark icon"></i>
      </td>
      <td class="center aligned">
        <i class="large green checkmark icon"></i>
      </td>
      <td class="center aligned">
        <i class="large orange circle outline icon"></i>
      </td>
    </tr>
    <tr>
      <td rowspan="3">Beta</td>
      <td class="selectable negative"><a href="#beta-service1">service 1</a></td>
      <td class="right aligned">52</td>
      <td class="center aligned">
        <i class="large green checkmark icon"></i>
      </td>
      <td class="center aligned">
        <i class="large orange circle outline icon"></i>
      </td>
      <td class="center aligned">
        <i class="large red remove icon"></i>
      </td>
    </tr>
    <tr>
      <td class="selectable positive"><a href="#beta-service2">service 2</a></td>
      <td class="right aligned">12</td>
      <td class="center aligned">
        <i class="large green checkmark icon"></i>
      </td>
      <td class="center aligned">
        <i class="large green checkmark icon"></i>
      </td>
      <td class="center aligned">
        <i class="large green checkmark icon"></i>
      </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 %}