<div class="hero-image">
  <div class="hero-text">
    <h1 class="sub-header">School Quality Measures Dashboard</h1>
    <p class="hero-description">A school quality framework with multiple measures that offers a fair and comprehensive
    picture of school performance</p>
  </div>
</div>
<div class="bg-color-blue">
  <div class="container">
    <div class="row justify-content-center">
      <div class="col-6 welcome-controls d-flex justify-content-center">

        <%= form_with(url: welcome_path, method: :get,
                      data: {
                        turbo_frame: "schools",
                        turbo_action: "advance",
                        controller: "form",
                        action: "change->form#submit"
                      }) do |f| %>

                        <div class="d-flex">
                          <% if @districts.count > 1 %>
                            <div class="row">
                              <%= f.select :district,  @districts,
                                {include_blank: "Select a District", selected: params[:district] } , {id: "district-dropdown", class: "form-select", hidden: @districts.count == 1} %>
                          </div>
                        <% end %>

                        <div>
                          <%= f.select :school,  @schools,
                            {include_blank: "Select a School", selected: params[:school]}, { id: "school-dropdown", class: "form-select mx-3"} if @schools %>
                      </div>

                      <% if @school.present? %>
                        <%= link_to "Go", district_school_overview_index_path(@district, @school, {year:  @year}  ), class: "mx-4 btn btn-secondary" , data: {turbo_frame: "_top"} %>
                      <%  else %>
                        <%= button_to "Go", "/", class: "mx-4 btn btn-secondary" , data: {turbo_frame: "_top"}, disabled:  true %>
                      <% end %>

                        </div>
                      <% end %>

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

<div class="bg-color-light-blue pt-12 pb-11">
  <div class="container">
    <div class="row">
      <div class="col-lg-5 framework-wheel-container">
        <div>
          <%= image_tag('dashboard/framework_wheel.png', alt: 'School Quality Framework Wheel') %>
        </div>

        <p class="mt-5">The School Quality Measures Framework aims to describe the full measure of what makes a good
        school. The three outer categories are essential inputs to school quality that influence the center two key
        outcomes.</p>
      </div>
      <div class="col-lg-7">
        <h2 class="mb-4">School Quality Measures Framework</h2>
        <p> Through a strand of work led by professor Jack Schneider at the University of Massachusetts Lowell and a team of researchers, ECP is reimagining how we measure the quality of our schools and the learning experiences of our students. </p>
        <p> Specifically, ECP is the dissemination arm of the School Quality Measures framework developed by the eight original districts of the Massachusetts Consortium for Innovative Education Assessment (MCIEA). MCIEA sought input from stakeholders in each consortium district to build a school quality framework that reflects what the public wants to know about their schools. </p>
        <p> The framework has been built around multiple measures, which include academic, social-emotional, and school culture indicators, in order to piece together a fairer and more comprehensive picture of school performance. It consists of five major categories. </p>
        <div id="landing-accordion" class="accordion mt-6">
          <% @categories.each do |category| %>
            <div class="accordion-item">
              <h3 class="accordion-header" id="<%= category.slug %>-header">
                <button class="accordion-button sub-header-4 collapsed" data-bs-toggle="collapse" data-bs-target="#<%= category.slug %>-item" aria-expanded="false" aria-controls="<%= category.slug %>-item">
                  <i class="<%= category.icon_class %> fa-lg fa-fw me-3 <%= category.icon_color_class %>"></i> <%= category.name %>
              </button>
              </h3>
              <div id="<%= category.slug %>-item" class="accordion-collapse collapse" aria-labelledby="<%= category.slug %>-header" data-bs-parent="#landing-accordion">
                <div class="accordion-body">
                  <%= category.description %>
                </div>
              </div>
            </div>
          <% end %>
        </div>
      </div>
    </div>
  </div>
</div>

<div class="bg-color-blue text-center py-11">
  <div class="about-mciea">
    <h2 class="mb-4">About ECP</h2>
    <p>The Education Commonwealth Project works to challenge and expand the way student learning and school quality are assessed, advancing an approach to measurement and accountability that is valid, democratic, and equitable. ECP supports schools and communities with free and open-source tools, and broadly seeks to foster state- and national-level change.</p>
    <a href="https://www.edcommonwealth.org/" target="_blank" class="btn btn-secondary mt-4">Learn More</a>
  </div>
</div>
