{{ $jsPath := .Get "path" }}
{{ $metricsRef := getJSON $jsPath }}



<div class="row flex-xl-nowrap">
  <hr>
  <div class="content col-xl-12 d-block align-top">
    {{ range where $metricsRef "visible" true}}
    {{ $p := . }}

    <a name="{{$p.name}}"></a>
    <h3>{{$p.name}}
    <a class="headerlink float-right" href="#{{$p.name}}" title="{{$p.name}}"><i class="fas fa-link fa-xs" aria-hidden="true"></i></a></h3>
      <table>
          <tr>
            <td style="width: 200px; padding-bottom:5px">description</td>
            <td>{{$p.description}}</td>
          </tr>
          <tr>
            <td style="width: 200px; padding-bottom:5px">type</td>
            <td>{{$p.type}}</td>
          </tr>
          <tr>
            <td style="width: 200px; padding-bottom:5px">categories</td>
            <td>{{$p.categories}}</td>
          </tr>
          <tr>
            <td style="width: 200px; padding-bottom:5px">source</td>
            <td>{{$p.source}}</td>
          </tr>
          <tr>
            <td style="width: 200px; padding-bottom:5px">rollup_aggregate</td>
            <td>{{$p.rollup_aggregate}}</td>
          </tr>
          <tr>
            <td style="width: 200px; padding-bottom:5px">unit</td>
            <td>{{$p.unit}}</td>
          </tr>
          <tr>
            <td style="width: 200px; padding-bottom:5px">aggregations</td>
            <td>{{$p.aggregations}}</td>
          </tr>
          <tr>
            <td style="width: 200px; padding-bottom:5px">dimensions</td>
              <td>
                <ul style="margin-left: 12px;">
              {{range sort $p.dimensions}}
              {{$dim := .}}
                  <li>{{$dim}}</li>
              {{end}}
                </ul>
              </td>
          </tr>

      </table>

      <hr>

    {{ end }}
  </div>

    <div class="col-md-5 d-none d-xl-block d-print-none nginx-toc align-top"  style="position: sticky; top: 0rem; align-self: start;">
      <ul style="margin-bottom: 4px;">
        {{ range where $metricsRef "visible" true}}
        {{ $p := . }}
          <li>
            <a href="#{{$p.name}}">{{$p.name}}</a>
          </li>
      
        {{ end }}
      </ul>
    </div>
    
</div>