<%- model_class = Plan -%>
<% javascript "plans.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: {nquestions: @nquestions, nanswers: @nanswers} %>
</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 %>

      <!-- verify if the session[:question_id_comments] has been created. -->
      <% if session[:question_id_comments].to_i != 0 then %>
        <% question_from_comment = Question.find(session[:question_id_comments])%>
        <% if sectionid == question_from_comment.section_id then %>    
          <%= hidden_field_tag :comment_section_id, question_from_comment.section_id, :class => "comment_section_id" %>
        <%end%>    
      <% end%>     

      <div class="accordion-group">

        <!-- section status line included in heading -->
        <% num_section_questions = section.questions.to_a.count %>
        <% num_section_answers = section.num_answered_questions(@plan.id) %>
        <% question_word = "questions" %>
        <% if num_section_questions == 1 then %>
          <% question_word = "question" %>
        <% end %>
        <% section_status = "#{num_section_questions} #{question_word}, #{num_section_answers} answered" %>

        <!-- 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-header-<%= sectionid %>">
              <%= section.title %>
              <% if num_section_questions.to_i > num_section_answers.to_i then %>
                <span id="<%= sectionid %>-status" class="label label-warning section-status">(<%= section_status %>)</span>
              <% else %>
                <span id="<%= sectionid %>-status" class="label label-info section-status">(<%= section_status %>)</span>
              <% end %>
            </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%>">
                  <% partialname = "answer_form"
                     if @readonly
                       partialname += "_ro"
                     end
                  %>
  
                  <% guidances = @question_guidance[question.id] %>
  
                  <%= render partial: partialname,
                      locals: {
                        plan: @plan,
                        phase_id: @phase.id,
                        question: question,
                        question_guidances: guidances,
                        last_question_id: section.questions.last.id,
                      }
                  %>
                </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 -->

  <%= tinymce :content_css => asset_path("application.css"), :setup => "function(editor){editor.on('change', function(e){$.fn.check_textarea(editor)});}" %>
</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 } %>

<!-- this session is created when a comment is created, edited or deleted. After the view is loaded this session variable can be deleted-->
<% session.delete(:question_id_comments)%>