<div class="row">
  <div class="row-same-height row-full-height">
    <div class="col-sm-12 col-md-4 col-md-height col-md-full-height col-top" style="margin-bottom: 20px;">
      <div class="well no-padding-margin" style="height: 100%;">
        <div style="padding: 20px;">
          <label class="section">Info</label>
          <div>
            {{yield}}
          </div>
        </div>
      </div>
    </div>

    <div class="col-sm-12 col-md-4 col-md-height col-md-full-height col-top" style="margin-bottom: 20px;">
      <div class="well no-padding-margin">
        <div style="padding: 20px;">
          <label class="section">CPU</label>
          <div class="info-graph {{unless active 'hide'}}">
            <div id="cpuGraph"></div>
          </div>
          <div class="text-center text-muted {{unless loading 'hide'}}" style="height: 100px; padding-top: 30px;">
            <i class="icon icon-spinner icon-spin"></i> Connecting...
          </div>
          <div class="text-center text-muted {{if available 'hide'}}" style="height: 100px; padding-top: 30px;">
            Utilization stats are only available while active/running.
          </div>
        </div>
      </div>

      <div class="well no-padding-margin" style="margin-top: 20px;">
        <div style="padding: 20px;">
          <label class="section">Network</label>
          <div class="info-graph {{unless active 'hide'}}">
            <div id="networkGraph"></div>
          </div>
          <div class="text-center text-muted {{unless loading 'hide'}}" style="height: 100px; padding-top: 30px;">
            <i class="icon icon-spinner icon-spin"></i> Connecting...
          </div>
          <div class="text-center text-muted {{if available 'hide'}}" style="height: 100px; padding-top: 30px;">
            Utilization stats are only available while active/running.
          </div>
        </div>
      </div>
    </div>

    <div class="col-sm-12 col-md-4 col-md-height col-md-full-height col-top" style="margin-bottom: 20px;">
      <div class="well no-padding-margin">
        <div style="padding: 20px;">
          <label class="section">Memory</label>
          <div class="{{unless active 'hide'}}">
            <div id="memoryGraph"></div>
          </div>
          <div class="text-center text-muted {{unless loading 'hide'}}" style="height: 100px; padding-top: 30px;">
            <i class="icon icon-spinner icon-spin"></i> Connecting...
          </div>
          <div class="text-center text-muted {{if available 'hide'}}" style="height: 100px; padding-top: 30px;">
            Utilization stats are only available while active/running.
          </div>
        </div>
      </div>

      <div class="well no-padding-margin" style="margin-top: 20px;">
        <div style="padding: 20px;">
          <label class="section">Storage</label>
          <div class="info-graph {{unless active 'hide'}}">
            <div id="storageGraph"></div>
          </div>
          <div class="text-center text-muted {{unless loading 'hide'}}" style="height: 100px; padding-top: 30px;">
            <i class="icon icon-spinner icon-spin"></i> Connecting...
          </div>
          <div class="text-center text-muted {{if available 'hide'}}" style="height: 100px; padding-top: 30px;">
            Utilization stats are only available while active/running.
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
