<!-- 
  **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 edit-plan-left">
  <%
     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}" %>" class="answer-locking"></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 edit-plan-right">

  <div id="right-area-tabs-<%= question.id %>" class="tabbed-area question_right_column_nav">
    <% comments = answer.notes.all %> 
    <%= hidden_field_tag :question_id, question.id, class: "question_id" %>
    <% active_tab = nil %>
    
    <!-- render navigation tabs for the project-->
    <ul class="tabs question_right_column_ul" role="tablist">
      <% annotations = question.annotations.where(type: Annotation.types[:guidance]) %>
      <% if annotations.present? || question_guidances.present? %>
        <% active_tab = 'guidance_tab' %>
        <li class="guidance_tab active" role="tab" aria-controls="guidance-question-area-<%= question.id %>">
          <a href="#guidance-question-area-<%= question.id %>" aria-selected="true"><%= _('Guidance') %></a>
        </li>
      <% else %>
      <% active_tab = 'note_tab' %>
      <% end %>
      <li class="note_tab <%= "active" if active_tab == 'note_tab' %>" role="tab" aria-controls="comment-question-area-<%= question.id %>">
        <% if comments.length > 0 %>
          <a href="#comment-question-area-<%= question.id %>" id="notes_number_<%= question.id %>" aria-selected="<%= active_tab == 'note_tab' %>"><%= _('Notes') %></a>
        <% else %>
          <a href="#comment-question-area-<%= question.id %>" id="notes_number_<%= question.id %>" aria-selected="<%= active_tab == 'note_tab' %>"><%= _(' Share note') %></a>
        <% end %>
      </li>
    </ul>

    <div class="tab-panels question-guidance guidance_tab" role="tabpanel">
      <div id="guidance-question-area-<%= question.id %>" class="tab-panel<%= active_tab == 'guidance_tab' ? ' active' : '' %>" aria-hidden="false" aria-labelledby="guidance_tab">


    <!--guidance content -->
     <div class="accordion" id="<%= question.id %>-guidance">

        <!--question guidance-->
        <% num_annotations = 0 %>
        <% i = 0 %>
        <% if annotations.present? %>
          <% annotations.each do |annotation| %>

            <h3>
              <%= annotation.org.abbreviation %> <%= _('Guidance') %>
              <span class="fa <%= i == 0 ? 'fa-minus' : 'fa-plus' %>"></span>
            </h3>

             <!-- 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%>
             <% i += 1 %>
        <% end %>
       <% end %>   <!-- if question.guidance -->

       <!-- guidance by theme -->
       <% guidance_accordion_id = num_annotations %>
       <% question_guidances.each_pair do |theme, group| %>
         <% group.each do |gobj| %>
           <h3>
             <%= gobj[:org] %> guidance on <%= theme %>
             <span class="fa <%= i == 0 ? 'fa-minus' : 'fa-plus' %>"></span>
           </h3>

             <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 %>
             <% i += 1 %>
         <% end %>   <!-- group.each -->
       <% end %>   <!-- question_guidances.each_pair -->

     </div>   <!-- accordion-questionid -->
     
       </div> <!-- question tab panel -->

       <div id="comment-question-area-<%= question.id %>" class="tab-panel comment-area note_tab<%= active_tab == 'note_tab' ? ' active' : '' %>" aria-hidden="false" aria-labelledby="note_tab">
         
  <!--note content -->
      <%= render partial: "note", locals: {question: question, answer: answer, plan: plan, suffix: "" }%>
  
      </div> <!-- note tab panel -->
    </div> <!-- tab panels -->
  </div> <!-- tabbed area -->
</div> <!-- right column -->

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