{{/*
    Copyright 2016 The Vanadium Authors. All rights reserved.
    Use of this source code is governed by a BSD-style
    license that can be found in the LICENSE file.
*/}}

{{define "content"}}
<script language='javascript'>
    function showIdsForLabel(label) {
        var nodes = document.getElementsByClassName('label-container');
        for (var i = 0; i < nodes.length; i++) {
            var node = nodes[i];
            if (node.dataset.label === label) {
                node.style.display = 'block';
            } else {
                node.style.display = 'none';
            }
        }
    }
</script>
<section class="section-center mdl-grid">
    {{$buckets := .Buckets}}
    <p>{{range $label := .SortedLabels}} {{$ids := index $buckets $label}} {{if len $ids | lt 0}}<a href="javascript:showIdsForLabel('{{$label}}')">{{$label}}</a>{{else}}{{$label}}{{end}}
        {{end}}
    </p>
</section>
<section class="section-center mdl-grid">
    <h5>Traces</h5> {{$name := .ServerName}} {{range $l, $ids := .Buckets}}
    <div data-label="{{$l}}" style="display:none;position:relative" class="mdl-cell mdl-cell--12-col label-container">
        {{$l}}
        <ul>
            {{range $id := $ids}}
            <li><a href="/vtrace?n={{$name}}&t={{$id.Id}}">{{$id.Id}}</a></li>
            {{end}}
        </ul>
    </div>{{end}}
</section>
{{end}}