{% 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">{{ _('Training report') }}: {{ tdoc.title }}</h1>
        <div class="section__tools">
          <a class="typo-a" href="{{ url('training_detail', tid=tdoc.docId) }}">« {{ tdoc.title }}</a>
          {% if groups.length %}
          <form method="get" class="inline fork-inline-filter">
            <select name="group" class="select inline" onchange="this.form.submit()">
              <option value="">{{ _('All students') }}</option>
              {%- for g in groups -%}<option value="{{ g.name }}"{% if g.name == group %} selected{% endif %}>{{ g.name }}</option>{%- endfor -%}
            </select>
          </form>
          {% endif %}
        </div>
      </div>
      <div class="section__body typo">
        <dl class="large horizontal">
          <dt>{{ _('Problems') }}</dt><dd>{{ totalProblems }}</dd>
          <dt>{{ _('Students') }}</dt><dd>{{ students }}</dd>
          <dt>{{ _('Delivered') }}</dt><dd>{{ deliveredCount }} ({{ deliveredPct }}%)</dd>
          <dt>{{ _('Average grade') }}</dt><dd>{{ avgGrade }}</dd>
        </dl>
      </div>
      <div class="section__body">
        <h2 class="section__title" style="font-size:15px;">{{ _('Grade distribution') }}</h2>
        <div style="display:flex; align-items:flex-end; gap:6px; height:120px;">
          {%- for b in buckets -%}
          <div style="flex:1; text-align:center;">
            <div title="{{ b.count }}" style="background:#005877; height:{{ (b.count / maxBucket * 100)|round }}px; min-height:1px;"></div>
            <small class="supplementary">{{ b.label }}</small><br><small>{{ b.count }}</small>
          </div>
          {%- endfor -%}
        </div>
      </div>
    </div>
    {% if perLevel.length %}
    <div class="section">
      <div class="section__header"><h1 class="section__title">{{ _('By level') }}</h1></div>
      <div class="section__body">
        {%- for lv in perLevel -%}
        <div class="fork-meter">
          <div class="fork-meter__head">
            <span>{{ lv.title }} <span class="supplementary">({{ lv.taskCount }} {{ _('Problems') }})</span></span>
            <b>{{ lv.pct }}%</b>
          </div>
          <div class="fork-bar"><div class="fork-bar__fill fork-bar__fill--primary" style="width:{{ lv.pct }}%;"></div></div>
        </div>
        {%- endfor -%}
      </div>
    </div>
    {% endif %}
    {% if perTask.length %}
    <div class="section">
      <div class="section__header"><h1 class="section__title">{{ _('By task') }}</h1></div>
      <div class="section__body no-padding">
        <table class="data-table">
          <thead>
            <tr>
              <th>{{ _('ID') }}</th>
              <th>{{ _('Problem') }}</th>
              <th>{{ _('Difficulty') }}</th>
              <th>{{ _('Solved by') }}</th>
            </tr>
          </thead>
          <tbody>
            {%- for t in perTask -%}
            <tr>
              <td>{{ t.pid }}</td>
              <td>{{ t.title }}</td>
              <td>{% if t.difficulty %}<span class="fork-difficulty fork-difficulty--{{ 'easy' if t.difficulty <= 3 else ('medium' if t.difficulty <= 6 else 'hard') }}">{{ t.difficulty }}</span>{% endif %}</td>
              <td>
                <div class="fork-row">
                  <span style="min-width:96px;">{{ t.solved }} / {{ students }} ({{ t.pct }}%)</span>
                  <span class="fork-ratio"><span class="fork-ratio__fill{{ ' fork-ratio__fill--low' if t.pct < 34 else (' fork-ratio__fill--mid' if t.pct < 67 else '') }}" style="width:{{ t.pct }}%;"></span></span>
                </div>
              </td>
            </tr>
            {%- endfor -%}
          </tbody>
        </table>
      </div>
    </div>
    {% endif %}
    {% if notDelivered.length %}
    <div class="section">
      <div class="section__header"><h1 class="section__title">{{ _('Has not delivered') }} ({{ notDelivered.length }})</h1></div>
      <div class="section__body typo">
        {% for r in notDelivered %}<a href="{{ url('stats_user', uid=r.uid) }}">{{ r.uname }}</a>{% if not loop.last %}, {% endif %}{% endfor %}
      </div>
    </div>
    {% endif %}
    <div class="section">
      <div class="section__header"><h1 class="section__title">{{ _('Per-student detail') }}</h1></div>
      <div class="section__body no-padding">
        <table class="data-table">
          <thead>
            <tr>
              <th>{{ _('Username') }}</th>
              <th>{{ _('Solved') }}</th>
              <th>{{ _('Grade') }}</th>
              <th>{{ _('Delivered') }}</th>
            </tr>
          </thead>
          <tbody>
            {%- for r in rows -%}
            <tr>
              <td><a href="{{ url('stats_user', uid=r.uid) }}">{{ r.uname }}</a></td>
              <td>{{ r.solved }} / {{ totalProblems }}</td>
              <td>{{ r.grade }}</td>
              <td>{% if r.delivered %}<span class="record-status--text pass">{{ _('Yes') }}</span>{% else %}<span class="record-status--text fail">{{ _('No') }}</span>{% endif %}</td>
            </tr>
            {%- endfor -%}
          </tbody>
        </table>
      </div>
    </div>
  </div>
</div>
{% endblock %}