<%- 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, plan_data: @plan_data} %>


<!-- progress bar -->
<% status = @plan.status %>
<div class="progress">
  <%space_used = status["space_used"].to_i
  space_title = _('approx. %{space_used}% of available space used (max %{num_pages} pages)') % { space_used: => space_used, num_pages: => @plan.template.settings(:export).max_pages }
  answered = %(#{status["num_answers"]}/#{status["num_questions"]})%>
  <div class="bar-container">
    <span id="questions-progress-title"><%= answered -%> <%= _('questions answered')%></span>
    <span id="questions-progress" class="bar" style="width: <%= number_to_percentage(status["num_answers"].to_f/status["num_questions"].to_f*100) %>;" title="<%= answered -%> <%= _('questions answered')%>"></span>
  </div>

  <hr>

  <div class="bar-container">
    <span id="export-progress-title" <%= space_used >= 100 ? "class=bar-full-text" : "" -%>><%= space_title -%></span>
    <span id="export-progress" class="bar <%= space_used >= 100 ? "full" : "space" -%>" style="width: <%= space_used -%>%;" title="<%= space_title -%>"></span>
  </div>
</div>   <!-- progess -->

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

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

  <div class="accordion" id="sections-accordion">
    <% @phase_data["sections"].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"].count %>
        <% num_section_answers = section["nanswers"] %>
        <% 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-<%= section["id"] %>">
            <div class="accordion_heading_text" id="section-header-<%= section["id"] %>">
              <%= 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["guidances"] %>
  
                  <%= render partial: partialname,
                      locals: {
                        plan: @plan,
                        plan_data: @plan_data,
                        phase_id: @phase_data["id"],
                        question: question,
                        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="#<%= @plan.id %>-export-dialog" data-toggle="modal" class="btn btn-primary"><%= _('Export') %></a>
</div>
<%= render :partial => "plans/export", locals: {plan: @plan, plan_data: @plan_data} %>

<!-- 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)%>