{% extends "base.html" %}
{% block title %}School Finder{% endblock %}
{% block head %}
<link rel="stylesheet" href="{{ static('schools/finder-loading.css') }}">
{% endblock %}

{% block body %}
<div class="wrap">
  {% include "partials/_topbar.html" %}

  <header class="page-header page-banner">
    <div>
      <p class="eyebrow">School portfolio</p>
      <h1>School Finder</h1>
      <p class="sub">Showing the {{ "{:,}".format(school_count) }} school{{ "" if school_count == 1 else "s" }} shared with your account.</p>
    </div>
    <div class="hero-stats" aria-label="School summary">
      <div class="stat-box">
        <span>Total schools</span>
        <strong>{{ "{:,}".format(school_count) }}</strong>
      </div>
      <div class="stat-box accent">
        <span>Ready to review</span>
        <strong>{{ "{:,}".format(school_count) }}</strong>
      </div>
    </div>
  </header>

  <div class="panel finder-initial-loading" id="drop" role="status" aria-label="Loading schools">
    <p>Loading schools…</p>
    <div class="initial-skeleton" aria-hidden="true">
      {% for row in range(5) %}
      <div class="initial-skeleton-row">
        <span class="skeleton-block school"></span>
        <span class="skeleton-block"></span>
        <span class="skeleton-block short"></span>
      </div>
      {% endfor %}
    </div>
  </div>

  <div id="app" hidden>
    {% include "partials/_filters.html" %}
    {% include "partials/_columns.html" %}
    {% include "partials/_results.html" %}
  </div>
</div>
{% include "partials/_detail.html" %}
{% endblock %}

{% block scripts %}
{# server -> browser settings, safely JSON-encoded #}
<script id="app-config" type="application/json">{{ config|tojson }}</script>
<script src="{{ static('schools/finder.js') }}"></script>
{% endblock %}