{% extends "layout/basic.html" %}
{% block content %}
<div class="row">
  <div class="large-9 columns">
    <div class="section">
      <div class="section__header">
        <h1 class="section__title">{{ _('All Training Plans') }}</h1>
        <div class="section__tools">
          <form method="get" class="filter-form" name="filter-form">
            <input type="text" class="inline compact textbox" name="q" value="{{ q }}" placeholder="{{ _('Search training...') }}">
            <button type="submit" class="compact button">
              {{ _('Search') }}
            </button>
          </form>
        </div>
      </div>
      {% if not tdocs.length %}
        {{ nothing.render('Sorry, there are no training plans.') }}
      {% else %}
        <div class="section__body no-padding">
          <ol class="section__list training__list">
            {%- for tdoc in tdocs -%}
              {% set pcount = model.training.getPids(tdoc.dag)|length %}
              <li class="section__list__item training__item">
                <div class="media">
                  <div class="media__body medium">
                    <h1 class="training__title"><a href="{{ url('training_detail', tid=tdoc.docId) }}" data-emoji-enabled>{{ tdoc.title }}</a></h1>
                    <ul class="supplementary list">
                      <li><span class="icon icon-flag"></span> {{ _('{0} sections').format(tdoc['dag']|length) }}, {{ _('{0} problems').format(pcount) }}</li>
                      <li><span class="icon icon-user--multiple"></span> {{ tdoc.attend|default(0) }} {{ _('Enrolled') }}</li>
                      {% if tsdict[tdoc.docId]['enroll'] %}
                        {% set progress = (100 * tsdict[tdoc.docId]['donePids']|length / pcount)|round|int if not tsdict[tdoc.docId]['done'] else 100 %}
                        <li><span class="icon icon-check"></span> {{ _('Completed') }} {{ progress }}%</li>
                      {% elif handler.user.hasPriv(PRIV.PRIV_USER_PROFILE) %}
                        <li><span class="icon training-status--icon outside"></span> {{ _('Not Enrolled') }}</li>
                      {% endif %}
                    </ul>
                    {% if tsdict[tdoc.docId]['enroll'] %}
                      {% set progress = (100 * tsdict[tdoc.docId]['donePids']|length / pcount)|round|int if not tsdict[tdoc.docId]['done'] else 100 %}
                      <div class="fork-bar"><div class="fork-bar__fill{% if progress >= 100 %} fork-bar__fill--ok{% else %} fork-bar__fill--primary{% endif %}" style="width:{{ progress }}%;"></div></div>
                    {% endif %}
                  </div>
                </div>
              </li>
            {%- endfor -%}
          </ol>
        </div>
        {{ paginator.render(page, tpcount, add_qs=qs) }}
      {% endif %}
    </div>
  </div>
  <div class="large-3 columns">
    {% if handler.user.hasPerm(perm.PERM_CREATE_TRAINING) %}
      <div class="section side">
        <div class="section__header">
          <h1 class="section__title">{{ _('Create Training Plan') }}</h1>
        </div>
        <ol class="menu">
          <li class="menu__item">
            <a href="{{ url('training_create') }}" class="menu__link"><span class="icon icon-add"></span> {{ _('New Training Plan') }}</a>
          </li>
        </ol>
        <div class="section__body">
          <div class="typo supplementary">
            <p>{{ _('You can create your own training plans and share them with others.') }}</p>
          </div>
        </div>
      </div>
    {% endif %}
    {% if handler.user.hasPriv(PRIV.PRIV_USER_PROFILE) %}
      <div class="section side">
        <div class="section__header">
          <h1 class="section__title">{{ _('Enrolled') }}</h1>
        </div>
        <div class="section__body">
          <ol class="my secondary training__list">
            {%- for tid, tsdoc in tsdict -%}
              {% if tsdoc['enroll'] %}
                {% set progress = (100 * (tsdoc['donePids']|length) / (model.training.getPids(tdict[tsdoc['docId']].dag)|length))|round|int %}
                <li class="training__item"><div class="media">
                  <div class="media__left">
                    <span class="icon training-status--icon {% if tsdoc['done'] %}done{% else %}progress{% endif %}"></span>
                  </div>
                  <div class="media__body">
                    <h1 class="training__title"><a href="{{ url('training_detail', tid=tsdoc.docId) }}" data-emoji-enabled>{{ tdict[tsdoc['docId']]['title'] }}</a></h1>
                    <div class="supplementary training__progress"><div class="training__progress-bar"><div class="training__progress-track" style="width:{{ progress }}%;"></div></div> {{ _('Complete') }} {{ progress }}%</div>
                  </div>
                </div></li>
              {% endif %}
            {%- endfor -%}
          </ol>
        </div>
      </div>
    {% endif %}
  </div>
</div>
{% endblock %}