<!--
 Copyright European Organization for Nuclear Research (CERN)

 Licensed under the Apache License, Version 2.0 (the "License");
 You may not use this file except in compliance with the License.
 You may obtain a copy of the License at
 http://www.apache.org/licenses/LICENSE-2.0

 Authors:
 - Ralph Vigne <ralph.vigne@cern.ch> 2015
 - Thomas Beermann <thomas.beermann@cern.ch> 2015
-->

$var title: HTTP Monitoring Resources Summary
$var script: <script src="/static/http_monitoring_resources.js"></script><link rel="stylesheet" href="/static/http_monitoring.css"></link><script src="/static/http_monitoring_utils.js"></script>

<div class="row">
  <div class="small-2 large-2 columns" style="margin-left: auto; margin-right: auto;">
    <a class="button round" style="width: 100%; " data-dropdown="drop1" aria-controls="drop1" aria-expanded="false">Reports</a>
    <ul id="drop1" class="f-dropdown" data-dropdown-content aria-hidden="true" tabindex="-1">
      <li><a href="/webstats/accounts">Accounts</a></li>
      <li><a href="/webstats/apiclasses">API Classes</a></li>
      <li><a href="/webstats/resources">Resources</a></li>
      <li><a href="/webstats/scriptids">Scripts</a></li>
      <!-- li><a href="/webstats/useragents">User Agent</a></li -->
    </ul>
  </div>
  <div class="small-12 large-12i report-header">Resources Overview </div>
</div>


<div class="row">
  <div class="small-2 large-2 columns vertical-menu"><!--- Left col for date picker and three charts -->
    <ul class="tabs vertical" data-tab>
      <li class="tab-title active" ><a href="#panel-resources-hits" tabindex="0" controls="panel-resources-hits">Hits</a></li>
      <li class="tab-title" ><a href="#panel-resources-mb"   tabindex="1"  controls="panel-resources-mb">Bandwidth</a></li>
      <li class="tab-title" ><a href="#panel-resources-sec"  tabindex="2"  controls="panel-resources-sec">Response time</a></li>
      <li class="tab-title" ><a href="" tabindex="3"  controls=""><input type="text" class="datepicker-tab"></a></li>
    </ul>
  </div>

  <div class="small-10 large-5 columns"><!--- Left col for date picker and three charts -->
    <div class="tabs-content">
      <section  class="content active" id="panel-resources-hits">
        <div class="chart-wrapper-details small-12 large-12 columns" id="resources">
          <div class="chart hits">
            <img class='spinner' alt="Loading" src="/media/spinner.gif"/>
          </div>
        </div>
      </section>
      <section class="content" id="panel-resources-mb">
        <div class="chart-wrapper-details small-12 large-12 columns" id="resources">
          <div class="chart mb">
            <img class='spinner' alt="Loading" src="/media/spinner.gif"/>
          </div>
        </div>
      </section>
      <section class="content" id="panel-resources-sec">
        <div class="chart-wrapper-details small-12 large-12 columns" id="resources">
          <div class="chart sec">
            <img class='spinner' alt="Loading" src="/media/spinner.gif"/>
          </div>
        </div>
      </section>
    </div>
  </div>

  <div class="small-10 large-5 columns"><!--- Left col for date picker and three charts -->
    <table id="account_activity" class="hover" style="word-wrap: break-word;">
      <thead><tr><th>Account</th><th>Hits</th><th>MB</th><th>Sec</th></tr></thead>
      <tfoot><tr><th>Account</th><th>Hits</th><th>MB</th><th>Sec</th></tr></tfoot>
    </table>
  </div>
</div>
