<%= render 'buyers/applications/menu' %>

<h2 id="client-name">
  Usage statistics for <%= h @cinstance.display_name %> / <%= h @cinstance.user_account.org_name %>
  <span id='usage-total'></span>
</h2>

<%= render 'stats/selector_widgets' %>

<div class="wrap clearfix">
  <div class="chart-wrap">
    <div class="loading"><i class="fa fa-spinner fa-spin"></i></div>
    <div id="chart-1" class='charts chart-top-users' data-application-id='<%= @cinstance.id %>' data-service-id='<%= @cinstance.service.id %>'></div>
    <p class='timezone'><%= timezone_information  %></p>
  </div>


  <div class="stats-support relative">
    <div class="methods-loading" style='top: 20px'><i class="fa fa-spinner fa-spin"></i></div>
    <div id="methods" class="data-sup">
    </div>
  </div>
</div>

<% content_for :javascripts do %>
    <%= javascript_include_tag 'analytics/dashboards/usage.js' %>

    <script type="text/javascript" charset="utf-8">
      jQuery(document).ready(function(){
        ThreeScale.Analytics.Usage.service_id =  $('#chart-1').attr('data-service-id');
        ThreeScale.Analytics.Usage.application_id =  $('#chart-1').attr('data-application-id');
        ThreeScale.Analytics.Usage.init();
      });
    </script>
<% end %>
