{{/* Ported from templates/month.html.j2. Extra data (all display values are
     pre-formatted by the handler inside the city's unit scope, as in Python):
     .Breadcrumb; .City (needs .Slug); .Display/.Name/.MonthName string;
     .YearRange [2]int; .AvgHigh/.AvgLow template.HTML (temp spans);
     .AvgHighCls/.AvgLowCls string (temp_class names);
     .Stats []{Label string; Value template.HTML};
     .Records []{Label, HighTag, LowTag string; High, Low template.HTML;
                 HighDate, LowDate string};
     .ToolHref string — the full "{base}/#{lat:.5f},{lon:.5f}" href, built by
     the handler: composed inline (Jinja's {{ base }}/#{{ tool_hash }}) the
     fragment would hit html/template's urlEscaper and %-escape the comma;
     .CompareURL string; .Prev/.Next {Slug, Name string}. */}}{{template "base_head_start" .}}{{template "base_head_end" .}}{{template "base_body_start" .}}{{template "breadcrumb" .}}
<article class="climate-page">
  <h1>Weather in {{.Display}} in {{.MonthName}}</h1>
  <p class="lede">In an average {{.MonthName}}, {{.Name}} sees a daily high around
     <b class="t-inline t-{{.AvgHighCls}}">{{.AvgHigh}}</b> and a low around
     <b class="t-inline t-{{.AvgLowCls}}">{{.AvgLow}}</b>, based on
     {{index .YearRange 0}}–{{index .YearRange 1}} of local climate records.</p>

  <table class="normals-table" style="max-width:520px">
    <tbody>
{{range .Stats}}      <tr><th style="width:55%">{{.Label}}</th><td>{{.Value}}</td></tr>
{{end}}    </tbody>
  </table>

{{if .Records}}  <h2>{{.MonthName}} records</h2>
  <p class="muted">The most extreme {{.MonthName}} on record for each metric, across
     {{index .YearRange 0}}–{{index .YearRange 1}}. For rainfall, the wettest and driest are by
     total {{.MonthName}} accumulation.</p>
  <div class="records-grid">
{{range .Records}}    <div class="record-card">
      <h3 class="rc-metric">{{.Label}}</h3>
      <div class="rc-row rc-high">
        <span class="rc-tag">{{.HighTag}}</span>
        <span class="rc-val">{{.High}}</span>
        <span class="rc-date">{{.HighDate}}</span>
      </div>
      <div class="rc-row rc-low">
        <span class="rc-tag">{{.LowTag}}</span>
        <span class="rc-val">{{.Low}}</span>
        <span class="rc-date">{{.LowDate}}</span>
      </div>
    </div>
{{end}}  </div>
{{end}}
  <p><a class="cta" href="{{.ToolHref}}">See {{.Name}}'s live weather grade →</a></p>

  <div class="travel-note">
    <p>Visiting <b>{{.Name}}</b> in {{.MonthName}}? See how its comfort stacks up against
       where you live.</p>
    <a class="cta" href="{{.CompareURL}}">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>
{{template "base_body_end" .}}{{template "base_scripts_default" .}}{{template "base_tail" .}}