<%# locals: expanded %>

<div class="panel panel-default">
  <a href="#user_statistics" class="heading-button"
     data-toggle="collapse" data-parent="usage-accordion"
     data-target="#collapseUserStatistics"
     aria-expanded="true" aria-controls="#collapseUserStatistics">

    <div class="panel-heading" role="tab" id="headingUserStatistics">
      <div class="panel-title pull-left">
        <%= _('Statistics on your Users') %>
      </div>
      <div class="pull-right">
        <i class="fa fa-<%= expanded ? 'minus' : 'plus' %> pull-right" aria-hidden="true"></i>
      </div>
      <div class="clearfix"></div>
    </div>
  </a>
  <div id="collapseUserStatistics"
       class="panel-collapse collapse <%='in' if expanded %>"
       role="tabpanel" aria-labled-by="headingUserStatistics">
    <div class="panel-body">

      <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>

    </div>
  </div>

</div>