{{define "head"}}
<link type="text/css" rel="stylesheet" href="{{ pathPrefix }}/static/css/rules.css?v={{ buildVersion }}">
{{end}}

{{define "content"}}
  <div class="container-fluid">
    <h2>Rules</h2>
    <table class="table table-bordered">
      {{range .RuleGroups}}
        <thead>
          <tr>
            <td colspan="3"><h2><a href="#{{reReplaceAll "([^a-zA-Z0-9])" "$1" .Name}}" name="{{reReplaceAll "([^a-zA-Z0-9])" "$1" .Name}}">{{.Name}}</h2></td>
            <td><h2>{{humanizeDuration .GetEvaluationDuration.Seconds}}</h2></td>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td style="font-weight:bold">Rule</td>
            <td style="font-weight:bold">State</td>
            <td style="font-weight:bold">Error</td>
            <td style="font-weight:bold">Evaluation Time</td>
          </tr>
          {{range .Rules}}
          <tr>
            <td class="rule_cell">{{.HTMLSnippet pathPrefix}}</td>
            <td class="state">
              <span class="alert alert-{{ .Health | ruleHealthToClass }} state_indicator text-uppercase">
                {{.Health}}
              </span>
            </td>
            <td class="errors">
              {{if .LastError}}
              <span class="alert alert-danger state_indicator">{{.LastError}}</span>
              {{end}}
            </td>
            <td>{{humanizeDuration .GetEvaluationDuration.Seconds}}</td>
          </tr>
          {{end}}
      {{else}}
        <tr>
          <td>
            No rules defined
          </td>
        </tr>
      {{end}}
      </tbody>
    </table>
  </div>
{{end}}