<% # 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, current_tab: current_tab }%>
        </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, current_tab: current_tab } %>
    </div>
  </div>
</div>
<div class="row">
  <div class="col-md-12">
    <% if phase.sections.length > 1 %>
      <div id="sections-accordion-controls">
        <div class="accordion-controls" data-parent="sections_accordion">
          <a href="#" data-toggle-direction="show"><%= _('expand all') %></a>
          <span>|</span>
          <a href="#" data-toggle-direction="hide"><%= _('collapse all') %></a>
        </div>
      </div>
    <% end %>
  </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="heading-button" role="button" data-toggle="collapse"
               data-parent="sections-accordion" 
               href="#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"></i>
              </div>
              <div class="clearfix"></div>
            </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, current_tab: current_tab } %>
              <% else %>
                <%= render partial: 'sections/show_section', locals: { template: template, section: section, current_tab: current_tab, edit: edit } %>
              <% 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, current_tab: current_tab } %>
          </div>
        </div>
      </div>
    <% end %>
  </div>
</div>