{% extends "layout/basic.html" %}
{% 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">
      <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>
    <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 %}
          <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 %}