<div id="right-area-tabs-<%= question.id %>" class="tabbed-area question_right_column_nav">
  <% comments = answer.notes.all %> 
  <% active_tab = nil %>
  <%= hidden_field_tag :question_id, question.id, class: "question_id" %>

  <!-- render navigation tabs for the Guidance/Notes section -->
  <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| %>
            <%= render partial: 'annotations/show', locals: {annotation: annotation} %>
            <% num_annotations += 1%>
            <% i += 1 %>
          <% end %>
        <% end %> 

        <!-- guidance by theme -->
        <% guidances = @question_guidance[question.id] %>
        <% guidance_accordion_id = num_annotations %>
        <% guidances.each_pair do |theme, groups| %>
          <% groups.each do |group| %>
            <%= render partial: 'guidance_groups/show', 
                       locals: {group: group, theme: theme, i: i, question: question,
                        guidance_accordion_id: guidance_accordion_id} %>
       
            <% guidance_accordion_id += 1 %>
            <% i += 1 %>
          <% end %> 
        <% end %>   
      </div>   <!-- accordion guidance/annotations -->

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

    <div id="comment-question-area-<%= question.id %>" 
         aria-hidden="false" aria-labelledby="note_tab"
         class="tab-panel comment-area note_tab<%= active_tab == 'note_tab' ? ' active' : '' %>">

      <!--note content -->
      <% if answer.present? && answer.notes.any? %>
        <% notes = answer.notes.all.to_a.sort! {|x,y| y.updated_at <=> x.updated_at } %>
        <% questionid = question.id %>
        <%= hidden_field_tag :question_id, questionid, class: "question_id" %>

        <!-- add note -->
        <div id="add_comment_button_top_div_<%= questionid %>" class="move_2_right" >
          <%= link_to _('Add note'), "#question-form-#{questionid}",
              class: "btn btn-primary add_comment_button",
              onclick: "add_note_button(#{questionid})",
              role: "button" %>
        </div>

        <div class="div_clear"></div>

        <!-- list of notes, view and edit a note -->
        <%= render partial: "/notes/list", 
                   locals: {question_id: question.id, notes: notes, plan: @plan} %>

        <div class="div_clear"></div>

        <!-- add a note block -->
        <div id="add_comment_block_div_<%= questionid %>" style="display: none">
          <%= render partial: "/notes/add", 
                     locals: {answer: answer, question: question, plan_id: @plan.id }%>
        </div>
      <% else %>
        <%= render partial: "/notes/add", 
                   locals: {answer: answer, question: question, plan_id: @plan.id }%>
      <% end%>  
    </div> <!-- note tab panel -->
  
  </div> <!-- tab panels -->
</div> <!-- tabbed area -->