{% extends "base.html" %}
{% block main %}
{% set u = un.headline %}
<section class="band first split">
  <div class="stack">
    <span class="label">Latest release · {{ un.period_name }}</span>
    <div class="big" aria-label="{{ u.sa_rate }} percent">{{ u.sa_rate }}<svg viewBox="0 0 40 40" aria-hidden="true"><circle cx="10" cy="10" r="8" style="fill:var(--red)"/><polygon points="29,2 37,2 11,38 3,38" style="fill:var(--ink)"/><circle cx="30" cy="30" r="8" style="fill:var(--blue)"/></svg></div>
    <p class="lede">Unemployment was {{ u.sa_rate }}% in the {{ un.period_name }}, {% if u.sa_rate > u.sa_rate_year_ago %}up from{% elif u.sa_rate < u.sa_rate_year_ago %}down from{% else %}the same as{% endif %} {{ u.sa_rate_year_ago }}% a year earlier. That's {{ "{:,}".format(u.unemployed) }} people looking for work.</p>
    <span class="small ui">Household Labour Force Survey · Stats NZ · seasonally adjusted</span>
    <a class="cta" href="unemployment/">Who is out of work</a>
  </div>
  <div>
    <div class="chart" id="cHero"></div>
    <div class="key" style="margin-top:12px"><span><i class="line" style="--c:var(--ink)"></i>Unemployment rate, %, seasonally adjusted</span></div>
  </div>
</section>

<section class="band">
  <h2>Latest figures</h2>
  <div class="figs" id="tiles" style="grid-template-columns:repeat(auto-fit,minmax(240px,1fr))">
    {% for t in home.tiles %}
    <div class="fig-b home-tile" style="--c:{{ ['var(--red)','var(--ink)','var(--blue)','var(--yellow)','var(--blue)'][loop.index0] }}">
      <span class="label">{{ t.label }}</span>
      <span class="v">{{ t.value }}</span>
      <span>{{ t.note }}, {{ t.period }}</span>
      <span class="spk-slot" data-i="{{ loop.index0 }}"></span>
      <span class="small ui" style="font-size:13px">{{ t.source }}{% if t.href %} · <a href="{{ t.href }}">Explore</a>{% endif %}</span>
    </div>
    {% endfor %}
  </div>
</section>

<section class="band split">
  <div class="stack"><h2>Coming up</h2><a class="cta" href="releases/">Release calendar</a></div>
  <ul class="cal" data-max="5">
    {% for r in rel.upcoming if r.href %}{% if loop.index <= 8 %}
    <li class="ours" data-date="{{ r.date }}"><span class="d">{{ r.date[8:10]|int }}<small>{{ ["", "Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"][r.date[5:7]|int] }}</small></span>
      <span class="t"><a href="{{ r.href }}">{{ r.title }}</a></span></li>
    {% endif %}{% endfor %}
  </ul>
</section>

<section class="band">
  <h2>Explore by topic</h2>
  {% for t in topics %}
  <div class="split" style="margin-top:40px">
    <div class="stack"><h3><a href="topics/{{ t.slug }}/" style="text-decoration:none">{{ t.name }}</a></h3><p class="small" style="font-size:16px">{{ t.intro }}</p></div>
    <div class="qlist">{% for q in t.questions %}<a class="qrow" href="{{ q.href }}"><span class="qt">{{ q.title }}</span><span class="qf"><b>{{ q.fig }}</b><small>{{ q.note }}</small></span></a>{% endfor %}</div>
  </div>
  {% endfor %}
  <p style="margin-top:40px"><a class="cta" href="data/">All the data, with downloads</a></p>
</section>
{% endblock %}
{% block scripts %}
<script>
(() => {
  const d = BS.pageData();
  const draw = () => {
    const h = d.un.headline.sa_history;
    BS.lines(BS.$('#cHero'), { labels: h.map(x => x[0]), H: 380, fmt: v => v.toFixed(1) + '%',
      series: [{ name: 'Unemployment', data: h.map(x => x[1]), color: 'var(--ink)', w: 4, end: true, dot: 'var(--red)' }] });
  };
  draw(); BS.onResize(draw);
  BS.$$('.spk-slot').forEach(el => { const t = d.home.tiles[+el.dataset.i]; el.innerHTML = BS.spark(t.history.map(x => x[1]), 'var(--ink)'); });
})();
</script>
{% endblock %}