<div class="row">
  <div class="col-md-12">
    <p>
      <%= _('The graphs display new users and plans for your organisation over the past year. You can download a CSV report for each graph.')%>
    </p>
  </div>
</div>


<div class="row">
  <div class="col-md-12">
    <p class="red">&#42;&nbsp;<%= _('Move the mouse pointer over the bars of a chart to see numbers.') %></p>
  </div>
</div>

<div class="row">
  <div class="col-md-6">
    <div class="pull-left">
      <p class="bold fontsize-h4"><%= _('No. users joined during last year') %></p>
    </div>
    <div class="pull-right">
      <%= link_to usage_yearly_users_path(sep: ","), class: 'stat btn btn-default', role: 'button', target: '_blank' do %>
        <%= _('Download') %> <i class="fa fa-download" aria-hidden="true"></i>
      <% end %>
    </div>
    <div class="clearfix"></div>
    <div id="users_joined_chart">
      <%= render partial: 'usage/users_joined_chart',
                 locals: { data: @users_per_month } %>
    </div>
  </div>
  <div class="col-md-6">
    <div class="pull-left">
      <p class="bold fontsize-h4"><%= _('No. plans during last year') %></p>
    </div>
    <div class="pull-right">
      <%= link_to usage_yearly_plans_path(sep: ","), class: 'stat btn btn-default', role: 'button', target: '_blank' do %>
        <%= _('Download') %> <i class="fa fa-download" aria-hidden="true"></i>
      <% end %>
    </div>
    <div class="clearfix"></div>
    <div id="plans_created_chart">
      <%= render partial: 'usage/plans_created_chart',
                 locals: { data: @plans_per_month } %>
    </div>
  </div>
</div>
<div class="row">
  <div class="col-md-12">
    <hr>
  </div>
</div>
<div class="row">
  <div class="col-md-12">
      <div class="col-md-6">
        <div class="pull-left">
          <p class="bold fontsize-h4"><%= _('No. plans by template') %></p>
        </div>
      </div>

      <div class="col-md-6">
        <div class="pull-right"">
          <ul class="list-inline">
            <li>
              <%= form_for :usage, url: usage_plans_by_template_path, remote: true do |f| %>
                <div class="form-group">
                  <%= f.label :template_plans_range, _('Time period') %>
                  <ul class="list-inline">
                    <li>
                      <%= f.select :template_plans_range, plans_per_template_ranges.reverse, {}, { class: "form-control" } %>
                    </li>
                    <li>
                      <%= f.submit _('Go'), class: 'btn btn-default mt-25' %>
                    </li>
                  </ul>
                </div>
              <% end %>
            </li>
            <li>
              <div class="form-group">
                <%= link_to usage_all_plans_by_template_path(sep: ","), class: 'btn btn-default stat', role: 'button', target: '_blank' do %>
                  <%= _('Download all') %> <i class="fa fa-download" aria-hidden="true"></i>
                <% end %>
             </div>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
  <div class="row">
      <div class="col-md-12" style="position: relative; width: 100%; height: 100%">
         <div id="plans_by_template_chart">
           <%# pp @plans_per_month %>
          <%= render partial: 'usage/plans_by_template_chart',
                     locals: { data: @plans_per_month } %>
        </div>
      </div>
  </div>