<%# locals: expanded %>

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

    <div class="panel-heading" role="tab" id="headingTemplateStatistics">
      <div class="panel-title pull-left">
        <%= _('Statistics on your Templates') %>
      </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="collapseTemplateStatistics"
       class="panel-collapse collapse <%='in' if expanded %>"
       role="tabpanel" aria-labled-by="headingTemplateStatistics">
    <div class="panel-body">

      <div class="row">
        <div class="col-md-12">
          <p class="bold fontsize-h4"><%=_('No. plans created based off your templates')%></p>
        </div>
      </div>

      <div class="row">
          <div class="col-md-12" style="position: relative; width: 100%; height: 100%">
             <div id="plans_using_template_chart">
              <%= render partial: 'usage/plans_by_template_chart',
                         locals: { data: @plans_per_month, subset: "using_template"} %>
            </div>
          </div>
      </div>


    </div>
  </div>

</div>