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


{{define "content"}}
  <div class="container-fluid">
    <h1>Targets</h1>
    <div class="options-container">
      <div id="showTargets" class="btn-group btn-group-toggle" data-toggle="buttons">
        <label class="btn btn-primary">
          <input type="radio" name="targets" id="all-targets" autocomplete="off" checked> All
        </label>
        <label class="btn btn-primary">
          <input type="radio" name="targets" id="unhealthy-targets" autocomplete="off"> Unhealthy
        </label>
        <br />
      </div>
      <button type="button" class="collapse-all btn btn-primary">Collapse All</button>
    </div>

    {{- range $job, $pool := .TargetPools}}
    {{- $healthy := numHealthy $pool}}
    {{- $total := len $pool}}

    <div class="table-container">
      <h2 class="job_header{{if lt $healthy $total}} danger{{end}}">
        <a id="job-{{$job}}" href="#job-{{$job}}">{{$job}} ({{$healthy}}/{{$total}} up)</a>
        <button type="button" class="targets expanded-table btn btn-primary">show less</button>
      </h2>
      <table class="table table-sm table-bordered table-striped table-hover">
        <thead class="job_details">
          <tr>
            <th>Endpoint</th>
            <th>State</th>
            <th>Labels</th>
            <th>Last Scrape</th>
            <th>Scrape Duration</th>
            <th>Error</th>
          </tr>
        </thead>
        <tbody>
        {{- range $pool}}
          <tr>
            <td class="endpoint">
              <a href="{{.URL | globalURL}}">{{.URL.Scheme}}://{{.URL.Host}}{{.URL.Path}}</a><br>
              {{- range $label, $values := .URL.Query }}
                {{- range $i, $value := $values}}
                  <span class="badge badge-primary">{{$label}}="{{$value}}"</span>
                {{- end}}
              {{- end}}
            </td>
            <td class="state">
              <span class="alert alert-{{ .Health | targetHealthToClass }} state_indicator text-uppercase">{{.Health}}</span>
            </td>
            <td class="labels">
              <span class="cursor-pointer" data-toggle="tooltip" title="" data-html=true data-original-title="<b>Before relabeling:</b>{{range $k, $v := .DiscoveredLabels.Map}}<br>{{$ev := $v | html}}{{$k}}=&quot;{{$ev}}&quot;{{end}}">
                {{- range $label, $value := .Labels.Map}}
                  <span class="badge badge-primary">{{$label}}="{{$value}}"</span>
                {{- else -}}
                  <span class="badge badge-default">none</span>
                {{- end}}
              </span>
            </td>
            <td class="last-scrape">{{- if .LastScrape.IsZero}}Never{{else}}{{since .LastScrape}} ago{{end}}</td>
            <td class="scrape-duration">{{- humanizeDuration .LastScrapeDuration.Seconds}}</td>
            <td class="errors">{{- if .LastError}}<span class="alert alert-danger state_indicator">{{.LastError}}</span>{{end}}</td>
          </tr>
        {{- end}}
        </tbody>
      </table>
    </div>
    {{- end }}
  </div>
{{end}}