<% # locals: { phase, template, edit, current_section } %>
<h2><%= _('Phase details')%></h2>
<div class="row">
  <div class="col-md-12">
    <% if phase.modifiable && edit %>
        <div class="phase_edit" style="display: none">
          <%= render partial: "phases/edit_phase", locals: { phase: phase }%>
        </div>
    <% end %>
  </div>
</div>
<div class="row">
  <div class="col-md-12">
    <div class="phase_show">
      <%= render partial: "phases/show_phase", locals: { phase: phase, edit: edit } %>
    </div>
  </div>
</div>
<!-- Accordion for sections -->
<div class="row">
  <div class="col-md-12">
    <div class="panel-group" id="sections_accordion" role="tablist">
      <% phase.sections.each do |section| %>
        <div class="panel panel-default">
          <div class="panel-heading" role="tab" id="<%= "headingSection#{section.id}" %>">
            <div class="panel-title pull-left">
              <%= section.title %>
            </div>
            <div class="panel-title pull-right">
              <a
                role="button"
                data-toggle="collapse"
                data-parent="#sections-accordion"
                href="#collapseSection<%= section.id%>"
                aria-expanded="false"
                aria-controls="#collapseSection<%= section.id%>">
                  <i class="fa fa-plus" aria-hidden="true"></i>
                </a>
            </div>
            <div class="clearfix"></div>
          </div>
          <div
            id="<%= "collapseSection#{section.id}" %>"
            class="panel-collapse collapse<%= " in" if section.id == current_section %>"
            role="tabpanel"
            aria-labelledby="<%= "headingSection#{section.id}" %>">
             <div class="panel-body">
              <% if edit && section.modifiable %>
                <%= render partial: 'sections/edit_section', locals: { template: template, section: section, edit: edit, phase: phase } %>
              <% else %>
                <%= render partial: 'sections/show_section', locals: { template: template, section: section } %>
              <% end %>
             </div>
          </div>
        </div>
      <% end %>
    </div>
    <% if edit || template.customization_of.present? %>
      <div class="row">
        <div class="col-md-12">
          <div class="pull-right">
            <%= link_to(_('Add Section'), "#section_new#{phase.id}", { class: "btn btn-default section_new_link", role: "button" }) %>
          </div>
        </div>
        <div class="col-md-12">
          <div id="section_new<%= phase.id %>" class="section_new" style="display: none;">
            <%= render partial: 'sections/add_section', locals: { phase: phase } %>
          </div>
        </div>
      </div>
    <% end %>
  </div>
</div>