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

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

  <!-- always evaluates to true? readonly isnt even passed to here -->
  <% 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 => :update }, :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 -->
            <!-- need 'raw' to stop formtastic f.*ing up the formatastic formatting -->
            <h4><%= raw question.text %> </h4>

            <!--Suggested answer area-->
            <% if question.annotations.where('type <> ?',Annotation.types[:example_answer]).any? %>
              <% annotation = question.annotations.where('type <> ?',Annotation.types[:example_answer]).order(:created_at).first %>
              <div class="suggested-answer-div">
                <span class="suggested-answer-intro">
                  <%= _('Example of answer')%>
                </span>
                <div class="suggested-answer-border">
                  <p class="suggested-answer">
                  <%= raw annotation.text %>
                  </p>
                </div>
              </div>
            <% end %>

            <!-- verify if the question has multiple choice -->
            <% if q_format.title == _('Check box') || q_format.title == _('Multi select box') || q_format.title == _('Radio buttons') || q_format.title == _('helpers.dropdown') then%>
              <% options = question.options.order("number") %>
              <!--checkbox display-->
              <% if q_format.title == _('Check box') %>
                <% if readonly  %>
                  <%= 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 == _('Multi select box') %>
                <% 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 == _('Radio buttons') %>
                <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 == _('Dropdown') %>
                <% if readonly  %>
                  <%= 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 %>

              <!--text field display-->
            <% elsif q_format.title == _('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 == _('Text area') then%>
              <%= text_area_tag("answer-text-#{question.id}".to_sym, answer.text, class: "tinymce") %>
            <% end %>
            <!-- Comment text area for the multiple choice answers-->
              <% if question.option_comment_display == true then%>
                <%= label_tag("answer-text-#{question.id}".to_sym, _('Comment')) %>
                <%= text_area_tag("answer-text-#{question.id}".to_sym, answer.text, class: "tinymce") %>
              <%end%>

          <% end %>

          <!--action buttons-->
          <%= f.actions do %>

            <li id="saving-<%= question.id %>" class="saving-message" style="display:none;"><%= _('Saving...')%></li>
          <% end %>
        <% end %>
    </div>
  <% end %>

  <div id="question-readonly-<%= question.id %>" class="question-readonly" <%= if readonly == nil then "style='display:none;'" end %>>
      <div class="answer-readonly">
        <% if q_format.title == _('Check box') || q_format.title == _('Multi select box') || q_format.title == _('Radio buttons') || q_format.title == _('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"><%= _('Not answered yet') %></span>
  <% else %>
    <span id="<%= question.id %>-status" class="label label-info answer-status"><%= _('Answered ')%><abbr class="timeago" data-time="<%= answer.created_at.iso8601 %>" title="<%= answer.created_at.iso8601 %>"><%= answer.created_at %></abbr><%= _(' by ')%><%= answer.user.name %></span>
  <% end %>
  <span id="<%= question.id %>-unsaved" class="label label-inverse answer-unsaved" style="display:none;"><%= _('Unsaved changes') %></span>
</div>


<!-- Question right column -->
<div class="question-area-right-column">
  <div id="right-area-tabs-<%= question.id %>" class="question_right_column_nav">
    <% @comments = answer.notes.all %>
    <%= hidden_field_tag :question_id, question.id, :class => "question_id" %>

    <ul class="question_right_column_ul">
      <!-- if we have some guidance on the question or by theme -->
      <% q_guidance = question.get_guidance_annotation(current_user.org) %>
      <% if (q_guidance.present? && q_guidance.text.present?) || !question_guidances.empty? %>
        <!-- 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.length > 0 %>
            <% comments_label_with_count = "#{_('Notes')} (#{@comments.length})"%>
            <%= 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">
      <!--guidance save with the question-->
      <% q_guidance = question.get_guidance_annotation(current_user.org) %>
      <% if q_guidance.present? && q_guidance.text.present %>
        <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">
                <%= q_guidance.org.abbreviation %>
                  <%= _(' Guidance')%>
              </div>
              <span class="plus-laranja"> </span></a>
          </div>
          <div id="collapse-guidance-<%= question.id%>" class="guidance-accordion-body collapse">
            <div class="accordion-inner"><%= raw q_guidance.text %></div>
          </div>
        </div>
      <% end %>
      <!--guidance from themes -->
      <% guidance_accordion_id = 0 %>
       <% question_guidances.each_pair do |theme, group| %>
         <% group.each do |gobj| %>
           <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%>-<%= guidance_accordion_id %>">
                 <div class="accordion_heading_text">
                   <%= gobj[:org] %> guidance on <%= theme %>
                 </div>
                 <span class="plus-laranja"> </span></a>
             </div>
             <div id="collapse-guidance-<%=question.id%>-<%= guidance_accordion_id %>" class="guidance-accordion-body collapse">
               <div class="accordion-inner"><%= raw gobj[:text] %></div>
             </div>
             <% guidance_accordion_id += 1 %>
           </div>
         <% end %>   <!-- group.each -->
       <% end %>   <!-- question_guidances.each_pair -->
      <% end %>
    </div>
  </div>

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



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