<% content_for :navigation do %>
  <nav class="nav nav-tabs">
    <% @categories.each do |category| %>
      <div class="nav-item">
        <%= link_to [@district, @school, category, { year: @academic_year.range }], class: ["nav-link", current_page?([@district, @school, category, { year: @academic_year.range }]) ? "active" : ""] do %>
          <i class="fa fa-<%= category.icon %> me-2"></i> <%= category.name %>
        <% end %>
      </div>
    <% end %>
  </nav>
<% end %>

<h1 class="sub-header font-bitter color-red"><%= @category.name %></h1>
<h2 class="col-8 body-large"><%= @category.description %></h2>

<% @category.subcategories.each do |subcategory| %>
  <section class="subcategory-section">
    <h2 class="sub-header-2 font-bitter mb-7"><%= subcategory.name %></h2>

    <div class="d-flex justify-space-between align-items-end">
      <div>
        <%= render partial: "gauge_graph", locals: { gauge: subcategory.gauge_presenter, gauge_class: 'gauge-graph-lg', font_class: 'font-bitter' } %>
      </div>
      <h2 class="body-large mx-7"><%= subcategory.description %></h2>
    </div>

    <div class="arrow-up mt-6"></div>

    <div class="measure-card d-flex px-7 pt-10 pb-7 mt-4 ">
      <% subcategory.measure_presenters.each do |measure_presenter| %>
        <div class="measure-presenter d-flex flex-column justify-space-between align-items-center px-5">
          <h3 class="measure-description sub-header-4 mb-5 "><%= measure_presenter.name %></h3>
          <div>
            <%= render partial: "gauge_graph", locals: { gauge: measure_presenter.gauge_presenter, gauge_class: 'gauge-graph-sm', font_class: 'font-cabin' } %>
          </div>
          <p class="measure-description body-small mt-5 mb-4 "><%= measure_presenter.description %></p>
        </div>
      <% end %>
    </div>

  </section>
<% end %>
