{% 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>
      {% if not tdocs.length %}
        {{ nothing.render('Sorry, there is no training plan.') }}
      {% else %}
        <ol class="section__list all primary training__list">
          {%- for tdoc in tdocs -%}
            <li class="section__list__item training__item">
              <div class="media">
                <div class="media__left middle">
                  <div class="training__participants numbox">
                    <div class="numbox__num large">{{ tdoc.attend|default(0) }}</div>
                    <div class="numbox__text">{{ _('Enrolled') }}</div>
                  </div>
                </div>
                <div class="media__body middle">
                  <h1 class="training__title"><a href="{{ url('training_detail', tid=tdoc.docId) }}" data-emoji-enabled>{{ tdoc.title }}</a></h1>
                  <div class="training__intro typo">
                    <p>{{ tdoc['content'] }}</p>
                  </div>
                  <ul class="supplementary list training__progress">
                    <li>
                      <span class="icon icon-flag text-blue"></span> {{ _('{0} sections').format(tdoc['dag']|length) }}, {{ _('{0} problems').format(model.training.getPids(tdoc.dag)|length) }}
                    </li>
                    <li>
                    {% if tsdict[tdoc.docId]['enroll'] %}
                      {% if not tsdict[tdoc.docId]['done'] %}
                        <span class="icon training-status--icon progress"></span>
                        <span class="training-status--text progress">{{ _('Completed') }} {{ (100 * tsdict[tdoc.docId]['donePids']|length / model.training.getPids(tdoc.dag)|length)|round|int }}%</span>
                      {% else %}
                        <span class="icon training-status--icon done"></span>
                        <span class="training-status--text done">{{ _('Completed') }} 100%</span>
                      {% endif %}
                    {% elif handler.user.hasPriv(PRIV.PRIV_USER_PROFILE) %}
                      <span class="icon training-status--icon outside"></span> <span class="training-status--text outside">{{ _('Not Enrolled') }}</span>
                    {% endif %}
                    </li>
                  </ul>
                </div>
              </div>
            </li>
          {%- endfor -%}
        </ol>
        {{ paginator.render(page, tpcount, add_qs=qs) }}
      {% endif %}
    </div>
  </div>
  <div class="large-3 columns">
    {% 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 tsdoc in tsdict -%}
              {% if tsdoc['enroll'] %}
                <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:{{ (100 * tsdoc['donePids']|length / model.training.getPids(tdict[tsdoc['docId']].dag)|length)|round|int }}%;"></div></div> {{ _('Complete') }} {{ (100 * tsdoc['donePids']|length / handler.getPids(tdict[tsdoc.docId].dag)|length)|round|int }}%</div>
                  </div>
                </div></li>
              {% endif %}
            {%- endfor -%}
          </ol>
        </div>
      </div>
    {% endif %}
    {% 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 with others.') }}</p>
          </div>
        </div>
      </div>
    {% endif %}
  </div>
</div>
{% endblock %}