{% extends "base.html" %}
{% block title %}Badges · {{ app_name }}{% endblock %}
{% block body %}
<h1>🏅 Badges</h1>
<p class="hint">{{ pup|length }} earned by you, {{ item_count }} by your kit, of
  {{ rules|length }} in the catalogue.</p>

<section class="card">
  <h3>Yours</h3>
  <div class="chips trophies">
    {% for b in pup %}
    <span class="chip trophy" title="{{ b.detail }}">
      {{ b.icon }} <b>{{ b.title }}</b>
      <small>{{ b.detail }}{% if b.detail and b.awarded_at %} · {% endif %}{{ b.awarded_at|local('%Y-%m-%d') }}</small>
    </span>
    {% else %}<p class="hint">None yet. They arrive on their own — nothing here has to be claimed.</p>{% endfor %}
  </div>
</section>

{% if by_item %}
<section class="card">
  <h3>Your kit's</h3>
  {% for row in by_item %}
  <div class="trophyrow">
    <a href="/kit/item/{{ row.item.id }}"><b>{{ row.item.cat_icon }} {{ row.item.name }}</b></a>
    <div class="chips trophies">
      {% for b in row.badges %}
      <span class="chip trophy" title="{{ b.detail }}">{{ b.icon }} {{ b.title }}
        <small>{{ b.detail }}</small></span>
      {% endfor %}
    </div>
  </div>
  {% endfor %}
</section>
{% endif %}

<section class="card">
  <h3>The catalogue</h3>
  <p class="hint">Nothing here is claimed or bought. A rule is checked every few minutes and
    awards itself when it is true — and a <b>monthly</b> badge is only ever decided after its
    month has ended, because a superlative about a period that is still running is a claim
    about however much of it has happened so far.</p>
  <div class="tblwrap">
  <table class="tbl">
    <tr><th></th><th>badge</th><th>worn by</th><th>what it takes</th><th></th></tr>
    {% for r in rules %}
    <tr class="{{ '' if r.slug in held else 'off' }}">
      <td>{{ r.icon }}</td>
      <td><b>{{ r.title }}</b>{% if r.period %} <span class="badge">monthly</span>{% endif %}</td>
      <td class="hint">{{ 'you' if r.subject == 'pup' else 'a piece of kit' }}</td>
      <td class="hint">{{ r.blurb }}</td>
      <td>{% if r.slug in held %}<span class="badge ok">{{ held[r.slug] }}×</span>{% endif %}</td>
    </tr>
    {% endfor %}
  </table>
  </div>
</section>
{% endblock %}