{% 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>Weather in {{ display }} in {{ month_name }}</h1>
  <p class="lede">In an average {{ month_name }}, {{ name }} sees a daily high around
     <b class="t-inline t-{{ avg_high_cls }}">{{ avg_high }}</b> and a low around
     <b class="t-inline t-{{ avg_low_cls }}">{{ avg_low }}</b>, based on
     {{ year_range[0] }}–{{ year_range[1] }} of local climate records.</p>

  <table class="normals-table" style="max-width:520px">
    <tbody>
      {% for label, value in stats %}
      <tr><th style="width:55%">{{ label }}</th><td>{{ value }}</td></tr>
      {% endfor %}
    </tbody>
  </table>

  {% if records %}
  <h2>{{ month_name }} records</h2>
  <p class="muted">The most extreme {{ month_name }} on record for each metric, across
     {{ year_range[0] }}–{{ year_range[1] }}. For rainfall, the wettest and driest are by
     total {{ month_name }} accumulation.</p>
  <div class="records-grid">
    {% for r in records %}
    <div class="record-card">
      <h3 class="rc-metric">{{ r.label }}</h3>
      <div class="rc-row rc-high">
        <span class="rc-tag">{{ r.high_tag }}</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">{{ r.low_tag }}</span>
        <span class="rc-val">{{ r.low }}</span>
        <span class="rc-date">{{ r.low_date }}</span>
      </div>
    </div>
    {% endfor %}
  </div>
  {% endif %}

  <p><a class="cta" href="{{ base }}/#{{ tool_hash }}">See {{ name }}'s live weather grade →</a></p>

  <div class="travel-note">
    <p>Visiting <b>{{ name }}</b> in {{ month_name }}? See how its comfort stacks up against
       where you live.</p>
    <a class="cta" href="{{ compare_url }}">Compare {{ name }} with your city →</a>
  </div>

  <p class="climate-foot muted">
    <a href="{{ base }}/climate/{{ city.slug }}/{{ prev.slug }}">‹ {{ prev.name }}</a> ·
    <a href="{{ base }}/climate/{{ city.slug }}">{{ name }} climate overview</a> ·
    <a href="{{ base }}/climate/{{ city.slug }}/{{ next.slug }}">{{ next.name }} ›</a>
  </p>
</article>
{% endblock %}