{% 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>City climates</h1>
  <p class="lede">Average temperatures by month, all-time records, and how today compares — for
     {{ n_cities }} cities across {{ n_countries }} countries. Every day is graded against that
     location's own ~45 years of climate history.</p>
  {% for country, cs in groups.items() %}
  <section class="hub-country">
    <h2>{{ country }}</h2>
    <ul class="city-links">
      {% for c in cs %}<li><a href="{{ base }}/climate/{{ c.slug }}">{{ c.name }}</a></li>{% endfor %}
    </ul>
  </section>
  {% endfor %}
</article>
{% endblock %}