<div class="row">
  <div class="col-xs-12">
    <h2><%= plan.template.title %></h2>
  </div>
</div>
<div class="row">
  <div class="col-xs-12">
    <p>
      <%= _('This plan is based on the "%{template_title}" template provided by %{org_name}.') %{ :template_title => plan.template.title, :org_name => plan.template.org.name } %>
    </p>
    <p>
      <%= sanitize(plan.template.description) %>
    </p>
  </div>
</div>
<div class="row">
  <div class="col-xs-12">
    <% if plan.template.phases.size == 1 %>
      <%= render(partial: '/phases/overview', locals: { plan_id: plan.id, phase: plan.template.phases.first }) %>
    <% else %>
      <div class="panel-group" id="plan-overview-accordion" role="tablist" aria-multiselectable="true">
        <% plan.template.phases.each do |p| %>
          <% questions_size = p.sections.map{|s| s.questions.size }.reduce(0){|sum,x| sum + x } %>
          <div class="panel panel-default">
            <div class="heading-button" role="button" data-toggle="collapse"
                 data-parent="plan-overview-accordion"
                 href="#plan-overview-collapse-<%= p.id %>"
                 aria-expanded="false"
                 aria-controls="#plan-overview-collapse-<%= p.id %>">

              <div class="panel-heading" role="tab" id="plan-overview-heading-<%= p.id %>">
                <div class="panel-title">
                  <div class="pull-left">
                    <%= _("%{phase_title} (%{sections_size} %{sections}, %{questions_size} %{questions})") % {
                      :phase_title => p.title, :sections_size => p.sections.size, :sections => n_('section', 'sections', p.sections.size),
                      :questions_size => questions_size,
                      :questions => n_('question', 'questions', questions_size) } %>
                  </div>
                  <div class="pull-right">
                    <i class="fa fa-plus pull-right" aria-hidden="true"></i>
                  </div>
                  <div class="clearfix"></div>
                </div>
              </div>
            </div>
            <div id="plan-overview-collapse-<%= p.id %>" class="panel-collapse collapse" role="tabpanel" aria-labelledby="plan-overview-heading-<%= p.id %>">
              <div class="panel-body">
                <%= render(partial: '/phases/overview', locals: { plan_id: plan.id, phase: p }) %>
              </div>
            </div>
          </div>
        <% end %>
      </div>
    <% end %>
  </div>
</div>