<% content_for :navigation do %>
  <h2 class="sub-header-2 color-white m-0">Areas Of Interest</h2>
<% end %>

<svg class="d-none">
  <symbol viewBox="0 0 24 24" id="one-quarter-circle">
    <circle cx="12" cy="12" r="11.5" fill="white" stroke="none" />
    <path d="
                      M 12 0
                      A 12 12 0 0 1 24 12
                      L 12 12
                      L 12 0"
          stroke="none"
      />
    <circle cx="12" cy="12" r="11.5" fill="none" />
  </symbol>

  <symbol viewBox="0 0 24 24" id="half-circle">
    <circle cx="12" cy="12" r="11.5" fill="white" stroke="none" />
    <path d="
                      M 12 0
                      A 12 12 0 1 1 12 24
                      L 12 12
                      L 12 0"
          stroke="none"
      />
    <circle cx="12" cy="12" r="11.5" fill="none" />
  </symbol>

  <symbol viewBox="0 0 24 24" id="three-quarter-circle">
    <circle cx="12" cy="12" r="11.5" fill="white" stroke="none" />
    <path d="
                      M 12 0
                      A 12 12 0 1 1 0 12
                      L 12 12
                      L 12 0"
          stroke="none"
      />
    <circle cx="12" cy="12" r="11.5" fill="none" />
  </symbol>

  <symbol viewBox="0 0 24 24" id="full-circle">
    <circle cx="12" cy="12" r="11.5" />
  </symbol>
</svg>

<div class="card">
  <div class="d-flex justify-content-between align-items-center">
    <h2 class="sub-header-2">School Quality Framework Indicators</h2>

    <div class="harvey-ball-legend">
      <div class="font-size-14">Warning</div>
      <svg class="ms-3 me-1" width="16" height="16" xmlns="http://www.w3.org/2000/svg">
        <use class="harvey-ball harvey-ball--warning" xlink:href="#full-circle"></use>
      </svg>
      <svg class="mx-1" width="16" height="16" xmlns="http://www.w3.org/2000/svg">
        <use class="harvey-ball harvey-ball--watch" xlink:href="#one-quarter-circle"></use>
      </svg>
      <svg class="mx-1" width="16" height="16" xmlns="http://www.w3.org/2000/svg">
        <use class="harvey-ball harvey-ball--growth" xlink:href="#half-circle"></use>
      </svg>
      <svg class="mx-1" width="16" height="16" xmlns="http://www.w3.org/2000/svg">
        <use class="harvey-ball harvey-ball--approval" xlink:href="#three-quarter-circle"></use>
      </svg>
      <svg class="ms-1 me-3" width="16" height="16" xmlns="http://www.w3.org/2000/svg">
        <use class="harvey-ball harvey-ball--ideal" xlink:href="#full-circle"></use>
      </svg>
      <div class="font-size-14">Ideal</div>
    </div>
  </div>

  <%= render partial: "quality_framework_indicators", locals: { category_presenters: @category_presenters } %>
</div>

<div class="card">
  <h2 class="sub-header-2 mb-4">Distance From Benchmark</h2>

  <%= render partial: "variance_chart", locals: { presenters: @variance_chart_row_presenters} %>
</div>
