{% extends "base.html" %}
{% block title %}The Local Labor Market — Gordon{% endblock %}
{% block description %}U.S. employment and unemployment decomposed to {{ s.geographies }} geographies and {{ s.measures }} measures, {{ s.first }} to {{ s.last }}.{% endblock %}
{% block head %}
  <script src="/static/vendor/plotly.min.js"></script>
{% endblock %}
{% block content %}

<section class="prose">
  <h1>The Local Labor Market</h1>
  <p class="lead">The national unemployment rate is an average of places that are not average. This
     takes it apart: {{ s.measures }} labor-market measures across {{ s.geographies }} geographies
     &mdash; census regions and divisions, every state, and a set of large metropolitan areas &mdash;
     monthly from {{ s.first }} to <b>{{ s.last }}</b>.</p>
  <p>{{ "{:,}".format(s.rows) }} observations across {{ "{:,}".format(s.series) }} series. Because the
     panel carries the participation rate and the employment-to-population ratio alongside the
     unemployment rate, you can ask the question that matters: when a state&rsquo;s unemployment rate
     falls, is that people finding work, or people leaving the labor force?</p>
</section>

<section class="gp-controls" aria-label="Local labor market controls">
  <div class="gp-row">
    <label class="gp-label">
      Measure
      <select id="gp-measure" class="gp-select">
        {% for m in measures %}
        <option value="{{ m.measure }}"{% if m.measure == default_measure %} selected{% endif %}>{{ m.measure }} ({{ m.geographies }} geographies)</option>
        {% endfor %}
      </select>
    </label>
  </div>

  <fieldset class="gp-areas">
    <legend>Geographies &mdash; {{ s.geographies }} available</legend>
    <div class="gp-area-grid">
      {% for g in geographies %}
      <label class="gp-check">
        <input type="checkbox" name="geography" value="{{ g.geography }}"
               {% if g.geography in default_geographies %}checked{% endif %}>
        <span>{{ g.geography }}</span>
        <span class="gp-tier">{{ g.geo_tier | replace("_", " ") }}</span>
      </label>
      {% endfor %}
    </div>
  </fieldset>
</section>

<section class="gp-chart-section">
  <div id="gp-chart" class="gp-chart-mount"></div>
  <div id="gp-downloads" class="chart-actions"></div>
  <p id="gp-note" class="ark-fineprint"></p>
</section>

<section class="prose">
  <h2>Freshness, stated plainly</h2>
  <p>The panel above is the fresh tier: its last real observation is <b>{{ s.last }}</b>. Two further
     tiers ship with this product, and <b>both are older</b>. They are separate files with their own
     labels, and nothing on this page silently blends them with the fresh panel.</p>
  <ul class="gp-gaps">
    <li><b>Counties</b> &mdash; {{ "{:,}".format(s.counties) }} counties in all,
        {{ "{:,}".format(s.county_rows) }} observations, last real observation
        <b>{{ s.county_last }}</b>. Those are three different numbers and they stay separate:
        only <b>{{ "{:,}".format(s.counties_monthly) }}</b> of those counties are published
        <em>monthly</em>, while <b>{{ "{:,}".format(s.counties_annual) }}</b> are published
        <em>annually</em> &mdash; so a monthly county chart can cover far less ground than the
        headline county count suggests. Either way this is a minority of the roughly 3,143 U.S.
        counties, and the fresh panel above has no county tier at all.</li>
    <li><b>Payrolls by area and industry</b> &mdash; {{ "{:,}".format(s.industry_rows) }} observations
        covering {{ "{:,}".format(s.industries) }} industries across
        <b>{{ "{:,}".format(s.industry_areas) }} areas</b> in
        <b>{{ "{:,}".format(s.industry_states) }} states</b>, last real observation
        <b>{{ s.industry_last }}</b>. Areas and states are counted separately and deliberately:
        this tier's geography is mostly metropolitan areas and New England city and town areas
        rather than whole states, and reporting the area count as a state count would overstate
        its geographic reach roughly fivefold.</li>
  </ul>
  <ul class="gp-gaps">
    {% for g in s.gaps %}<li>{{ g }}</li>{% endfor %}
  </ul>
</section>

{% endblock %}
{% block body_scripts %}
  <script id="gp-initial" type="application/json">{{ initial | tojson }}</script>
  <script src="/static/js/gordon-products.js"></script>
  <script>GordonProducts.mount({
    kind: "labor",
    mount: "gp-chart",
    downloads: "gp-downloads",
    note: "gp-note",
    endpoint: "/api/labor/series",
    filename: "gordon_local_labor"
  });</script>
{% endblock %}