<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 %>">
      <a href="#comment-question-area-<%= question.id %>" id="notes_number_<%= question.id %>" 
           aria-selected="<%= active_tab == 'note_tab' %>"><%= _('Comments') %><%= answer.notes.length > 0 ? " (#{answer.notes.length})" : "" %></a>
    </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">

      <div class="accordion-controls" data-parent="<%= question.id %>-guidance">
        <a href="#" data-toggle-direction="show"><%= _('expand all') %></a>
        <span>|</span>
        <a href="#" data-toggle-direction="hide"><%= _('collapse all') %></a>
      </div>

      <!--guidance content -->
      <div class="panel-group" id="<%= question.id %>-guidance" 
           role="tablist" aria-multiselectable="true">

        <!--question guidance-->
        <% num_annotations = 0 %>
        <% i = 0 %>
        <% if annotations.present? %>
          <% annotations.each do |annotation| %>
            <%= render partial: 'annotations/show', locals: {plan: plan, annotation: annotation, question: question} %>
            <% 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>   <!-- panel-group -->

    </div> <!-- guidance-question-area- -->

    <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 -->
      <div>
        <%= render partial: 'note', locals: {plan: plan, question: question, answer: answer } %>
      </div>  
    </div> <!-- note tab panel -->
  
  </div> <!-- tab panels -->
</div> <!-- tabbed area -->