<%# locals: { plan, template, question, answer, guidance_service } %>
<% guidances_active = guidance_service.any? %>
<% active_nav = nil %>
<div id="plan-guidance-tab">
  <!-- Nav tabs -->
  <ul class="nav nav-pills nav-justified mb-10" role="tablist">
      <% if guidances_active %>
          <li role="presentation" class="active">
              <a href="#guidances-<%= question.id %>" aria-controls="guidances-<%= question.id %>" role="tab" data-toggle="pill">
                  <%= _('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="pill">
                  <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 %>">
      <ul class="nav nav-tabs" role="tablist">
        <% guidance_service.orgs.each_with_index do |org, i| %>
            <% if guidance_service.any?(org: org, question: question) %>
              <% active_nav ||= org.id %>
              <li role="presentation" <%= active_nav == org.id ? "class=active" : "" %>>
                <a
                  data-target="<%= "#guidance_per_question_#{question.id}_#{i}" %>"
                  aria-controls="<%= "#guidance_per_question_#{question.id}_#{i}" %>"
                  role="tab"
                  data-toggle="tab"
                  class="view-plan-guidance">
                  <%= org.abbreviation %>
                </a>
              </li>
            <% end %>
        <% end %>
      </ul>
      <div class="tab-content">
        <% guidance_service.orgs.each_with_index do |org, i| %>
          <% if guidance_service.any?(org: org, question: question) %>
            <div id="<%= "guidance_per_question_#{question.id}_#{i}" %>" role="tabpanel" class="tab-pane <%= active_nav == org.id ? 'active' : '' %>">
              <div class="panel panel-default">
                <div class="panel-body">
                  <% guidance_service.guidance_annotations(org: org, question: question).each do |annotation| %>
                    <%= 
                      render partial: 'org_admin/annotations/show', locals: {
                        template: template,
                        example_answer: nil, 
                        guidance: annotation, 
                        for_plan: true } 
                    %>
                  <% end %>
                  <% if guidance_service.guidance_annotations?(org: org, question: question) &&
                    guidance_service.guidance_groups_by_theme?(org: org, question: question) %>
                    <hr />
                  <% end %>
                  <% if guidance_service.guidance_groups_by_theme?(org: org, question: question) %>
                    <%= render partial: 'guidance_groups/index_by_theme',
                        locals: { guidance_groups_by_theme: guidance_service.guidance_groups_by_theme(org: org, question: question) } %>
                  <% end %>
                </div>
              </div>
            </div>
          <% 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>