{% macro graph(name) %}
<a href="/graph/{{name}}/{{node_id}}"><img src="/graph/{{name}}/{{node_id}}" height="200em" width="200em"/></a>
{% endmacro %}


<ul class="nav nav-tabs" role="tablist">
    <li class="nav-item" role="presentation">
         <button class="nav-link active" data-bs-toggle="tab" data-bs-target="#overview" type="button" role="tab">Overview</button>
    </li>
    <li>
         <button class="nav-link" data-bs-toggle="tab" data-bs-target="#neighbors" type="button" role="tab" >Neighbors</button>
    </li>
    <li>
         <button class="nav-link" data-bs-toggle="tab" data-bs-target="#weather" type="button" role="tab" >Environment</button>
    </li>
    <li>
         <button class="nav-link" data-bs-toggle="tab" data-bs-target="#power" type="button" role="tab" >Power</button>
    </li>
</ul>

<div class="tab-content">
      <div class="tab-pane fade show active" id="overview" role="tabpanel">
          <dl>
               <dt>Power</dt>
               <dd>{{ graph("power") }}</dd>
          </dl>
          <dl>
               <dt>ChUtil</dt>
               <dd>{{ graph("chutil") }}</dd>
          </dl>
      </div>
      <div class="tab-pane fade" id="neighbors" role="tabpanel">
        <a role="button" class="btn btn-primary mb-3" href="/graph/network?root={{node_id}}&depth=2">Network Graph</a>
        <a style="display: block;" href="/graph/neighbors2/{{node_id}}"><img src="/graph/neighbors/{{node_id}}" height="200em" width="200em"/></a>
      </div>
      <div class="tab-pane fade" id="weather" role="tabpanel">
          <dl>
               <dt>Temperature</dt>
               <dd>{{ graph("temperature") }}</dd> 
          </dl>
          <dl>   
               <dt>Humidity</dt>
               <dd>{{ graph("humidity") }}</dd>
          </dl>
          <dl>   
               <dt>Pressure</dt>
               <dd>{{ graph("pressure") }}</dd>
          </dl>
          <dl>
               <dt>Indoor Air Quality</dt>
               <dd>{{ graph("iaq") }}</dd>
          </dl>
          <dl>
               <dt>Wind Speed</dt>
               <dd>{{ graph("wind_speed") }}</dd>
          </dl>
          <dl>
               <dt>Wind Direction</dt>
               <dd>{{ graph("wind_direction") }}</dd>
          </dl>
      </div>
      <div class="tab-pane fade" id="power" role="tabpanel">
          {{ graph("power_metrics") }}
      </div>
</div>