{% extends "dex/base.html" %}
{% load i18n dex_extras %}

{% block title %}{% trans "Abzeichen" %} — Vogelalbum{% endblock %}

{% block kopf %}
<style>
  /* ⚠ Eigene Klassen statt der xp-track vom Kopfbereich: Die ist dort
     breit und hoch, hier soll der Balken in eine Abzeichenkarte passen
     ohne sie auseinanderzuziehen. */
  .fortschritt {
    margin-top: 8px;
    height: 6px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--text) 12%, transparent);
    overflow: hidden;
  }
  .fortschritt-fuellung {
    height: 100%;
    border-radius: 999px;
    background: var(--accent);
    /* Auch bei 0 % ein Hauch sichtbar -- sonst sieht die Karte aus,
       als fehlte der Balken. */
    min-width: 3px;
  }
  .fortschritt-text {
    margin-top: 4px;
    font-variant-numeric: tabular-nums;
  }
  /* Die Karte ist abgeblendet, solange das Abzeichen fehlt. Der Balken
     soll trotzdem lesbar bleiben -- er ist ja der Grund hinzuschauen. */
  .badge.locked .fortschritt-fuellung { opacity: .85; }
</style>

{% endblock %}

{% block content %}

<h2>{% trans "Abzeichen" %} <span class="count">{% blocktrans with n=progress.badges %}{{ n }} verdient{% endblocktrans %}</span></h2>

<div class="badges">
  {% for row in rows %}
  <div class="badge {% if not row.earned %}locked{% endif %}">
    {% abzeichen_bild row.badge.code as pin %}
    {% if pin %}
      <img class="em" src="{{ pin }}" alt="" width="72" height="72" loading="lazy">
    {% else %}
      <div class="em">{{ row.badge.emoji }}</div>
    {% endif %}
    <div>
      <div class="n">{{ row.badge.name_lokal }}</div>
      <div class="d">{{ row.badge.description_lokal }}</div>
      <div class="d" style="margin-top:6px; color:var(--accent-dim); font-weight:700">
        {% if row.earned %}{{ row.at|date:"SHORT_DATE_FORMAT" }} · +{{ row.badge.xp }} XP{% else %}+{{ row.badge.xp }} XP{% endif %}
      </div>

      {% comment %}
        🔑 Balken nur, wo es etwas zu zaehlen gibt. Bei "Ein Specht war da"
        stuende er dauerhaft auf null und waere keine Information.
        ⚠️ {# … #} ist in Django EINZEILIG — mehrzeilig braucht es comment,
        sonst steht der Text sichtbar auf der Seite.
      {% endcomment %}
      {% if row.ziel %}
      <div class="fortschritt" title="{{ row.ist }} von {{ row.ziel }}">
        <div class="fortschritt-fuellung" style="width: {{ row.anteil }}%"></div>
      </div>
      <div class="d fortschritt-text">{{ row.ist }} / {{ row.ziel }}</div>
      {% endif %}
    </div>
  </div>
  {% endfor %}
</div>

{% endblock %}