{% extends "layout/basic.html" %}
{% block content %}
<div class="row">
  <div class="medium-12 columns">
    <div class="section">
      <div class="section__header">
        <h1 class="section__title">{{ _('My Stats') }}</h1>
      </div>

      <div class="section__body">
        <div class="fork-level">
          <div class="fork-level__badge">
            <span class="fork-level__badge-label">{{ _('Level') }}</span><span class="fork-level__badge-num">{{ level }}</span>
          </div>
          <div class="fork-level__body">
            <div class="fork-row fork-row--between fork-muted">
              <span>{{ _('Level {0}').format(level) }} · {{ xp }} XP</span>
              <span>{{ _('{0} XP to next level').format(xpToNext) }}</span>
            </div>
            <div class="fork-bar"><div class="fork-bar__fill" style="width:{{ levelProgressPct }}%;"></div></div>
          </div>
        </div>
      </div>

      <div class="section__body">
        <div class="fork-callout">
          🗓️ <b>{{ _('This week') }}:</b>
          {{ _('{0} submissions').format(weekSummary.subs) }} ·
          {{ _('{0} solved').format(weekSummary.solved) }} ·
          {{ _('{0}-day streak').format(streak) }}
          {% if weeklyChallenge %} · {{ _('weekly challenge') }} {{ weeklyChallenge.progress }}/{{ weeklyChallenge.target }}{% endif %}
        </div>
      </div>

      {% if dailyProblem %}
      <div class="section__body">
        <div class="fork-callout">🎯 {{ _('Challenge of the day') }}: <a href="{{ url('problem_detail', pid=dailyProblem.pid) }}"><b>{{ dailyProblem.pid }} — {{ dailyProblem.title }}</b></a></div>
      </div>
      {% endif %}
      {% if weeklyChallenge %}
      <div class="section__body">
        <div class="fork-callout{% if weeklyChallenge.done %} fork-callout--success{% endif %}">
          📅 {{ _('Challenge of the week') }}: {{ _('solve {0} problems tagged «{1}»').format(weeklyChallenge.target, weeklyChallenge.category) }}
          — <b>{{ weeklyChallenge.progress }}/{{ weeklyChallenge.target }}</b>
          {% if weeklyChallenge.done %} ✅ {{ _('Completed!') }}{% endif %}
          <div class="fork-bar"><div class="fork-bar__fill{% if weeklyChallenge.done %} fork-bar__fill--ok{% endif %}" style="width:{{ (100 * weeklyChallenge.progress / weeklyChallenge.target) | round }}%;"></div></div>
        </div>
      </div>
      {% endif %}

      <div class="section__body">
        <div class="fork-cards">
          {% set cards = [
            [_('Solved problems'), solvedCount, 'var(--uca-primary)'],
            [_('Current streak'), streak ~ ' ' ~ _('days'), 'var(--uca-secondary)'],
            [_('Best streak'), maxStreak ~ ' ' ~ _('days'), 'var(--uca-gray)'],
            [_('Total submissions'), total, 'var(--uca-primary)'],
            [_('Acceptance'), acceptedPct ~ '%', 'var(--uca-ok)'],
            [_('Badges'), badgeCount ~ '/' ~ badges.length, 'var(--uca-secondary)']
          ] %}
          {%- for c in cards -%}
          <div class="fork-card">
            <div class="fork-card__value" style="color:{{ c[2] }};">{{ c[1] }}</div>
            <div class="fork-card__label">{{ c[0] }}</div>
          </div>
          {%- endfor -%}
        </div>
      </div>
    </div>

    {% if classPercentile != null %}
    <div class="section">
      <div class="section__body fork-center">
        <p>{{ _('You have solved more problems than {0}% of the class').format(classPercentile) }}</p>
        <div class="fork-bar"><div class="fork-bar__fill" style="width:{{ classPercentile }}%;"></div></div>
      </div>
    </div>
    {% endif %}

    <div class="section">
      <div class="section__header">
        <h1 class="section__title">{{ _('Achievements') }}</h1>
      </div>
      <div class="section__body">
        <div class="fork-cards fork-cards--grid">
          {%- for b in badges -%}
          <div class="fork-card fork-badge-card{% if not b.got %} fork-badge-card--locked{% endif %}" title="{{ b.desc }}">
            <div class="fork-badge-card__icon">{{ b.icon }}</div>
            <div>
              <div class="fork-badge-card__name">{{ b.name }}</div>
              <div class="fork-badge-card__desc">{{ b.desc }}</div>
              {% if not b.got and b.progress %}<div class="fork-badge-card__progress">{{ b.progress }}</div>{% endif %}
            </div>
          </div>
          {%- endfor -%}
        </div>
      </div>
    </div>

    {% if categories.length %}
    <div class="section">
      <div class="section__header">
        <h1 class="section__title">{{ _('Solved by category') }}</h1>
      </div>
      <div class="section__body">
        {%- for c in categories -%}
        <div class="fork-meter">
          <div class="fork-meter__head">
            <span>{{ c.name }}</span><span class="fork-muted">{{ c.count }}</span>
          </div>
          <div class="fork-bar"><div class="fork-bar__fill fork-bar__fill--primary" style="width:{{ c.pct }}%;"></div></div>
        </div>
        {%- endfor -%}
      </div>
    </div>
    {% endif %}
  </div>
</div>
{% endblock %}