<%- model_class = Plan -%>
<% javascript "plans.js" %>
<% javascript "answers/status.js" %>
<% javascript "notes/index.js" %>
<!--
  editing plan details is handled through plan#show
  so if we come this way then we are editing a phase
-->

<!-- render the project title -->
<%= render :partial => "/plans/plan_title", locals: {plan: @plan} %>


<div class="progress">
  <%= render :partial => "/plans/progress", locals: { plan: @plan } %>
</div> <!-- progess -->

<!-- render navigation tabs for the plan phases -->
<%= render :partial => "/plans/plan_nav_tabs", locals: {plan: @plan, active: @phase.title} %>

<!-- phase main container -->
<div class="project-tabs-body">

  <div class="accordion" id="sections-accordion">
    <% @phase.sections.order(:number).each do |section| %>

      <% sectionid = section.id %>

      <div class="accordion-group">
        <!-- section heading -->
        <div class="accordion-heading">
          <a class="accordion-toggle" data-toggle="collapse" data-parent="#sections-accordion" href="#collapse-<%= sectionid %>">
            <div class="accordion_heading_text" id="section-progress-<%= sectionid %>">
              <%= render :partial => "/sections/progress", locals: { section: section, plan: @plan } %>
            </div>

            <!-- + or - icon-->
            <span class="icon-plus icon-white accordion-icon"> </span>
          </a>
        </div>  <!-- accordion heading -->

        <!-- accordion body -->
        <div id="collapse-<%= sectionid %>" class="accordion-body collapse section-collapse">
          <div class="section_desc">
            <%= raw section.description %>
          </div>

          <div class="accordion-inner">

            <!-- various loading/saving messages -->
              <!-- This should be completely unnecessary!!
                div class="loading">
              <p><%= t ('helpers.loading')%></p>
            </div> -->
            <div class="saving" style="display: none">
              <p><%= t ('helpers.saving')%></p>
            </div>
            <div class="removing" style="display: none">
              <p><%= t ('helpers.removing')%></p>
            </div>

            <!-- the section body -->
            <div class="loaded">
              <% section.questions.each do |question| %>
                <% if question.id == session[:question_id_comments].to_i then id_css = "current_question" end %>
                <div id="<%= id_css%>">

                  <% guidances = @question_guidance[question.id] %>
                  <!-- TODO Rename the partial view below to something more appropiate -->
                  <%= render partial: 'answer_form',
                      locals: {
                        plan: @plan,
                        question: question,
                        question_guidances: guidances,
                        last_question_id: section.questions.last.id,
                        readonly: @readonly
                      }
                  %>
                </div>   <!-- id_css -->
              <% end %>   <!-- section.questions -->
            </div>   <!--  loaded -->
          </div>   <!--  accordion-inner -->
        </div>   <!-- collapse-sectionid -->
      </div>   <!-- accordion group -->

      <!-- pop up about unsaved answers -->
      <div id="section-<%= sectionid %>-collapse-alert" data-container="body" class="modal hide fade">

        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
          <h3><%= _('Unsaved answers')%></h3>
        </div>

        <div class="modal-body">
          <div id="section-<%= sectionid %>-collapse-alert-plural">
            <p><%= _('You have altered answers but have not saved them:')%></p>
            <ul id="unsaved-answers-<%= sectionid %>"></ul>
            <p><%= _('Would you like to save them now?')%></p>
          </div>
        </div>

        <div class="modal-footer">
          <a href="#" id="section-<%= sectionid %>-collapse-cancel" data-section="<%= sectionid %>" class="cancel-section-collapse btn"><%= _('Cancel')%></a>
          <a href="#" id="section-<%= sectionid %>-collapse-discard" data-section="<%= sectionid %>" class="discard-section-collapse btn"><%= _('Discard')%></a>
          <a href="#" id="section-<%= sectionid %>-collapse-save" data-section="<%= sectionid %>" class="save-section-collapse btn btn-primary"><%= _('Save')%></a>
        </div>

      </div>  <!-- section-sectionid-collapse-alert -->

    <% end %>   <!-- sections.each do -->
  </div>   <!-- sections-accordion -->
</div>   <!-- project-tabs-body -->

<div class="div_right">
  <a href="#<%= @phase.id %>-export-dialog" data-toggle="modal" class="btn btn-primary"><%= _('Export') %></a>
</div>

<%= render :partial => "plans/export", locals: {plan: @plan, plan_data: @plan_data, phase: @phase } %>