<header>
  <div class="container">
    <div class="row py-4 justify-content-between align-items-center">
      <div class="col d-flex justify-content-start align-items-center">
        <%= link_to image_tag('sqm_logo.png', alt: 'MCIEA School Quality Measures Dashboard', class: 'height-56 me-7'), root_path %>
        <a class="h3 link me-4 <%= link_weight(path: 'dashboard') %>" href="<%= link_to_dashboard(district: @district, school: @school, academic_year: @academic_year) %>">Dashboard</a>
        <a class="h3 link <%= link_weight(path: 'browse') %>" href="<%= link_to_browse(district: @district, school: @school, academic_year: @academic_year) %>">Browse</a>
      </div>

      <div class="col d-flex justify-content-end">
        <select id="select-district" class="form-select" name="district">
          <% @districts.each do |district| %>
            <option class="district-options" value="<%= district_url_for(district: district, academic_year: @academic_year) %>" <%= @district.slug == district.slug ? "selected" : nil %>>
              <%= district.name %>
            </option>
          <% end %>
        </select>

        <select id="select-school" class="ms-3 form-select" name="school">
          <% @schools.each do |school| %>
            <option class="school-options" value="<%= school_url_for(school: school, academic_year: @academic_year) %>" <%= @school.slug == school.slug ? "selected" : nil %> >
              <%= school.name %>
            </option>
          <% end %>
        </select>
      </div>
    </div>
  </div>

  <div class="bg-color-blue">
    <div class="container">
      <div class="row py-4 justify-content-between align-items-center">
        <div class="col align-self-end">
          <% if content_for?(:navigation) %>
            <%= yield(:navigation) %>
          <% end %>
        </div>

        <div class="col-2">
          <select class="form-select" name="academic-year">
            <option value="<%= @academic_year %>" selected><%= format_academic_year(@academic_year) %></option>
          </select>
        </div>
      </div>
    </div>
  </div>
</header>
