<% # 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}" %>">
            <h4 class="panel-title">
              <%= link_to(
                        section.title,
                        "#collapseSection#{section.id}",
                        { 
                          'data-toggle': 'collapse',
                          'data-parent': '#sections_accordion',
                          'aria-expanded': section.id == current_section,
                          'aria-controls': "#collapseSection#{section.id}" 
                        }) %>
            </h4>
          </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>