{% 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 }} weather records</h1>
  <p class="lede">Record high and low temperatures for <b>{{ display }}</b> — by month, by season, and
     all-time — with the dates they occurred, across {{ year_range[0] }}–{{ year_range[1] }} of daily
     climate history.{% if all_time.tmax and all_time.tmin %} Its hottest day on record reached
     {{ all_time.tmax.max | round | int }}°F ({{ ((all_time.tmax.max - 32) * 5 / 9) | round | int }}°C)
     on {{ all_time.tmax.max_date }}; its coldest fell to
     {{ all_time.tmin.min | round | int }}°F ({{ ((all_time.tmin.min - 32) * 5 / 9) | round | int }}°C)
     on {{ all_time.tmin.min_date }}.{% endif %}</p>

  <section class="climate-records-section">
    <h2>Records by month</h2>
    <p>The warmest and coldest {{ name }} has ever been in each calendar month. Tap a month for its full
       averages and typical range.</p>
    <div class="table-wrap">
      <table class="normals-table records-table">
        <thead><tr><th>Month</th><th>Record high</th><th>Record low</th></tr></thead>
        <tbody>
          {% for m in monthly %}
          <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 }}<span class="rec-on">{{ m.high_date }}</span></td>
            <td class="t-cell t-{{ temp_class(m.low_f) }}">{{ m.low }}<span class="rec-on">{{ m.low_date }}</span></td>
          </tr>
          {% endfor %}
        </tbody>
      </table>
    </div>
  </section>

  <section class="climate-records-section">
    <h2>Records by season</h2>
    <p>Meteorological seasons for the {{ hemisphere }} Hemisphere — each a three-month span — and the
       most extreme {{ name }} has recorded within each.</p>
    <div class="table-wrap">
      <table class="normals-table records-table">
        <thead><tr><th>Season</th><th>Record high</th><th>Record low</th></tr></thead>
        <tbody>
          {% for s in seasonal %}
          <tr>
            <td>{{ s.name }} <span class="season-span">({{ s.span }})</span></td>
            <td class="t-cell t-{{ temp_class(s.high_f) }}">{{ s.high }}<span class="rec-on">{{ s.high_date }}</span></td>
            <td class="t-cell t-{{ temp_class(s.low_f) }}">{{ s.low }}<span class="rec-on">{{ s.low_date }}</span></td>
          </tr>
          {% endfor %}
        </tbody>
      </table>
    </div>
  </section>

  <section class="climate-records-section">
    <h2>All-time records</h2>
    <p>The most extreme value {{ name }} has recorded for each metric across its entire history.</p>
    <div class="records-grid">
      {% for r in rows %}
      <div class="record-card">
        <h3 class="rc-metric">{{ r.label }}</h3>
        <div class="rc-row rc-high">
          <span class="rc-tag">{% if r.label == 'Precip' %}Wettest{% else %}Highest{% endif %}</span>
          <span class="rc-val">{{ r.high }}</span>
          <span class="rc-date">{{ r.high_date }}</span>
        </div>
        <div class="rc-row rc-low">
          <span class="rc-tag">{% if r.label == 'Precip' %}Driest{% else %}Lowest{% endif %}</span>
          <span class="rc-val">{{ r.low }}</span>
          <span class="rc-date">{{ r.low_date }}</span>
        </div>
      </div>
      {% endfor %}
    </div>
    <p class="records-note muted">For rainfall, the “driest” figure is the <b>longest run of consecutive
       days without measurable rain</b>, dated to when that dry spell began.</p>
  </section>

  <p><a class="cta" href="{{ base }}/#{{ '%.5f,%.5f' | format(city.lat, city.lon) }}">Grade {{ name }}'s weather now →</a></p>
  <p class="climate-foot muted"><a href="{{ base }}/climate/{{ city.slug }}">‹ Back to {{ name }} climate</a></p>
</article>
{% endblock %}