{{define "head"}}
  <link type="text/css" rel="stylesheet" href="{{ pathPrefix }}/static/css/alerts.css">
  <script src="{{ pathPrefix }}/static/js/alerts.js"></script>
{{end}}

{{define "content"}}
<div class="container-fluid">
  <h2>Alerts</h2>
  <table class="table table-bordered table-collapsed">
    <tbody>
    {{$alertStateToRowClass := .AlertStateToRowClass}}
    {{range .AlertingRules}}
      {{$activeAlerts := .ActiveAlerts}}
      <tr class="{{index $alertStateToRowClass .State}} alert_header">
        <td><i class="icon-chevron-down"></i> <b>{{.Name}}</b> ({{len $activeAlerts}} active)</td>
      </tr>
      <tr class="alert_details">
        <td>
          <div class="alert_description">
            <span class="label alert_rule">{{.HTMLSnippet pathPrefix}}</span>
            <a href="#" class="silence_children_link">Silence All Children&hellip;</a>
          </div>
          {{if $activeAlerts}}
          <table class="table table-bordered table-hover table-condensed alert_elements_table">
            <tr class="">
              <th>Labels</th>
              <th>State</th>
              <th>Active Since</th>
              <th>Value</th>
              <th>Silence</th>
            </tr>
            {{range $activeAlerts}}
            <tr class="{{index $alertStateToRowClass .State}}"> 
              <td>{{.Labels}}</td>
              <td>{{.State}}</td>
              <td>{{.ActiveSince}}</td>
              <td>{{.Value}}</td>
              <td><a href="#" class="silence_alert_link">Silence&hellip;</button><td>
            </tr>
            {{end}}
          </table>
          {{end}}
        </td>
      </tr>
    {{end}}
    </tbody>
  </table>
</div>
{{end}}