<% content_for :title do %>
  <h1 class="sub-header-2 color-white m-0"> Analysis of <%= @school.name %> </h1>
<% end %>
<div class="graph-content">
  <div class="breadcrumbs sub-header-4">
    <%= @presenter.category.category_id %>:<%= @presenter.category.name %> > <%= @presenter.subcategory.subcategory_id %>:<%= @presenter.subcategory.name %>
  </div>
  <hr>
</div>
<div class="d-flex flex-row pt-5 row">
  <div class="d-flex flex-column flex-grow-6 bg-color-white col-3 px-5" data-controller="analyze">
    <%= render partial: "focus_area", locals: {categories: @presenter.categories, district: @district, school: @school, academic_year: @academic_year, category: @presenter.category,  subcategories: @presenter.subcategories} %>
    <%= render partial: "school_years", locals: {available_academic_years: @presenter.academic_years, selected_academic_years: @presenter.selected_academic_years, district: @district, school: @school, academic_year: @academic_year, category: @presenter.category, subcategory: @presenter.subcategory, measures: @presenter.measures, graph: @presenter.graph} %>
    <%= render partial: "data_filters", locals: {district: @district, school: @school, academic_year: @academic_year, category: @presenter.category, subcategory: @presenter.subcategory} %>
  </div>
  <% cache [@school, @presenter.cache_objects]  do %>
    <div class="bg-color-white flex-grow-1 col-9">
      <% @presenter.measures.each do  |measure| %>
        <section class="mb-6">
          <p class="construct-id">Measure <%= measure.measure_id %></p>
          <h2> <%= measure.name %> </h2>
          <%= render partial: "grouped_bar_chart" , locals: { measure: measure} %>
        </section>
      <% end %>
    </div>
  <% end %>
</div>
