{% extends "base.html.j2" %}
{% block title %}{{ page_title }}{% endblock %}
{% block description %}{{ page_description }}{% endblock %}
{% block canonical_path %}{{ canonical_path }}{% 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">All-time record highs and lows for {{ display }}, and the dates they occurred, across
     {{ year_range[0] }}–{{ year_range[1] }} of daily climate history.</p>

  <div class="table-wrap">
    <table class="normals-table">
      <thead><tr><th>Metric</th><th>Record high</th><th>On</th><th>Record low</th><th>On</th></tr></thead>
      <tbody>
        {% for r in rows %}
        <tr>
          <td>{{ r.label }}</td>
          <td>{{ r.high }}</td><td>{{ r.high_date }}</td>
          <td>{{ r.low }}</td><td>{{ r.low_date }}</td>
        </tr>
        {% endfor %}
      </tbody>
    </table>
  </div>

  <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 %}