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

<div class="question-div">
  <%
     answers = question.plan_answers(plan.id)
     if answers.present?
       answer = answers.first
     else
       answer = Answer.new({ plan_id: plan.id, question_id: question.id, user_id: current_user.id })
       if question.default_value.present?
        answer.text = question.default_value
      end
     end
   %>
  <div class="question-form">
    <div id="<%= "answer-locking-#{question.id}" %>"></div>
    <div id="<%= "answer-form-#{question.id}" %>">
      <%= render(partial: 'answers/new_edit', locals: { question: question, answer: answer, readonly: readonly }) %>
    </div>
    <div id="<%= "answer-status-#{question.id}" %>" class="answer-status">
      <%= render(partial: 'answers/status', locals: { answer: answer }) %>
    </div>
  </div>   <!-- question-form -->
</div>   <!-- question-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">
      <% annotations = question.annotations.where(type: Annotation.types[:guidance]) %>
      <% if annotations.present? || question_guidances[question.id] %>
        <!-- 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%>
            <% comments_label_with_count = "#{_('Notes')} (#{comments.count})"%>
            <%= link_to comments_label_with_count , "#", id: "notes_number_#{question.id}", class: "comments_accordion_button" %>
          <% else %>
            <%= link_to _('Share note'), "#", id: "notes_number_#{question.id}", 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 %>
              <% comments_label_with_count = "#{_('Notes')} (#{comments.count})"%>
              <p id="notes_number_<%=question.id%>" class= "accordion_label"><%= comments_label_with_count %></p>
            <% else %>
              <p id="notes_number_<%=question.id%>" 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-->
        <% num_annotations = 0 %>
        <% if annotations.present? %>
          <% annotations.each do |annotation| %>

            <div class="accordion-group">

             <!-- accordion heading -->
              <div class="accordion-heading">
               <a class="accordion-guidance-link" data-toggle="collapse"
               data-parent="#<%=question.id%>-guidance-<%=num_annotations%>"
               href="#collapse-guidance-<%=question.id%>-<%=num_annotations%>">
                 <div class="accordion_heading_text">
                 <%= annotation.org.abbreviation %> <%= _('Guidance') %>
                 </div>
                 <span class="plus-laranja"> </span></a>
             </div>

             <!-- accordion body -->
             <div id="collapse-guidance-<%= question.id%>-<%=num_annotations%>" class="guidance-accordion-body collapse">
               <div class="accordion-inner"><%= raw annotation.text %></div>
             </div>
             <% num_annotations += 1%>
           </div>   <!-- accordion-group -->
        <% end %>
       <% end %>   <!-- if question.guidance -->

       <!-- guidance by theme -->
       <% guidance_accordion_id = num_annotations %>
       <% 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 -->

     </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: answer, plan: plan, suffix: "" }%>
  </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 %>