{% extends "base.html.j2" %}
{% block title %}{{ page_title }}{% endblock %}
{% block description %}{{ page_description }}{% endblock %}
{% block canonical_path %}{{ canonical_path }}{% endblock %}
{% block jsonld %}<script type="application/ld+json">{{ jsonld_str | safe }}</script>{% endblock %}
{% block content %}
<nav class="breadcrumb" aria-label="Breadcrumb">
  {% for label, href in breadcrumb %}{% if href %}<a href="{{ href }}">{{ label }}</a>{% else %}<span>{{ label }}</span>{% endif %}{% if not loop.last %} <span class="sep">›</span> {% endif %}{% endfor %}
</nav>

<article class="climate-page">
  <h1>{{ display }} climate</h1>
  <p class="lede">Average temperatures, precipitation and all-time records for <b>{{ display }}</b>,
     with every day graded against ~{{ n_years }} years of local climate history
     ({{ year_range[0] }}–{{ year_range[1] }}).{% if warmest and coldest %} Its warmest month is
     <b>{{ warmest.name }}</b>, averaging a high of {{ warmest.high }}, and its coldest is
     <b>{{ coldest.name }}</b>, with an average low of {{ coldest.low }}.{% endif %}</p>

  {% if flavor %}
  <p class="city-blurb">{{ flavor.extract }}{% if flavor.url %}
    <a class="blurb-src" href="{{ flavor.url }}" rel="nofollow">via Wikipedia</a>{% endif %}</p>
  {% endif %}

  {% if today %}
  <section class="climate-today">
    <h2>How today compares</h2>
    <p class="muted">Latest recorded day: {{ today.date }}. Each reading placed on {{ display }}'s
       own ±7-day seasonal distribution.</p>
    <div class="today-cards">
      {% for c in today.cards %}
      <div class="today-card" style="border-left-color: var(--{{ c.cls }})">
        <span class="tc-label">{{ c.label }}</span>
        <span class="tc-value">{{ c.value }}</span>
        {% if c.percentile is not none %}<span class="tc-grade">{{ c.grade }} · {{ c.percentile|ordinal }} pct</span>
        {% else %}<span class="tc-grade">{{ c.grade }}</span>{% endif %}
      </div>
      {% endfor %}
    </div>
    <p><a class="cta" href="{{ base }}/#{{ tool_hash }}">Open {{ name }} in the live weather grader →</a></p>
  </section>
  {% endif %}

  {% if event %}
  <section class="city-event">
    <h2>Notable weather in {{ name }}</h2>
    <p>{{ event.text }}{% if event.url %} <a href="{{ event.url }}" rel="nofollow">Read&nbsp;more&nbsp;→</a>{% endif %}</p>
  </section>
  {% endif %}

  <section class="climate-normals">
    <h2>{{ name }} average temperatures by month</h2>
    <p>Typical daily high and low, and average precipitation, for each month in {{ display }},
       based on {{ year_range[0] }}–{{ year_range[1] }} records.
       {% if wettest %}The wettest month is <b>{{ wettest.name }}</b> ({{ wettest.precip }} on an average day).{% endif %}</p>
    <div class="table-wrap">
      <table class="normals-table">
        <thead><tr><th>Month</th><th>Avg high</th><th>Avg low</th><th>Avg precip</th></tr></thead>
        <tbody>
          {% for m in months %}
          <tr>
            <td><a href="{{ base }}/climate/{{ city.slug }}/{{ m.slug }}">{{ m.name }}</a></td>
            <td class="t-cell t-{{ temp_class(m.high_f) }}">{{ m.high }}</td>
            <td class="t-cell t-{{ temp_class(m.low_f) }}">{{ m.low }}</td>
            <td>{{ m.precip }}</td>
          </tr>
          {% endfor %}
        </tbody>
      </table>
    </div>

    <div class="range-strip" aria-hidden="true">
      {% for m in months %}
      <div class="range-row">
        <span class="range-month">{{ m.name[:3] }}</span>
        <span class="range-track">
          {% if m.bar %}<span class="range-fill" style="left:{{ m.bar.left }}%;width:{{ m.bar.width }}%;--c1:var(--{{ m.bar.c1 }});--c2:var(--{{ m.bar.c2 }})"></span>{% endif %}
        </span>
        {% if m.range_lo_f is not none and m.range_hi_f is not none %}
        <span class="range-vals">{{ temp_bare(m.range_lo_f) }}–{{ temp_bare(m.range_hi_f) }}</span>
        {% else %}<span class="range-vals">—</span>{% endif %}
      </div>
      {% endfor %}
    </div>
    <p class="range-note muted">Each bar spans the 10th-percentile daily low to the 90th-percentile daily
       high (the range most days fall within), coloured cold&nbsp;→&nbsp;hot on a shared
       {{ temp(-10) }} to {{ temp(115) }} scale, so the whole year's rhythm reads at a glance.</p>
  </section>

  <section class="city-travel">
    <h2>Thinking of visiting {{ name }}?</h2>
    <p>Trips live and die by the weather. See how {{ name }}'s comfort stacks up against where
       you live. {{ name }} is pre-loaded, just add your city.</p>
    <p><a class="cta" href="{{ compare_url }}">Compare {{ name }}'s comfort with your city →</a></p>
  </section>

  {% if records.tmax or records.tmin %}
  <section class="climate-records">
    <h2>Record extremes</h2>
    <ul>
      {% if records.tmax %}<li><b>Hottest day on record:</b> {{ temp(records.tmax.max) }} on {{ records.tmax.max_date }}</li>{% endif %}
      {% if records.tmin %}<li><b>Coldest day on record:</b> {{ temp(records.tmin.min) }} on {{ records.tmin.min_date }}</li>{% endif %}
    </ul>
    <p><a href="{{ base }}/climate/{{ city.slug }}/records">All {{ name }} weather records →</a></p>
  </section>
  {% endif %}

  <p class="climate-foot muted">Percentiles compare each day to {{ display }}'s own history, so grades are
     relative to this location: a “Near Record” day here isn't the same temperature as elsewhere.
     <a href="{{ asset_base }}/legend">How the grades work →</a></p>
</article>
{% endblock %}