<div class="tab-panels" role="tabpanel">
  <div id="phase-#<%= phase.id %>-panel" class="tab-panel active" aria-hidden="false" aria-labelledby="phase-#<%= phase.id %>-tab">
    <div class="section-description">
      <div class="display-readonly-textarea-content">
        <%= sanitize phase.description %>
      </div>
    </div>
    <div class="row">
      <div class="col-md-8">
        <div class="row">
          <div class="col-md-8">
            <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>
          </div>
        </div>
      </div>
    </div>
    <div class="panel-group" id="sections-accordion" role="tablist" 
         aria-multiselectable="true">
      <% phase.sections.order(:number).each do |section| %>
      <div class="panel panel-default">
        <div class="heading-button" role="button" data-toggle="collapse"
             id="section-panel-<%= section.id %>"
             data-parent="sections-accordion" 
             href="#collapse-<%= section.id %>"
             aria-expanded="false" 
             aria-controls="collapse-<%= section.id %>">

          <div class="panel-heading" role="tab" id="heading-<%= section.id %>">
            <div class="panel-title pull-left">
              <%= section.title %> 
              <% if plan.present? %>
                  <span class="section-progress-<%= section.id %>">
                    <%= render partial: "/org_admin/sections/progress_research_outputs",
                               locals: { section: section, plan: plan } %>
                  </span>
              <% end %>
            </div>
            <i class="fa fa-plus pull-right" aria-hidden="true"></i>
            <div class="clearfix"></div>
          </div>
        </div>
        <div id="collapse-<%= section.id %>" class="panel-collapse collapse section-content" role="tabpanel" aria-labelledby="heading-<%= section.id %>">
          <div class="panel-body"><!-- accordion body -->
            <div class="section-description">
              <div class="display-readonly-textarea-content">
                <%= sanitize section.description %>
              </div>
            </div>
            <ul class="nav nav-tabs">
              <% section_has_common_answers = plan.research_outputs.first.has_common_answers?(section.id) %>
              <% plan.research_outputs.each_with_index do |research_output, i| %>
                <li class="research_outputs_tabs <%= 'active' if research_output.main? %> <%= 'disabled' if section_has_common_answers %>">
                  <a href="#section-panel-<%= section.id %>" data-toggle="tab" 
                                    data-research-output="<%= research_output.id %>" 
                                    data-target="#research_output_<%= research_output.id %>_section_<%= section.id %>"
                  >
                    <%= research_output.abbreviation %>
                  </a>
                </li>
              <% end if plan.research_outputs.count > 1 %>
            </ul>
            <div class="tab-content panel-body">
              <% plan.research_outputs.each_with_index do |research_output, i| %>
                <div id="research_output_<%= research_output.id %>_section_<%= section.id %>" class="tab-pane fade <%= 'in active' if research_output.main? %> <%= 'main_research_output' if research_output.main? %>">
                <% if research_output.main? && plan.research_outputs.count > 1 %>
                  <p>
                    <input type="checkbox" class="is_common_cb" 
                          data-target-url="<%= set_answers_as_common_answers_path %>"
                          title="<%= d_("dmpopidor", "Please click to indicate that this section\'s answers are common to all research outputs" ) %>"
                          <%= 'checked=""' if section_has_common_answers %>> <%= d_('dmpopidor', 'This section\'s answers are common to all research outputs') %>
                  </p>
                  <span class="common_changed label label-info" style="display:none"><%= d_('dmpopidor', 'Changes saved.')%></span>
                <% end %>
                <!-- the section body -->
                <% section.questions.each_with_index do |question, i| %>
                <% # Load the answer or create a new one
                  answer = answers["#{question.id}_#{research_output.id}"] if plan.present?
                  if answer.blank?
                    answer = Answer.new({ plan: plan, question: question, research_output: research_output })
                  end
                %>
                <div class="row">
                  <div class="col-md-8">
                    <!-- Answer Section -->
                    <div class="question-form">
                      <div id="<%= "answer-locking-#{question.id}-research-output-#{research_output.id}" %>" 
                           class="answer-locking"></div>
                      <div id="<%= "answer-form-#{question.id}-research-output-#{research_output.id}" %>" class="answer-form"> 
                        <%= render(partial: '/answers/new_edit',
                                   locals: { template: phase.template,
                                             question: question,
                                             answer: answer,
                                             research_output: research_output,
                                             readonly: readonly,
                                             locking: false,
                                             base_template_org: base_template_org }) %>
                      </div>
                      <div id="<%= "answer-status-#{question.id}-research-output-#{research_output.id}" %>" class="mt-10">
                        <%= render(partial: '/answers/status',
                                   locals: { answer: answer }) %>
                      </div>
                    </div>
                  </div>
                  <div class="col-md-4">
                    <!-- Guidances and notes partial view -->
                    <%= render partial: '/phases/guidances_notes', locals: {
                      plan: plan,
                      template: phase.template,
                      question: question,
                      answer: answer,
                      research_output: research_output,
                      guidance_presenter: guidance_presenter } %>
                  </div>
                </div>
                <% if i != section.questions.length - 1 %>
                  <hr>
                <% end %>
                <% end %> <!-- section.questions.each do -->
              </div>
              <% end %>
            </div>
          </div> <!-- panel-body -->
        </div> <!-- panel-collapse -->
      </div> <!-- panel panel-default -->
      <% end %>   <!-- phase.sections.order(:number).each do -->
    </div>   <!-- panel-group -->
  </div> <!-- tab panel -->
</div> <!-- tab panels -->