<!-- 
  **Project: DMPRoadmap
  **Description: This block sets up the type of question, its guidance.
  **Arguments transferred: an instance of "question"
  **Copyright: Digital Curation Centre and University of California Curation Center
-->

<div class="question-div">
  <!--question format-->
  <%
     answer = nil
     answer_obj = nil
     if question.has_key?("answers")
       answer = question["answers"].first
       answer_obj = Answer.find(answer["id"])
     else
       answer_obj = Answer.new
     end
     question_id = question["id"]
     question_obj = Question.find(question_id)
     q_format = question_obj.question_format
   %>

  <div id="question-form-<%= question_id %>" class="question-form">
    <%= semantic_form_for answer_obj, :url => {:controller => :answers, :action => :update }, :remote => true do |f| %>
      <%= f.inputs do %>
        <%= f.input :plan_id, :as => :hidden, :input_html => { :value => @plan_data["id"] } %>
        <%= f.input :user_id, :as => :hidden, :input_html => { :value => current_user.id } %>
        <%= f.input :question_id, :as => :hidden, :input_html => { :value => question_id, :class => "question_id" } %>
        <%= f.hidden_field :lock_version %>

        <!-- Question text -->
        <!-- need 'raw' to stop formtastic f.*ing up the formatastic formatting -->
        <%= raw question["text"] %>

        <!--Suggested answer area-->
        <% if question.has_key?("suggested_answer") && question["suggested_answer"]["text"].present? %>
          <% suggested_answer = question["suggested_answer"] %>
          <div class="suggested-answer-div">
            <span class="suggested-answer-intro">
              <% if suggested_answer["is_example"] then %>
                <%= _('Example of answer')%>
              <%else%>
                <%= _('Suggested answer')%>
              <%end%>
            </span>

            <div class="suggested-answer-border">
              <p class="suggested-answer">
                <%= raw suggested_answer["text"] %>
              </p>
            </div>
          </div>
        <% end %>

        <!-- used for optimistic locking where a conflict is detected -->
        <div id="answer_notice_<%=question_obj.id%>" class="answer_notice"></div>

        <!-- if the question has multiple choices pull out the options -->
        <% if question_obj.option_based? %>
          <% options = question.options.order("number") %>

          <!-- work through the various format options -->
          <% if q_format.checkbox? %>
            <%= f.input :options, :as => :check_boxes, :collection => options, :label => false, :input_html => { :id => "options-#{question.id}" } %>
          <% elsif q_format.multiselectbox? %>
            <%= f.input :options, :as => :select, :collection => options, :label => false, :input_html => { :multiple => true , :id => "options-#{question.id}" } %>
          <% elsif q_format.radiobuttons? %>
            <ol class="choices-group">
              <% options.each do |op| %>
                <li class= "choices-group">
                  <% if answer.option_ids[0] == op.id then%>
                    <%= f.radio_button :option_ids, op.id, :checked => true, id: "answer_option_ids_#{op.id}"%> 
                  <%else%>
                    <%= f.radio_button :option_ids, op.id, :checked => false, id: "answer_option_ids_#{op.id}"%> 
                  <% end %>
               <%= raw op.text %> </li>
              <% end %>
            </ol>
          <% elsif q_format.dropdown? %>
            <%= f.input :options, :as => :select, :collection => options, :label => false, :input_html => { :multiple => false, :id => "options-#{question.id}" } %>
          <% end %>


          <!-- Comment text area for the multiple choice answers-->
          <% if question.option_comment_display == true %>
            <%= label_tag("answer-text-#{question.id}".to_sym, _('Comment')) %>
            <%= text_area_tag("answer-text-#{question.id}".to_sym, answer.text, class: "tinymce") %>
          <%end%>
        <% end %>  <!-- if multiple choice -->

        <% if q_format.textfield? %>
          <%= text_field_tag("answer-text-#{question_id}".to_sym, strip_tags(answer.text), class: "question_text_field") %>
        <% elsif q_format.textarea? %>
          <%= text_area_tag("answer-text-#{question_id}".to_sym, answer_obj.text, class: "tinymce") %>
        <% end %>

      <% end %>   <!-- f.inputs -->

      <!--action buttons-->
      <%= f.actions do %>
        <%= f.action :submit, :label => _('Save'), :button_html => { :class => "btn btn-primary"} %>
        <li id="saving-<%= question_id %>" class="saving-message" style="display:none;"><%= _('Saving...')%></li>
      <% end %>   <!-- f.actions -->
    <% end %>
  </div>   <!-- question-form -->

  <% if answer.nil? || !answer.has_key?("created_at") || answer["created_at"].nil? %>
    <span id="<%= question_id %>-status" class="label label-warning answer-status"><%= _('Not answered yet') %></span>
  <% else %>
    <span id="<%= question_id %>-status" class="label label-info answer-status"><%= _('Answered')%><abbr class="timeago" data-time="<%= answer_obj.created_at.iso8601 %>" title="<%= answer_obj.created_at.iso8601 %>"><%= answer_obj.created_at %></abbr><%= _(' by')%><%= answer_obj.user.name %></span>
  <% end %>
</div>   <!-- question-div -->

<span id="<%= question_id %>-unsaved" class="label label-inverse answer-unsaved" style="display:none;"><%= _('Unsaved changes') %></span>
      
<!-- Question right column -->
<div class="question-area-right-column">

    <div id="right-area-tabs-<%= question_id %>" class="question_right_column_nav">
      <% comments = answer_obj.notes.all %> 
      <%= hidden_field_tag :question_id, question_id, :class => "question_id" %>
      <ul class="question_right_column_ul">
      <% if (!question["guidance"].nil? && question["guidance"] != "") || question.has_key?("theme_guidance")  then %>
        <!-- add css to comment div-->
        <% css_style_comment_div = "display: none;"%>
        <% css_style_guidance_div = ""%>
        <li class="active guidance_tab_class">
          <%= link_to _('Guidance'), "#", :class => "guidance_accordion_button" %>
        </li>
        <li class="comment_tab_class">
          <% if comments.count > 0 then%>
            <% comments_label_with_count = "#{_('Notes')} (#{comments.count})"%>
            <%= link_to comments_label_with_count , "#", :class => "comments_accordion_button" %>
          <%else%>
            <%= link_to _('Share note'), "#", :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 = "#{_('Notes')} (#{comments.count})"%>
              <p class= "accordion_label"><%= comments_label_with_count %></p>
            <%else%>
              <p class= "accordion_label"><%= _('Share note') %></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">

       <!--question guidance-->
       <% if question["guidance"].present? %>
         <div class="accordion-group">

           <!-- accordion heading -->
           <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">
               <%= plan.template.org.abbreviation %> <%= _('Guidance') %>
               </div>
               <span class="plus-laranja"> </span></a>
           </div>

           <!-- accordion body -->
           <div id="collapse-guidance-<%= question_id%>" class="guidance-accordion-body collapse">
             <div class="accordion-inner"><%= raw question["guidance"] %></div>
           </div>

         </div>   <!-- accordion-group -->
       <% end %>   <!-- if question.guidance -->


       <!-- guidance by theme -->
       <% gnum = 0 %>
       <% if question.has_key?("theme_guidance") %>
         <% question["theme_guidance"].each_key do |theme| %>
           <% question["theme_guidance"][theme].each do |guidance| %>
             <% 
                 orgname = guidance["org"]
             gnum = gnum + 1
             text = guidance["text"]
           %>

         <div class="accordion-group">

           <!-- accordion heading -->
           <div class="accordion-heading">
             <a class="accordion-guidance-link" data-toggle="collapse" data-parent="#<%= question_id %>-guidance" href="#collapse-guidance-<%= gnum %>-<%= question_id %>">
               <div class="accordion_heading_text">
                 <%= orgname %> guidance on <%= theme %>
               </div>
               <span class="plus-laranja"> </span></a>
           </div>

           <!-- accordion body -->
           <div id="collapse-guidance-<%= gnum %>-<%= question_id %>" class="guidance-accordion-body collapse">
             <div class="accordion-inner"><%= raw text %></div>
           </div>   <!-- collapse guidance text -->  
         </div>   <!-- accordion-group -->
       <% end %>   <!-- each guidance -->
     <% end %>   <!-- each theme -->
   <% end %>

     </div>   <!-- accordion-questionid -->
    </div>   <!-- question-guidance -->

  <!--comment area -->
  <div class="comment-area" id="comment-question-area-<%= question_id %>"  style="<%= css_style_comment_div%>">
      <%= render :partial => "note", locals: {question: question, answer_obj: answer_obj, answer: answer, plan: plan, plan_data: plan_data}%>
  </div>

</div> <!-- question area right column -->

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