{# il2ks-template: templates/il2ks/achievements/_medal.html v1 - copy this line along when you override #}
{% load i18n il2ks %}{% comment %}
  _medal.html: one medal (FR-WEB-26): a round badge with the achievement's icon, tinted by tier (bronze, silver, gold,
  platinum: CSS classes medal--bronze ...), its name and the tier line. Rarer tiers get a ring or a glow (rarity--rare,
  rarity--epic, doc 17). Context: m (web.medals.Medal), optional href (link of the whole medal). The Pico tooltip
  (`data-tooltip`: hover and focus, so it works by keyboard and tap) says what it measures and how rare the tier is; the
  same text is read out to screen readers in the visually hidden span (a tooltip alone is not announced).
{% endcomment %}<{% if href %}a href="{{ href }}"{% else %}span tabindex="0"{% endif %} class="medal medal--{{ m.slug }}{% if m.rarity.level %} rarity--{{ m.rarity.level }}{% endif %}" data-tooltip="{{ m.hint }}">
  <span class="medal__badge">{% icon m.icon %}</span>
  <span class="medal__text"><span class="medal__name">{{ m.name }}</span><span class="medal__tier">{{ m.tier_name }} · {{ m.threshold }}</span></span>
  <span class="visually-hidden">{{ m.hint }}</span>
</{% if href %}a{% else %}span{% endif %}>