<% content_for :sublayout_title, "Usage" %>

<span id='usage-total'></span>

<%= render :partial => '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-service-id="<%= @service.id %>"></div>
    <p class='timezone'><%= timezone_information  %></p>
    <div class="download-csv-button">
      <a href=''>Download CSV</a>
    </div>
  </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.init();
      });
    </script>
<% end %>
