<div class="panel panel-default section" data-section-id="<%= section.id %>">

  <a
    href="<%= header_path_for_section(section, phase, template) %>"
    data-remote="true"
    class="heading-button ajaxified-section"
    data-toggle="collapse"
    data-parent="<%= data_parent %>"
    data-target="#collapseSection<%= section.id%>"
    aria-expanded="false"
    aria-controls="#collapseSection<%= section.id%>">

    <div class="panel-heading" role="tab" id="<%= "headingSection#{section.id}" %>">
      <div class="panel-title pull-left">
        <%= section.title %>
      </div>
      <div class="pull-right">
        <i class="fa fa-plus pull-right" aria-hidden="true" title="Click to expand"></i>
        <% if local_assigns[:draggable] %>
          <i class="fa fa-arrows pull-right" aria-hidden="true"
             title="Drag to reposition">
          </i>
        <% end %>
      </div>
      <div class="clearfix"></div>
    </div>
  </a>
  <div
  id="<%= "collapseSection#{section.id}" %>"
  class="panel-collapse collapse<%= " in" if current_section.present? && section.id == current_section.id %>"
  role="tabpanel"
  aria-labelledby="<%= "headingSection#{section.id}" %>">
    <div class="panel-body" data-loaded="<%= current_section.present? && section.id == current_section.id %>">
      <%# This is AJAX loaded on demand unless section_id is specified in the URL %>
      <% if current_section.present? && section.id == current_section.id %>
        <% partial = "org_admin/sections/#{section.modifiable? ? 'edit' : 'show'}" %>
        <%= render partial: "#{partial}",
        locals: {
          template: template,
          phase: phase,
          section: current_section }
          %>
      <% end %>
    </div>
  </div>
</div>