{{define "style"}}
.btn-state {
    /* line-height: .8em; */
    size: 0;
    font-size: 0;
    line-height: 0;
    margin-bottom: 3px;
    padding: 8px;
}

.btn-succeeded {
    background: rgb(28, 184, 65);
}

.btn-failed {
    background: rgb(202, 60, 60);
}

.btn-timeout {
    background: rgb(156, 39, 176);
}

.btn-cancelled {
    background: rgb(128, 128, 128);
}

.btn-pending {
    background: #ffeb3b;
}

.btn-running {
    background: rgb(66, 184, 221);
}

.btn-unknown {
    background: rgba(204, 204, 204);
}

.form-control::placeholder {
    color: rgba(204, 204, 204);
}
{{end}}}

{{define "body"}}
<div class="container-fluid">
    <form action="/" method="GET" style="width:100%">
        <div class="form-row">
            <div class="form-group col-6">
                <label for="metaIDs">MetaIDs</label>
                <input type="text" class="form-control" name="metaIDs" placeholder="20200219T234025-kitt_03,20200219T230416-kitt_25" value='{{.Params.Get "metaIDs"}}'>
            </div>
            <div class="form-group col">
                <label for="startAt">Start</label>
                <input type="text" class="form-control" name="startAt" placeholder="2001-02-03T04:05:06Z" value='{{.Params.Get "startAt"}}'>
            </div>
            <div class="form-group col">
                <label for="endAt">End</label>
                <input type="text" class="form-control" name="endAt" placeholder="2001-02-03T04:05:06Z" value='{{.Params.Get "endAt"}}'>
            </div>
        </div>
        <div class="form-row">
            <div class="form-group col-2">
                <label for="vehicles">Vehicles</label>
                <input type="text" class="form-control" name="vehicles" placeholder="vh6a_01,kitt_20" value='{{.Params.Get "vehicles"}}'>
            </div>
            <div class="form-group col-2">
                <label for="vehicleTypes">Vehicle Types</label>
                <input type="text" class="form-control" name="vehicleTypes" placeholder="VH6,Kitt" value='{{.Params.Get "vehicleTypes"}}'>
            </div>
            <div class="form-group col">
                <label for="runTypes">Run Types</label>
                <input type="text" class="form-control" name="runTypes" placeholder="calibration,demo" value='{{.Params.Get "runTypes"}}'>
            </div>
            <div class="form-group col">
                <label for="autonomousMode">Autonomous Mode</label>
                <input type="text" class="form-control" name="autonomousMode" placeholder="AUTONOMOUS" value='{{.Params.Get "autonomousMode"}}'>
            </div>
            <div class="form-group col">
                <label for="geofences">Geofences</label>
                <input type="text" class="form-control" name="geofences" placeholder="SF_1,SLAC" value='{{.Params.Get "geofences"}}'>
            </div>
            <div class="form-group col">
                <label for="mission">Mission</label>
                <input type="text" class="form-control" name="mission" placeholder="AO-12345" value='{{.Params.Get "mission"}}'>
            </div>
        </div>
        <div class="form-row" style="height:1.5em">
            <div class="col">
                <button type="submit" class="btn btn-primary">Search</button>
                <input type="reset" class="btn btn-secondary" value="Reset">
            </div>
            <div class="col d-flex justify-content-center" style="font-size:0.75em">
                Last updated {{.LastUpdated}}<br>
                {{.NumRuns}} runs found
            </div>
            <div class="col d-flex justify-content-end">
                <nav>
                    <ul class="pagination">
                        <li class="page-item{{if eq .Page 0}} disabled{{end}}">
                            <a class="page-link" href="{{pageLink .URL (subtract .Page 1)}}" aria-label="Previous">
                                <span aria-hidden="true">&lt;</span>
                            </a>
                        </li>
                        {{$url := .URL}}
                        {{$currentPage := .Page}}
                        {{if gt $currentPage 2}}
                        <li class="page-item{{if eq .Page 0}} disabled{{end}}">
                            <a class="page-link" href="{{pageLink .URL 0}}">1</a>
                        </li>
                        {{if ne $currentPage 3}}
                        <li class="page-item"><span class="page-link">&hellip;</span></li>
                        {{end}}
                        {{end}}
                        {{range $page := ints (max (subtract $currentPage 2) 0) (min (add $currentPage 3) .NumPages)}}
                        {{if eq $currentPage $page}}
                        <li class="page-item active" aria-current="page"><span class="page-link">{{add $page 1}}</span></li>
                        {{else}}
                        <li class="page-item"><a class="page-link" href="{{pageLink $url $page}}">{{add $page 1}}</a></li>
                        {{end}}
                        {{end}}
                        {{if lt $currentPage (subtract .NumPages 3)}}
                        {{if ne $currentPage (subtract .NumPages 4)}}
                        <li class="page-item"><span class="page-link">&hellip;</span></li>
                        {{end}}
                        <li class="page-item{{if eq .Page (subtract .NumPages 1)}} disabled{{end}}">
                            <a class="page-link" href="{{pageLink .URL (subtract .NumPages 1)}}">{{.NumPages}}</a>
                        </li>
                        {{end}}
                        <li class="page-item{{if eq .Page (subtract .NumPages 1)}} disabled{{end}}">
                            <a class="page-link" href="{{pageLink .URL (add .Page 1)}}" aria-label="Next">
                                <span aria-hidden="true">&gt;</span>
                            </a>
                        </li>
                    </ul>
                </nav>
            </div>
        </div>
    </form>
</div>
<br>
<div class="container-fluid">
    <table class="table table-sm table-hover sortable">
        <thead>
            <tr>
                <th>Run ID</th>
                {{range ingestStages}}
                <th style="width:18%">
                    {{capitalize (normalizeIngest .)}}
                </th>
                {{end}}
            </tr>
        </thead>
        {{$issueMap := .IssueMap}}
        {{range $runIndex, $run := .Runs}}
        <tr class="run">
            <td>
                <a href="https://catalog.zooxlabs.com/run/{{$run.MetaID}}">{{$run.MetaID}}</a>
                <br>
                {{with index $issueMap $run.MetaID}}
                {{range .}}
                <span class="badge badge-warning">{{.}}</span>
                {{end}}
                {{end}}
            </td>
            {{range $ingest := ingestStages}}
            {{$pipelines := (index $run.Ingests $ingest)}}
            <td sorttable_customkey='{{with $pipelines}}{{(index . 0).State}}{{else}}-1{{end}}'>
                {{range $i, $pip := $pipelines}}
                {{if lt $i 5}}
                <a href="https://piper.zooxlabs.com/pipeline/{{$pip.PipeID}}" class="btn btn-state btn-{{index pipelineStateNames $pip.State}}">
                    &nbsp
                </a>
                {{end}}
                {{end}}
                {{if gt (len $pipelines) 5}}
                <br>
                {{subtract (len $pipelines) 5}} more...
                {{end}}
            </td>
            {{end}}
        </tr>
        {{end}}
    </table>
</div>
{{end}}}