<section class="subcategory-section">
  <div id="<%= subcategory.id %>" class="p-7">
    <%= link_to(district_school_analyze_index_path(@district, @school, { academic_year: @academic_year.range, category: subcategory.subcategory.category.category_id, subcategory: subcategory.id})) do %>
      <p class="construct-id">Subcategory <%= subcategory.id %></p>
    <% end %>

    <h2 class="sub-header-2 font-bitter mb-7"><%= subcategory.name %></h2>

    <div class="d-flex justify-content-between align-items-end">
      <div>
        <%= render partial: "gauge_graph", locals: { gauge: subcategory.gauge_presenter, gauge_class: 'gauge-graph-lg', font_class: 'sub-header-3' } %>
      </div>
      <div class="d-flex flex-column mx-7">
        <p class="body-large "><%= subcategory.description %></p>

      </div>
    </div>
  </div>

  <div class="arrow-container mt-7">
    <div class="arrow-shadow"></div>
    <div class="arrow"></div>
  </div>

  <div class="measure-card d-flex p-7">
    <% subcategory.measure_presenters.each do |measure_presenter| %>
      <%= render partial: "measures_section", locals: { measure_presenter: measure_presenter, id: measure_presenter.id } %>
    <% end %>
  </div>

  <% if subcategory.show_scale_presenters?  %>
    <div class="scale-card d-flex p-7">
      <% subcategory.scale_presenters.each do |scale_presenter| %>
        <%= render partial: "measures_section", locals: { measure_presenter: scale_presenter, id: "#{scale_presenter.scale_id}" } %>
      <% end %>
    </div>
  <% end %>
</section>
