<%- 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 => "plan_title", locals: {plan: @plan} %>

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

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

<!--
	Need to verify each section and group them by organisations (eg. funders, institutions)
	-->
    
<!-- phase main container -->
<div class="project-tabs-body">
    <div class="accordion" id="sections-accordion">
    	<% sections = @phase.sections %>
    	<% sections.each do |section| %>
                
                <!-- 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 section.id == 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">
          <!-- figure out the status line for this section -->
    			<% num_section_questions = @plan.status["sections"][section.id]["num_questions"] %>
    			<% num_section_answers = @plan.status["sections"][section.id]["num_answers"] %>
    			<% 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="<%= section.id %>-status" class="label label-warning section-status">(<%= section_status %>)</span>
                <% else %>
                  <span id="<%= section.id %>-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>  <!-- section heading -->

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

              <!-- various loading/saving messages -->
							<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.order("number").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
                     %>

                   <%= render partial: partialname,
                              locals: {
                                plan: @plan,
                                question: question,
                                last_question_id: section.questions.order("number DESC").first.id
                              }
                   %>
                  </div>    
                <% end %>
              </div>   <!-- the section body -->

            </div>
          </div>
        </div>

        <!-- pop up about unsaved answers -->
    		<div id="section-<%= section.id %>-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-<%= section.id %>-collapse-alert-plural">
							<p><%= _('You have altered answers but have not saved them:')%></p>
                            <ul id="unsaved-answers-<%= section.id %>"></ul>
							<p><%= _('Would you like to save them now?')%></p>
						</div>
					</div>

					<div class="modal-footer">
						<a href="#" id="section-<%= section.id %>-collapse-cancel" data-section="<%= section.id %>" class="cancel-section-collapse btn"><%= _('Cancel')%></a>
						<a href="#" id="section-<%= section.id %>-collapse-discard" data-section="<%= section.id %>" class="discard-section-collapse btn"><%= _('Discard')%></a>
						<a href="#" id="section-<%= section.id %>-collapse-save" data-section="<%= section.id %>" class="save-section-collapse btn btn-primary"><%= _('Save')%></a>
					</div>
				</div>
    	<% end %>
    </div>
    <%= tinymce :content_css => asset_path("application.css"), :setup => "function(editor){editor.on('change', function(e){$.fn.check_textarea(editor)});}" %>
</div>
<div class="div_right">
	<a href="#<%= @plan.id %>-export-dialog" data-toggle="modal" class="btn btn-primary"><%= _('Export') %></a>
</div>
<%= render :partial => "export", locals: {plan: @plan, 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)%>