{% extends "layout/basic.html" %}
{% import "components/problem.html" as problem with context %}
{% block content %}
<div class="row" data-sticky-parent>
  {%- if Object.keys(udict).length -%}
  <div class="medium-2 columns mobile--hide">
    <div data-sticky="large"><div class="section side fork-enroll">
      <div class="fork-enroll__header">
        <span class="icon icon-user--multiple"></span>
        {{ _('Enrollees') }} <span class="fork-enroll__count">{{ Object.keys(udict).length }}</span>
      </div>
      <ol class="menu">
        <li class="menu__item nojs--hide">
          <form method="get" id="searchForm">
            <select name="group" class="select"{% if not groups.length %} style="display:none"{% endif %}>
              <option value="all" selected>{{ _('All') }}</option>
              {% for group in groups %}
                <option value="{{ group.uids.join(',') }}">{{ group.name }}</option>
              {% endfor %}
            </select>
            <input name="uid" type="text" class="search__input textbox" placeholder="{{ _('Select User') }}">
          </form>
        </li>
        <ul class="enroll_user_menu">
        {%- for uid, udoc in udict -%}
        <li class="menu__item enroll_user_menu_item" data-uid="{{ uid }}" data-uname="{{ udoc.uname }}" {% if handler.user.hasPerm(perm.PERM_VIEW_USER_PRIVATE_INFO) and udoc.displayName %}data-displayname="{{ udoc.displayName }}"{% endif %}>
          <a href="./{{ tdoc._id }}?uid={{ uid }}" class="menu__link{% if (handler.request.query.uid or handler.user._id) == uid %} active{% endif %}">
            <span class="user-profile-link">
              <img class="small user-profile-avatar v-center" loading="lazy" src="{{ avatarUrl(udoc.avatar|default('')) }}" width="20" height="20">
              <span class="user-profile-name">
                {% if handler.user.hasPerm(perm.PERM_VIEW_USER_PRIVATE_INFO) and udoc.displayName and udoc.displayName != udoc.uname %}
                  {{ udoc.displayName }} ({{ udoc.uname }})
                {% else %}
                  {{ udoc.uname }}
                {% endif %}
              </span>
            </span>
          </a>
        </li>
        {%- endfor -%}
        </ul>
      </ol>
    </div></div>
  </div>
  <div class="medium-7 columns">
  {%- else -%}
  <div class="medium-9 columns">
  {%- endif -%}
    <div class="section">
      <div class="section__body typo">
        {{ tdoc['content'] }}
      </div>
      <div class="section__body typo richmedia">
        {% if not handler.user.hasPriv(PRIV.PRIV_USER_PROFILE) %}
          <blockquote class="typo note">
            <p>{{ _('Login to join training plan') }}</p>
          </blockquote>
        {% elif not tsdoc.enroll %}
          <blockquote class="typo note">
            <p>{{ _('page.training_detail.invalid_when_not_enrolled') }}</p>
          </blockquote>
        {% endif %}
        {% if missing.length %}
          <blockquote class="warn">
            <p>{{ _('Some problems in the training are missing or you do not have permission to view them.') }}</p>
            <p>{{ missing|join(', ') }}</p>
          </blockquote>
        {% endif %}
        {{ tdoc.description|default('')|markdown|safe }}
      </div>
    </div>
    {% if teacherStats %}
    <details class="section fork-teacher-panel" open>
      <summary class="section__header fork-teacher-panel__summary">
        <h1 class="section__title"><span class="icon icon-statistics"></span> {{ _('Teacher stats') }}</h1>
        <span class="fork-teacher-panel__hint">{{ _('{0} students').format(teacherStats.totalStudents) }}</span>
      </summary>
      <div class="section__body">
        <form method="get" class="fork-teacher-panel__filter">
          <label class="inline">{{ _('Group') }}
            <select name="group" class="inline compact select" onchange="this.form.submit()">
              <option value="">{{ _('Global') }}</option>
              {%- for g in groups -%}<option value="{{ g.name }}"{% if g.name == teacherStats.group %} selected{% endif %}>{{ g.name }}</option>{%- endfor -%}
            </select>
          </label>
          <noscript><button type="submit" class="rounded compact button">{{ _('Filter') }}</button></noscript>
        </form>
        <table class="data-table fork-teacher-panel__table">
          <thead>
            <tr>
              <th class="col--name">{{ _('Problem') }}</th>
              <th class="col--tp-tried">{{ _('Students who tried') }}</th>
              <th class="col--tp-ac">{{ _('Solved (AC)') }}</th>
              <th class="col--tp-rate">{{ _('AC rate') }}</th>
            </tr>
          </thead>
          <tbody>
            {%- for pid in pids -%}
              {% if pid in pdict and pdict[pid].docId %}
                {% set st = teacherStats.perPid[pid] %}
                <tr>
                  <td class="col--name">{{ problem.render_problem_title(pdict[pid], show_tags=false) }}</td>
                  <td class="col--tp-tried">{{ st.tried }} / {{ teacherStats.totalStudents }}</td>
                  <td class="col--tp-ac">{{ st.ac }} / {{ teacherStats.totalStudents }}</td>
                  <td class="col--tp-rate">
                    <div class="fork-bar"><div class="fork-bar__fill fork-bar__fill--ok" style="width:{{ st.pct }}%;"></div></div>
                    <span class="fork-teacher-panel__pct">{{ st.pct }}%</span>
                  </td>
                </tr>
              {% endif %}
            {%- endfor -%}
          </tbody>
        </table>
      </div>
    </details>
    {% endif %}
    <div class="section">
      {% include "partials/training_detail.html" %}
    </div>
  </div>
  <div class="medium-3 columns" data-sticky="large">
    <div class="section side">
      <div>
        <ol class="menu">
        {% if not tsdoc['enroll'] and handler.user.hasPriv(PRIV.PRIV_USER_PROFILE) %}
          <li class="menu__item">
            <form action="" method="POST">
              <input type="hidden" name="operation" value="enroll">
              <button class="menu__link" type="submit">
                <span class="icon icon-add"></span> {{ _('Enroll Training') }}
              </button>
            </form>
          </li>
        {% endif %}
        {% if handler.user.own(tdoc) or handler.user.hasPerm(perm.PERM_EDIT_TRAINING) %}
          <li class="menu__item"><a class="menu__link" href="{{ url('training_edit', tid=tdoc.docId) }}">
            <span class="icon icon-edit"></span>  {{ _('Edit') }}
          </a></li>
          <li class="menu__item"><a class="menu__link" href="{{ url('training_files', tid=tdoc.docId) }}">
            <span class="icon icon-file"></span> {{ _('Files') }}
          </a></li>
        {% endif %}
        {% if handler.user.hasPerm(perm.PERM_EDIT_DOMAIN) %}
          <li class="menu__item"><a class="menu__link" href="{{ url('training_export', tid=tdoc.docId) }}">
            <span class="icon icon-download"></span> {{ _('Export submissions (CSV)') }}
          </a></li>
          <li class="menu__item"><a class="menu__link" href="{{ url('training_report', tid=tdoc.docId) }}">
            <span class="icon icon-statistics"></span> {{ _('Training report') }}
          </a></li>
          <li class="menu__item"><a class="menu__link" href="{{ url('stats') }}">
            <span class="icon icon-sliders"></span> {{ _('Teacher panel') }}
          </a></li>
          <li class="menu__item"><a class="menu__link" href="{{ url('stats_matrix', query={tid:tdoc.docId}) }}">
            <span class="icon icon-table"></span> {{ _('Submission matrix') }}
          </a></li>
        {% endif %}
          <li class="menu__item"><a class="menu__link" href="{{ url('wiki_help', anchor='training') }}">
            <span class="icon icon-help"></span> {{ _('Help') }}
          </a></li>
          <li class="menu__seperator"></li>
        </ol>
      </div>
      <div class="section__body typo">
        <dl class="large horizontal">
        {% if handler.user.hasPriv(PRIV.PRIV_USER_PROFILE) %}
          <dt>{{ _('Status') }}</dt><dd>{% if tsdoc['enroll'] %}{{ _('Completed' if tsdoc['done'] else 'In Progress') }}{% else %}{{ _('Not Enrolled') }}{% endif %}</dd>
        {% endif %}
          {% if tsdoc['enroll'] %}
          <dt>{{ _('Progress') }}</dt><dd>{{ _('Completed') }} {{ (100 * tsdoc['donePids']|length / pids|length)|round|int }}%</dd>
          {% endif %}
          <dt>{{ _('Enrollees') }}</dt><dd>{{ tdoc.attend|default(0) }}</dd>
          <dt>{{ _('Created By') }}</dt>
          <dd>{{ user.render_inline(udoc, badge=false) }}</dd>
        </dl>
      </div>
    </div>
    <div class="section side">
      <ol class="menu">
        {{ sidemenu.render_item('list', 'training_detail', {tid:tdoc._id}, label='tasks_list', menu_item='training_detail') }}
      </ol>
    </div>
  </div>
</div>
{% endblock %}