{% extends "base.html" %}
{% block title %}Badges · {{ app_name }}{% endblock %}

{#- One badge as a card. The card is a button that opens the shared <dialog>; what the
    dialog shows is rendered HERE, server-side, into a <template> — so it is escaped by
    Jinja like the rest of the page and JS only ever moves nodes, never builds markup.
    `b` is an award row (or None for a catalogue entry), `r` the rule (or None for a badge
    whose module has been unloaded — it still has to draw). -#}
{% macro bcard(key, slug, b, r, rar, off=false, count=0, worn='') -%}
{% set img = art.get(slug) %}
{% set title = (b.title if b and b.title else (r.title if r else slug)) %}
<button type="button" class="bcard rarb-{{ rar }}{{ ' off' if off }}" data-bd="bd-{{ key }}"
        aria-label="{{ title }} — details">
  <span class="bcard-art">{% if img %}<img src="{{ img }}" alt="" loading="lazy">{% else %}<span class="bcard-emoji">{{ (b.icon if b and b.icon else (r.icon if r else '🏅')) }}</span>{% endif %}</span>
  <span class="bcard-title">{{ title }}</span>
  {% if b %}<span class="bcard-sub">{{ b.detail or (b.awarded_at|local('%Y-%m-%d')) }}</span>
  {% elif count %}<span class="bcard-sub">earned {{ count }}×</span>
  {% elif off %}<span class="bcard-sub">not yet</span>{% endif %}
</button>
<template id="bd-{{ key }}">
  <div class="bd rarb-{{ rar }}">
    {% if img %}
    <button type="button" class="bd-art" data-zoom aria-label="Zoom the art">
      <img src="{{ img }}" alt="{{ title }}"></button>
    <p class="hint bd-tip">Tap the art to zoom.</p>
    {% else %}
    <div class="bd-art bd-emoji">{{ (b.icon if b and b.icon else (r.icon if r else '🏅')) }}</div>
    {% endif %}
    <h2 class="bd-title">{{ title }}</h2>
    <p class="bd-tags">
      <b class="rar rar-{{ rar }}">◆ {{ rar }}</b>
      {% if r and r.period == 'month' %}<span class="badge">monthly</span>{% elif r and r.period %}<span class="badge">event</span>{% endif %}
      {% if worn %}<span class="badge">{{ worn }}</span>{% endif %}
      {% if r and r.xp %}<span class="badge">{{ r.xp }} xp</span>{% endif %}
    </p>
    {% if b and b.detail %}<p class="bd-detail">{{ b.detail }}</p>{% endif %}
    {% if r and r.blurb %}<h4>What it takes</h4><p class="hint">{{ r.blurb }}</p>{% endif %}
    <dl class="bd-facts">
      {% if b %}<dt>Awarded</dt><dd>{{ b.awarded_at|local('%Y-%m-%d %H:%M') }}</dd>{% endif %}
      {% if count %}<dt>Earned</dt><dd>{{ count }}×</dd>{% elif off %}<dt>Earned</dt><dd>not yet</dd>{% endif %}
      {% if r and r.module %}<dt>From</dt><dd>{{ r.module }}</dd>{% endif %}
    </dl>
  </div>
</template>
{%- endmacro %}

{% block body %}
<h1>🏅 Badges</h1>
<p class="hint">{{ pup|length }} earned by you, {{ item_count }} by your kit, of
  {{ rules|length }} in the catalogue. Tap one for the whole story.</p>

<section class="card">
  <h3>Yours</h3>
  <div class="bgrid">
    {% for b in pup %}
    {{ bcard('p' ~ b.id, b.slug, b, rule_by.get(b.slug), b.rarity, worn='you') }}
    {% 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="bgrid">
      {% for b in row.badges %}
      {{ bcard('k' ~ b.id, b.slug, b, rule_by.get(b.slug), b.rarity, worn=row.item.name) }}
      {% 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="bgrid">
    {% for r in rules %}
    {{ bcard('c' ~ loop.index, r.slug, None, r, rarity[r.slug], off=(r.slug not in held),
             count=held.get(r.slug, 0), worn=('you' if r.subject == 'pup' else 'a piece of kit')) }}
    {% endfor %}
  </div>
</section>

<dialog class="bdialog" id="bdialog" aria-label="Badge details">
  <button type="button" class="bd-close" data-close aria-label="Close">✕</button>
  <div class="bd-slot"></div>
</dialog>
{% endblock %}