{% extends "base.html" %}
{% block title %}The Item Ledger — Gordon{% endblock %}
{% block description %}U.S. consumer prices decomposed to {{ s.item_strata }} item strata across {{ s.areas }} BLS areas, {{ s.first }} to {{ s.last }}.{% endblock %}
{% block head %}
  <script src="/static/vendor/plotly.min.js"></script>
{% endblock %}
{% block content %}

<section class="prose">
  <h1>The Item Ledger</h1>
  <p class="lead">Inflation is not a number — it is {{ "{:,}".format(s.item_strata) }} of them, measured in
     {{ s.areas }} different places. This is the U.S. consumer price index taken apart: every item
     stratum the Bureau of Labor Statistics publishes, in every area it publishes one for, month by
     month from {{ s.first }} to <b>{{ s.last }}</b>.</p>
  <p>{{ "{:,}".format(s.rows) }} observations across {{ "{:,}".format(s.series) }} series. Pick an
     item, pick the places you want to compare, and the chart is rebuilt from the panel itself —
     with the underlying rows downloadable as CSV or Parquet.</p>
</section>

<section class="gp-controls" aria-label="Item ledger controls">
  <div class="gp-row">
    <label class="gp-label">
      Item
      <select id="gp-item" class="gp-select">
        {% for it in items %}
        <option value="{{ it.code }}"{% if it.code == default_item %} selected{% endif %}>{{ it.name }} ({{ it.areas }} areas)</option>
        {% endfor %}
      </select>
    </label>

    <label class="gp-label">
      Measure
      <select id="gp-metric" class="gp-select">
        <option value="yoy" selected>Year-over-year %</option>
        <option value="level">Index level (1982-84 = 100)</option>
      </select>
    </label>
  </div>

  <fieldset class="gp-areas">
    <legend>Areas &mdash; {{ s.areas_chartable }} chartable</legend>
    <div class="gp-area-grid">
      {% for a in areas %}
      <label class="gp-check">
        <input type="checkbox" name="area" value="{{ a.area_code }}"
               {% if a.area_code in default_areas %}checked{% endif %}>
        <span>{{ a.area_name }}</span>
        {# a["items"], not a.items — dotted access would resolve to dict.items, the method. #}
        <span class="gp-tier">{{ a.area_tier | replace("_", " ") }} &middot; {{ a["items"] }} items</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>What&rsquo;s in here, and what isn&rsquo;t</h2>
  <p>The panel covers {{ s.first }} onward. Deeper history exists, but only in a
     <b>separate and materially staler vintage</b>: a mirror of the same CPI concept reaching back to
     {{ s.spine_first }} and stopping at <b>{{ s.spine_last }}</b> &mdash;
     {{ "{:,}".format(s.spine_rows) }} observations. Those two vintages ship as two files and are
     never merged into one line. If you need the long view, take the older one &mdash; and say on
     your own chart that that is what it is.</p>
  <ul class="gp-gaps">
    {% for g in s.gaps %}<li>{{ g }}</li>{% endfor %}
  </ul>
  {% if s.stubs %}
  <p class="ark-fineprint">The retired areas, named here rather than quietly dropped:
     {{ s.stubs | join("; ") }}.</p>
  {% endif %}
</section>

<section class="prose">
  <h2>How the geography was recovered</h2>
  <p>The source panel arrived with every one of its {{ "{:,}".format(s.rows) }} rows labelled
     &ldquo;national&rdquo;, while the series identifiers carried {{ s.areas }} real area codes. The
     area names themselves are not distributed in any lookup table this project holds, so they were
     recovered from the Bureau&rsquo;s own series titles, which name the area in a fixed position.
     Six area codes are checked against independently-known values on every build, and the build
     fails rather than ship a label it cannot verify. Full method:
     <a href="/methodology">Methodology</a>.</p>
</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: "prices",
    mount: "gp-chart",
    downloads: "gp-downloads",
    note: "gp-note",
    endpoint: "/api/prices/series",
    filename: "gordon_item_ledger"
  });</script>
{% endblock %}