<!-- 
**Project: DMPonline v4
**Description: This block sets up the type of question, its guidance.
**Arguments transferred: an instance of "question"  
**Copyright: Digital Curation Centre
-->
<% answer = @plan.answer(question.id) %>

<div class="question-div">
	<!--question format-->
	<% q_format = question.question_format%>

	<% if readonly != "always" then %>
		<div id="question-form-<%= question.id %>" class="question-form" <%= if readonly == "conditional" then "style='display:none;'" end %>>
		<%= semantic_form_for answer, :url => {:controller => :answers, :action => :create }, :html=>{:method=>:post}, :remote => true do |f| %>
			<%= f.inputs do %>
				<%= f.input :plan_id, :as => :hidden %>
				<%= f.input :user_id, :as => :hidden, :input_html => { :value => current_user.id } %>
				<%= f.input :question_id, :as => :hidden, :input_html => { :class => "question_id" } %>
				
                <!-- Question text -->
                <%= label_tag("answer-text-#{question.id}".to_sym, question.text) %>
                
                <!--Suggested answer area-->
                <% suggested_answer = question.suggested_answers.find_by_organisation_id(@plan.project.organisation_id) %>
                <% if !suggested_answer.nil? && suggested_answer.text != "" then %>
                    <div class="suggested-answer-div">
                        <span class="suggested-answer-intro">
                            <% if suggested_answer.is_example? then %>
                                <%= t("org_admin.questions.example_answer_label")%>
                            <%else%>
                                <%= t("org_admin.questions.suggested_answer_label")%>
                            <%end%>
                        </span>
                        <div class="suggested-answer-border">
                            <p class="suggested-answer">
                                <%= raw suggested_answer.text %>
                            </p>
                        </div>
                    </div>
                <% end %>
                               
                <!-- verify if the question has multiple choice -->
                <% if q_format.title == t("helpers.checkbox") || q_format.title == t("helpers.multi_select_box") || q_format.title == t("helpers.radio_buttons") || q_format.title == t("helpers.dropdown") then%>
					<% options = question.options.order("number") %>
					<!--checkbox display-->
					<% if q_format.title == t("helpers.checkbox") then %>
						<% if readonly then %>
							<%= f.input :options, :as => :check_boxes, :collection => options, :label => false, input_html => { :disabled => true, :id => "options-#{question.id}" } %>
						<% else %>
							<%= f.input :options, :as => :check_boxes, :collection => options, :label => false, :input_html => { :id => "options-#{question.id}" } %>
						<% end %>
					<!--multi select box display-->
					<% elsif q_format.title == t("helpers.multi_select_box") then %>
						<% if readonly then %>
							<%= f.input :options, :as => :select, :collection => options, :label => false, :input_html => { :multiple => true, :disabled => true , :id => "options-#{question.id}" } %>
						<% else %>
							<%= f.input :options, :as => :select, :collection => options, :label => false, :input_html => { :multiple => true , :id => "options-#{question.id}" } %>
						<% end %>
					<!--Radio buttons display-->
					<% elsif q_format.title == t("helpers.radio_buttons") then%>
						<ol class="choices-group">
                        <% options.each do |op| %>
                            <li class= "choices-group">
                            <% if answer.option_ids[0] == op.id then%>
                               <% if readonly then %>
                                    <%= f.radio_button :option_ids, op.id, :checked => true, disabled: true, id: "answer_option_ids_#{op.id}"%>
                                <% else %>
                                    <%= f.radio_button :option_ids, op.id, :checked => true, id: "answer_option_ids_#{op.id}"%> 
                                <% end %>
                            <%else%>
                                <% if readonly then %>
                                    <%= f.radio_button :option_ids,  op.id, :checked => false, disabled: true, id: "answer_option_ids_#{op.id}"%> 
                                <% else %>
                                    <%= f.radio_button :option_ids, op.id, :checked => false, id: "answer_option_ids_#{op.id}"%> 
                                <% end %>
                            <%end%>
                            <%= op.text %> </li>
                        <%end%>
                        </ol>
                    <!--dropdown display-->
					<% elsif q_format.title == t("helpers.dropdown") then%>
						<% if readonly then %>
							<%= f.input :options, :as => :select, :collection => options, :label => false, :input_html => { :multiple => false, :disabled => true, :id => "options-#{question.id}" } %>
						<% else %>
                            <%= f.input :options, :as => :select, :collection => options, :label => false, :input_html => { :multiple => false, :id => "options-#{question.id}" } %>
						<% end %>
					<% end %>

					<!--div id="option-warning-<%#= question.id %>" class="alert" style="display:none">
					<%# question.options.order("number").each do |option| %>
						<%# warning = @plan.warning(option.id) %>
						<%# unless warning.nil? then %>
							<p id="<%#= option.id %>-warning" data-option="<%#= option.id %>"><%#= warning %></p>
						<%# end %>
					<%# end %> -->
                    
                    <!-- Comment text area for the multiple choice answers-->
                    <% if question.option_comment_display == true then%>
                        <%= label_tag("answer-text-#{question.id}".to_sym, t("helpers.comment")) %>
                        <%= text_area_tag("answer-text-#{question.id}".to_sym, answer.text, class: "tinymce") %>
                    <%end%>
                    
                <!--text field display-->
                <% elsif q_format.title == t("helpers.text_field") then %>
                    <%= text_field_tag("answer-text-#{question.id}".to_sym, strip_tags(answer.text), class: "question_text_field") %>
                <!--text area display-->
                <% elsif q_format.title == t("helpers.text_area") then%>
                    <%= text_area_tag("answer-text-#{question.id}".to_sym, answer.text, class: "tinymce") %>
                <% end %>

            <% end %>

            <!--action buttons-->
            <%= f.actions do %>
                <% if readonly then %>
                    <%= f.action :submit, :label => t("helpers.save"), :button_html => { :class => "btn btn-primary"}, :input_html => { :disabled => true } %>
                <% else %>
                    <%= f.action :submit, :label => t("helpers.save"), :button_html => { :class => "btn btn-primary"} %>
                <% end %>
                <li id="saving-<%= question.id %>" class="saving-message" style="display:none;"><%= t("helpers.saving")%></li>
            <% end %>
        <% end %>
        </div>
    <% end %>    
    
    
    <div id="question-readonly-<%= question.id %>" class="question-readonly" <%= if readonly == nil then "style='display:none;'" end %>>
            <h4><%= question.text %></h4>
            <div class="answer-readonly">
                <% if q_format.title == t("helpers.checkbox") || q_format.title == t("helpers.multi_select_box") || q_format.title == t("helpers.radio_buttons") || q_format.title == t("helpers.dropdown") %>
                    <ul class="options">
                    <% if answer.options.is_a? Option then %>
                        <li><%= answer.options.text %></li>
                    <% else %>
                        <% answer.options.each do |o| %>
                            <li><%= o.text %></li>
                        <% end %>
                    <% end %>
                    </ul>
                <% end %>
                <div class="answer-text-readonly">
                    <%= raw answer.text %>
                </div>
            </div>
        </div>
      
    <% if answer.created_at.nil? then %>
        <span id="<%= question.id %>-status" class="label label-warning answer-status"><%= t("helpers.notanswered") %></span>
    <% else %>
        <span id="<%= question.id %>-status" class="label label-info answer-status"><%= t("helpers.answered_by")%><abbr class="timeago" data-time="<%= answer.created_at.iso8601 %>" title="<%= answer.created_at.iso8601 %>"><%= answer.created_at %></abbr><%= t("helpers.answered_by_part2")%><%= answer.user.name %></span>
    <% end %>
    <span id="<%= question.id %>-unsaved" class="label label-inverse answer-unsaved" style="display:none;"><%= t("helpers.unsaved") %></span>
      
</div>


<!-- Question right column -->
<div class="question-area-right-column">
    
    <div id="right-area-tabs-<%= question.id %>" class="question_right_column_nav">
        <% @comments = Comment.where("question_id = ? && plan_id = ?", question.id, answer.plan_id ) %>
        <%= hidden_field_tag :question_id, question.id, :class => "question_id" %>
        <ul class="question_right_column_ul">
            <% if (!question.guidance.nil? && question.guidance != "") || @plan.guidance_for_question(question).count > 0  then %>
                <!-- add css to comment div-->
                <% css_style_comment_div = "display: none;"%>
                <% css_style_guidance_div = ""%>
                <li class="active guidance_tab_class">
                    <%= link_to t("helpers.guidance_accordion_label"), "#", :class => "guidance_accordion_button" %>
                </li>
                <li class="comment_tab_class">
                    <% if @comments.count > 0 then%>
                        <% comments_label_with_count = "#{t("helpers.comment_accordion_label")} (#{@comments.count})"%>
                        <%= link_to comments_label_with_count , "#", :class => "comments_accordion_button" %>
                    <%else%>
                        <%= link_to t("helpers.add_comment_accordion_label"), "#", :class => "comments_accordion_button" %>
                    <%end%>
                </li>
            <%else%>
                <!-- remove the css from comment div-->
                <% css_style_comment_div = ""%>
                <% css_style_guidance_div = "display: none;"%>
                <li>
                    <% if @comments.count > 0 then%>
                        <% comments_label_with_count = "#{t("helpers.comment_accordion_label")} (#{@comments.count})"%>
                        <p class= "accordion_label"><%= comments_label_with_count %></p>
                    <%else%>
                        <p class= "accordion_label"><%= t("helpers.add_comment_accordion_label") %></p>
                    <%end%>
                </li>
            <%end%>
        </ul>
    </div>


    <!--guidance area -->
    <div class="question-guidance" id="guidance-question-area-<%= question.id %>" style="<%= css_style_guidance_div%>" >
        <div class="accordion" id="<%= question.id %>-guidance">
            <!--guidance save with the question-->
            <% if !question.guidance.nil? && question.guidance != "" then %>
                <div class="accordion-group">
                    <div class="accordion-heading">
                        <a class="accordion-guidance-link" data-toggle="collapse" data-parent="#<%= question.id %>-guidance" href="#collapse-guidance-<%= question.id%>">
                            <div class="accordion_heading_text">
                                <%= question.section.organisation.abbreviation %> 
                                <%if question.section.organisation.abbreviation == "EPSRC" then %>
                                    <%= t("helpers.policy_expectations")%>
                                <%else%>
                                    <%= t("helpers.guidance")%>
                                <%end%>    
                            </div>
                            <span class="plus-laranja"> </span></a>
                    </div>
                    <div id="collapse-guidance-<%= question.id%>" class="guidance-accordion-body collapse">
                        <div class="accordion-inner"><%= raw question.guidance %></div>
                    </div>
                </div>
            <% end %>
            <!--guidance from themes, institution themes and/or direct to the question-->
            <% @plan.guidance_for_question(question).each_pair do |group,themes| %>
                <% themes.each_pair do |theme,guidances| %>
                    <% guidances.each do |guidance| %>
                        <div class="accordion-group">
                            <div class="accordion-heading">
                                <a class="accordion-guidance-link" data-toggle="collapse" data-parent="#<%= question.id %>-guidance" href="#collapse-guidance-<%= group.id%>-<%= guidance.id%>-<%= question.id %>">
                                    <div class="accordion_heading_text">
                                    <% if theme == "no_theme" then %>
                                        <%= group.name.chomp(" guidance") %> guidance
                                    <% else %>
                                        <%= group.name.chomp(" guidance") %> guidance on <%= theme.title %>
                                    <% end %>
                                    </div>
                                    <span class="plus-laranja"> </span></a>
                            </div>
                            <div id="collapse-guidance-<%= group.id%>-<%= guidance.id%>-<%= question.id %>" class="guidance-accordion-body collapse">
                                <div class="accordion-inner"><%= raw guidance.text %></div>
                            </div>
                        </div>
                    <% end %>
                <% end %>
            <% end %>
            
           
        </div>
    </div>
    
    <!--comment area -->
    <div class="comment-area" id="comment-question-area-<%= question.id %>"  style="<%= css_style_comment_div%>">
        <%= render :partial => "comments", locals: {questionId: question.id, plan_id: answer.plan_id }%>
                      
    </div>

    
    
</div>
<!--display or not the break line between questions-->
<% if last_question_id == question.id then %>
	<div class="two-column-clear"></div>
<% else %>
	<div class="two-column-clear question-divider"></div>
<% end %>