<!--
 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 Account Details
$var script: <script src="/static/http_monitoring_account_details.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-12">
    <ul id="drilldowns" class="tabs" data-tab>
      <li class="tab-title small-2 large-2 active"> <a href="#panel-apiclasses" tabindex="1">API Classes</a></li>
      <li class="tab-title small-2 large-2">        <a href="#panel-useragents" tabindex="1">User Agents</a></li>
      <li class="tab-title small-2 large-2">        <a href="#panel-scriptids"  tabindex="2">Script IDs</a></li>
      <li class="tab-title small-2 large-2">        <a href="#panel-resources"  tabindex="3">Resources</a></li>
      <li class="tab-title small-2 large-2">        <a href="#panel-data"       tabindex="3">Data Table</a></li>
    </ul>
  </div>
</div>

<div class="row">
    <div class="small-2 large-2 columns vertical-menu">
      <ul class="tabs">
        <li id="hits" data-column="1" class="tab-title active"><a tabindex="1">Hits</a></li>
        <li id="mb" data-column="2" class="tab-title">         <a tabindex="2">Bandwidth</a></li>
        <li id="sec" data-column="3" class="tab-title">        <a tabindex="3">Response time</a></li>
        <li class="tab-title">       <a tabindex="0"><input type="text" class="datepicker-tab"></a></li>
      </ul>
      <div>
        <table id="account_list" class="hover summary" style="word-wrap: break-word;">
          <thead><tr><th>ACCT</th><th class="align-right">%</th><th class="align-right">%</th><th class="align-right">%</th></tr></thead>
          <tfoot><tr><th>ACCT</th><th class="align-right">%</th><th class="align-right">%</th><th class="align-right">%</th></tr></tfoot>
        </table>
      </div>
    </div>

    <div class="tabs-content">
      <section  class="content active" id="panel-apiclasses">
        <div class="small-10 large-10 columns"><!--- Left col for date picker and three charts -->
          <div class="tabs-content">
            <section  class="content active" id="panel-apiclasses-hits">
              <div class="chart-wrapper-details small-12 large-6 columns" id="apiclasses">
                <div class="chart hits">
                  <img class='spinner' alt="Loading" src="/media/spinner.gif"/>
                </div>
              </div>
              <div class="chart-wrapper-details small-12 large-6 columns" id="apiclasses2">
                <div class="chart hits">
                  <img class='spinner' alt="Loading" src="/media/spinner.gif"/>
                </div>
              </div>
            </section>
            <section class="content" id="panel-apiclasses-mb">
              <div class="chart-wrapper-details small-12 large-6 columns" id="apiclasses">
                <div class="chart mb">
                  <img class='spinner' alt="Loading" src="/media/spinner.gif"/>
                </div>
              </div>
              <div class="chart-wrapper-details small-12 large-6 columns" id="apiclasses2">
                <div class="chart mb">
                  <img class='spinner' alt="Loading" src="/media/spinner.gif"/>
                </div>
              </div>
            </section>
            <section class="content" id="panel-apiclasses-sec">
              <div class="chart-wrapper-details small-12 large-6 columns" id="apiclasses">
                <div class="chart sec">
                  <img class='spinner' alt="Loading" src="/media/spinner.gif"/>
                </div>
              </div>
              <div class="chart-wrapper-details small-12 large-6 columns" id="apiclasses2">
                <div class="chart sec">
                  <img class='spinner' alt="Loading" src="/media/spinner.gif"/>
                </div>
              </div>
            </section>
          </div>
        </div>
      </section>
      <section class="content" id="panel-useragents">
        <div class="small-10 large-10 columns"><!--- Left col for date picker and three charts -->
          <div class="tabs-content">
            <section  class="content active" id="panel-useragents-hits">
              <div class="chart-wrapper-details small-12 large-6 columns" id="useragents">
                <div class="chart hits">
                  <img class='spinner' alt="Loading" src="/media/spinner.gif"/>
                </div>
              </div>
            </section>
            <section class="content" id="panel-useragents-mb">
              <div class="chart-wrapper-details small-12 large-6 columns" id="useragents">
                <div class="chart mb">
                  <img class='spinner' alt="Loading" src="/media/spinner.gif"/>
                </div>
              </div>
            </section>
            <section class="content" id="panel-useragents-sec">
              <div class="chart-wrapper-details small-12 large-6 columns" id="useragents">
                <div class="chart sec">
                  <img class='spinner' alt="Loading" src="/media/spinner.gif"/>
                </div>
              </div>
            </section>
          </div>
        </div>
      </section>
      <section class="content" id="panel-scriptids">
        <div class="small-10 large-10 columns"><!--- Left col for date picker and three charts -->
          <div class="tabs-content">
            <section  class="content active" id="panel-scriptids-hits">
              <div class="chart-wrapper-details small-12 large-6 columns" id="scriptids1">
                <div class="chart hits">
                  <img class='spinner' alt="Loading" src="/media/spinner.gif"/>
                </div>
              </div>
              <div class="chart-wrapper-details small-12 large-6 columns" id="scriptids">
                <div class="chart hits">
                  <img class='spinner' alt="Loading" src="/media/spinner.gif"/>
                </div>
              </div>
              <div class="chart-wrapper-details small-12 large-6 columns" id="scriptids2">
                <div class="chart hits">
                  <img class='spinner' alt="Loading" src="/media/spinner.gif"/>
                </div>
              </div>
            </section>
            <section class="content" id="panel-scriptids-mb">
              <div class="chart-wrapper-details small-12 large-6 columns" id="scriptids1">
                <div class="chart mb">
                  <img class='spinner' alt="Loading" src="/media/spinner.gif"/>
                </div>
              </div>
              <div class="chart-wrapper-details small-12 large-6 columns" id="scriptids">
                <div class="chart mb">
                  <img class='spinner' alt="Loading" src="/media/spinner.gif"/>
                </div>
              </div>
              <div class="chart-wrapper-details small-12 large-6 columns" id="scriptids2">
                <div class="chart mb">
                  <img class='spinner' alt="Loading" src="/media/spinner.gif"/>
                </div>
              </div>
            </section>
            <section class="content" id="panel-scriptids-sec">
              <div class="chart-wrapper-details small-12 large-6 columns" id="scriptids1">
                <div class="chart sec">
                  <img class='spinner' alt="Loading" src="/media/spinner.gif"/>
                </div>
              </div>
              <div class="chart-wrapper-details small-12 large-6 columns" id="scriptids">
                <div class="chart sec">
                  <img class='spinner' alt="Loading" src="/media/spinner.gif"/>
                </div>
              </div>
              <div class="chart-wrapper-details small-12 large-6 columns" id="scriptids2">
                <div class="chart sec">
                  <img class='spinner' alt="Loading" src="/media/spinner.gif"/>
                </div>
              </div>
            </section>
          </div>
        </div>
      </section>
      <section class="content" id="panel-resources">
        <div class="small-10 large-10 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-6 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-6 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-6 columns" id="resources">
                <div class="chart sec">
                  <img class='spinner' alt="Loading" src="/media/spinner.gif"/>
                </div>
              </div>
            </section>
          </div>
        </div>
      </section>
      <section class="content" id="panel-data">
        <div class="small-10 large-10 columns"><!--- Left col for date picker and three charts -->
            <section  class="content active" id="panel-data-tbl">
              <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>
            </section>
        </div>
      </section>
    </div>
</div>
