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

  <% 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 -->
            <!-- need 'raw' to stop formtastic f.*ing up the formatastic formatting -->
            <%= raw question.text %>

            <!--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') 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 == _('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 == _('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 == _('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 %>
              <!-- 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%>

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

          <% end %>

          <!--action buttons-->
          <%= f.actions do %>
            <% if readonly then %>
              <%= f.action :submit, :label => _('Save'), :button_html => { :class => "btn btn-primary"}, :input_html => { :disabled => true } %>
            <% else %>
              <%= f.action :submit, :label => _('Save'), :button_html => { :class => "btn btn-primary"} %>
            <% end %>
            <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 %>>
      <h4><%= question.text %></h4>
      <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 = Notes.where("question_id = ? AND plan_id = ?", question.id, answer.plan_id ) %>
    <%= 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 -->
      <% if (!question.guidance.nil? && question.guidance != "") || !question_guidances.empty?  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">
      <!--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 %>
                  <%= _('Policy Expectations')%>
                <%else%>
                  <%= _('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 -->
      <% guidance_accordion_id = 1 %>
      <% 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-<%= guidance_accordion_id %>">
                  <div class="accordion_heading_text">
                      <%= gobj[:org] %> guidance on <%= theme %>
                    <% end %>
                  </div>
                  <span class="plus-laranja"> </span></a>
              </div>
              <div id="collapse-guidance-<%= guidance_accordion_id %>" class="guidance-accordion-body collapse">
                <div class="accordion-inner"><%= raw gobj[:text] %></div>
              </div>
              <% guidance_accordion_id += 1 %>
            </div>
          <% 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 %>