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

{{define "content"}}
    <div class="container-fluid">
        <h1>Alerts</h1>
        <div id="alertFilters" class="btn-group btn-group-toggle" data-toggle="buttons">
            <label class="btn btn-primary active">
                <input type="checkbox" name="alertFilters" id="inactiveAlerts" autocomplete="off"> Inactive ({{ .Counts.Inactive }})
            </label>
            <label class="btn btn-primary active">
                <input type="checkbox" name="alertFilters" id="pendingAlerts" autocomplete="off"> Pending ({{ .Counts.Pending }})
            </label>
            <label class="btn btn-primary active">
                <input type="checkbox" name="alertFilters" id="firingAlerts" autocomplete="off"> Firing ({{ .Counts.Firing }})
            </label>
            </br>
        </div>
        <div class="show-annotations">
            <i class="glyphicon glyphicon-unchecked"></i>
            <button type="button" class="show-annotations" title="show annotations">Show annotations</button>
        </div>
        <table id="alertsTable" class="table table-bordered table-collapsed">
            <tbody>
            {{$alertStateToRowClass := .AlertStateToRowClass}}
            {{range .Groups}}
                <tr>
                    <td style="padding: 2px">
                        {{.OriginalFile}} > {{.Name}}
                    </td>
                </tr>
                {{range .AlertingRules}}
                    {{$activeAlerts := .ActiveAlerts}}
                    <tr class="alert alert-{{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>
                                <pre style="display:block; padding:9.5px; font-size:13px; color:#333; word-break:break-all; background-color:#f5f5f5; border:1px solid #ccc; border-radius:4px;" ><code>{{.HTMLSnippet queryURL}}</code></pre>
                            </div>
                            {{if $activeAlerts}}
                                <table class="table table-bordered table-hover table-sm alert_elements_table">
                                    <tr class="">
                                        <th>Labels</th>
                                        <th>State</th>
                                        <th>Active Since</th>
                                        <th>Value</th>
                                    </tr>
                                    {{range $activeAlerts}}
                                        <tr>
                                            <td>
                                                {{range $label, $value := .Labels.Map}}
                                                    <span class="badge badge-primary">{{$label}}="{{$value}}"</span>
                                                {{end}}
                                            </td>
                                            <td><span class="alert alert-{{ .State | alertStateToClass }} state_indicator text-uppercase">{{.State}}</span></td>
                                            <td>{{.ActiveAt.UTC}}</td>
                                            <td>{{.Value}}</td>
                                        </tr>
                                        {{ if .Annotations.Map}}
                                            <tr style="display:none" class="alert_annotations">
                                                <th colspan="4">Annotations</th>
                                            </tr>
                                            <tr style="display:none" class="alert_annotations">
                                                <td colspan="4">
                                                    <dl>
                                                        {{range $label, $value := .Annotations.Map}}
                                                            <dt>{{$label}}</dt>
                                                            <dd>{{$value}}</dd>
                                                        {{end}}
                                                    </dl>
                                                </td>
                                            </tr>
                                        {{end}}
                                    {{end}}
                                </table>
                            {{end}}
                        </td>
                    </tr>
                {{end}}
            {{else}}
                <tr>
                    <td>
                        No alerting rules defined
                    </td>
                </tr>
            {{end}}
            </tbody>
        </table>
    </div>
{{end}}
