<!-- Accordion for sections -->
<div class="row">
  <div class="col-md-12">

    <div class="draggable-sections" data-url="<%=
      sort_org_admin_template_phase_path(template, phase)
     %>">

      <%= render partial: "org_admin/sections/section_group",
                 locals: { sections: Array(prefix_section),
                           phase: phase,
                           template: template,
                           current_section: current_section,
                           panel_id: "section-#{prefix_section.id}",
                           modifiable: true } if prefix_section %>

      <%# If we are working with a modifiable phase then allow the core sections to be reordered %>
      <% if phase.modifiable? %>
        <% sections.each do |s| %>
          <%= render partial: "org_admin/sections/section_group",
                     locals: { sections: Array(s),
                               phase: phase,
                               template: template,
                               current_section: current_section,
                               panel_id: "section-#{s.id}",
                               modifiable: s.modifiable } %>
        <% end %>
      <% else %>
          <%= render partial: "org_admin/sections/section_group",
                     locals: { sections: sections,
                               phase: phase,
                               template: template,
                               current_section: current_section,
                               panel_id: "baseline-sections",
                               modifiable: modifiable } %>
      <% end %>

      <% suffix_sections.each do |s| %>
        <%= render partial: "org_admin/sections/section_group",
                   locals: { sections: Array(s),
                             phase: phase,
                             template: template,
                             panel_id: "section-#{s.id}",
                             current_section: current_section,
                             modifiable: true } %>
      <% end %>

    </div>

    <% if template.latest? && (modifiable || template.customization_of.present?) %>
      <div class="panel panel-default">
        <a href="#new_section" class="heading-button"
           data-toggle="collapse" data-parent="sections-accordion"
           data-target="#collapseSectionNew"
           aria-expanded="false"
           aria-controls="#collapseSectionNew">

          <div class="panel-heading" role="tab" id="<%= "headingSectionNew" %>">
            <div class="panel-title pull-left">
              <%= _('Add a new section') %>
            </div>
            <div class="pull-right">
              <i class="fa fa-plus pull-right" aria-hidden="true"></i>
            </div>
            <div class="clearfix"></div>
          </div>
        </a>
        <div
          id="collapseSectionNew" class="panel-collapse collapse" role="tabpanel"
          aria-labelledby="<%= "headingSectionNew" %>">
           <div class="panel-body">
             <%= render partial: 'org_admin/sections/new',
                        locals: {
                          template: template,
                          phase: phase } %>
           </div>
        </div>
      </div>
    <% end %>
  </div>

</div>