{% extends "base.html" %}
{% from "partials/macros.html" import avatar, badge_chip %}
{% block title %}Highscoreboard · Putzliga{% endblock %}
{% block page_title %}Highscoreboard{% endblock %}
{% block content %}
  <section class="hero-grid">
    <article class="hero-card">
      <p class="eyebrow">Aktueller Monat</p>
      <h2>{{ current_label }}</h2>
      <p>Aufgabenpunkte und Badge-Boni zählen nur im aktuellen Monat. Zum Monatswechsel landet alles im Archiv und die Liga startet wieder bei null.</p>
    </article>
    <article class="panel highlight-panel">
      <p class="eyebrow">Archiv</p>
      <form method="get" class="inline-form">
        <select name="archive">
          {% for year, month in archive_options %}
            {% set archive_value = year ~ '-' ~ '%02d'|format(month) %}
            <option value="{{ archive_value }}" {% if selected_archive == archive_value %}selected{% endif %}>{{ month|month_name }} {{ year }}</option>
          {% endfor %}
        </select>
        <button type="submit" class="button button--secondary">Anzeigen</button>
      </form>
    </article>
  </section>

  <section class="scoreboard">
    {% for row in current_rows %}
      <article class="score-row {% if row.rank == 1 %}score-row--leader{% endif %}">
        <div class="score-row__head">
          <div class="score-row__person">
            <span class="rank-badge">#{{ row.rank }}</span>
            {{ avatar(row.user) }}
            <div>
              <strong>{{ row.user.name }}</strong>
              <p>{{ row.completed_tasks_count }} erledigte Aufgaben</p>
            </div>
          </div>
          <div class="score-row__points">
            <strong>{{ row.total_points }}</strong>
            <span>Punkte</span>
          </div>
        </div>
        <div class="score-bar">
          <span style="width: {{ 0 if max_points == 0 else (row.total_points / max_points * 100) }}%"></span>
        </div>
        <div class="score-row__meta">
          <span>Basis: {{ row.base_points }}</span>
          <span>Badges: +{{ row.bonus_points }}</span>
        </div>
        {% if row.badges %}
          <div class="badge-cloud">
            {% for badge in row.badges %}
              {{ badge_chip(badge) }}
            {% endfor %}
          </div>
        {% endif %}
        {% if row.user.awarded_badges %}
          <div class="badge-cloud">
            {% for badge in row.user.awarded_badges[:3] %}
              {{ badge_chip(badge) }}
            {% endfor %}
          </div>
        {% endif %}
      </article>
    {% else %}
      <div class="empty-state">Noch keine Punkte in diesem Monat.</div>
    {% endfor %}
  </section>

  <section class="panel">
    <p class="eyebrow">Monatsarchiv</p>
    <h2>{{ archive_label or 'Noch kein Archiv' }}</h2>
    <div class="archive-list">
      {% for row in archived_rows %}
        <article class="archive-row">
          <div class="archive-row__left">
            <span class="rank-badge">#{{ row.rank }}</span>
            {{ avatar(row.user) }}
            <strong>{{ row.user.name }}</strong>
          </div>
          <div class="archive-row__right">
            <span>{{ row.total_points }} Punkte</span>
            <small>{{ row.completed_tasks_count }} Aufgaben</small>
          </div>
        </article>
      {% else %}
        <div class="empty-state">Sobald ein Monat archiviert wurde, taucht er hier auf.</div>
      {% endfor %}
    </div>
  </section>
{% endblock %}