<%# locals: { plan, template, question, answer, question_guidance } %>
<% annotations = question.annotations.where(type: Annotation.types[:guidance]) %>
<% guidances = question_guidance[question.id] || {} %>
<% guidances_active = annotations.present? || guidances.present? %>
<div>
    <!-- Nav tabs -->
    <ul class="nav nav-tabs" role="tablist">
        <% if guidances_active %>
            <li role="presentation" class="active">
                <a href="#guidances-<%= question.id %>" aria-controls="guidances-<%= question.id %>" role="tab" data-toggle="tab">
                    <%= _('Guidance') %>
                </a>
            </li>
        <% end %>
        <% if plan.present? %>
            <li role="presentation" class="<%= 'active' if !guidances_active %>">
                <a href="#notes-<%= question.id %>" aria-controls="notes-<%= question.id %>" role="tab" data-toggle="tab">
                    <span id="notes-title-<%= question.id %>">
                        <%= render partial: '/notes/title', locals: { answer: answer } %>
                    </span>
                </a>
            </li>
        <% end %>
    </ul>
    <div class="tab-content">
        <div id="guidances-<%= question.id %>" role="tabpanel" class="tab-pane <%= 'active' if guidances_active %>">
            <div class="accordion-controls" data-parent="accordion-guidances-<%= question.id %>">
                <a href="#" data-toggle-direction="show"><%= _('expand all') %></a>
                <span>|</span>
                <a href="#" data-toggle-direction="hide"><%= _('collapse all') %></a>
            </div>
            <!--guidance accordion -->
            <div class="panel-group" id="accordion-guidances-<%= question.id %>" role="tablist" aria-multiselectable="true">
                <!-- annotations with type guidance -->
                <% num_annotations = 0 %>
                <% i = 0 %>
                <% if annotations.present? %>
                  <% annotations.each do |annotation| %>
                    <%= render partial: 'annotations/show', locals: { template: template, annotation: annotation, question: question } %>
                    <% num_annotations += 1%>
                    <% i += 1 %>
                  <% end %>
                <% end %>
                <!-- guidance by theme -->
                <% 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, question: question,
                                guidance_accordion_id: guidance_accordion_id } %>
                    <% guidance_accordion_id += 1 %>
                    <% i += 1 %>
                  <% end %> 
                <% end %>   
            </div>
        </div>
        <% if plan.present? %>
            <div id="notes-<%= question.id %>" role="tabpanel" class="tab-pane <%= 'active' if !guidances_active %> notes">
                <%= render partial: '/notes/layout', locals: { plan: plan, question: question, answer: answer } %>
            </div>
        <% end %>
    </div>
</div>