{% import "components/problem.html" as problem with context %}
{% import "components/record.html" as record with context %}
{% import "partials/course_visibility_toggle.html" as vis with context %}

{% include "course_ui_style.html" %}
{{ set(UiContext, 'ssid', ssdoc._id) }}
<div class="row course-subsection course-ui-page" data-sticky-parent>
  <div class="medium-9 columns ui-stack">
    <div class="section ui-panel">
      <div class="section__header">
          <h1 class="section__title"><a href="{{ url('course_subsec_detail', cid=cdoc.docId, csid=csdoc.docId, ssid=ssdoc._id) }}">{{ ssdoc['title'] }}</a>{{ vis.badge(ssdoc) }}</h1>
      </div>
    </div>
    <div class="course-video-playback-slot" data-video-playback-slot></div>
    {% if ssdoc.content %}
    <div class="section ui-panel">
      <div class="section__body typo richmedia course-ui__content">
        {{ ssdoc.content|default('')|markdown|safe }}
      </div>
    </div>
    {% endif %}
    <div class="section ui-panel">
      <div class="section__header">
        <h1 class="section__title">{{ _('Problems') }}</h1>
      </div>
      <div class="section__body no-padding training__problems">
        <div class="ui-table-wrap course-subsection__problem-scroll" tabindex="0" role="region" aria-label="{{ _('Problems') }}">
        <table class="course-atr-problem-table course-ui__problem-table">
          <colgroup>
            {% if handler.user.hasPriv(PRIV.PRIV_USER_PROFILE) %}
              <col class="col--status">
            {% endif %}
            <col class="col--name">
            <col class="col--tried">
            <col class="col--ac">
            <col class="col--difficulty course-subsection__difficulty">
          </colgroup>
          <thead>
            <tr>
              {% if handler.user.hasPriv(PRIV.PRIV_USER_PROFILE) %}
                <th class="col--status record-status--border">{{ _('Status') }}</th>
              {% endif %}
              <th class="col--name">{{ _('Problem') }}</th>
              <th class="col--tried">{{ _('Tried') }}</th>
              <th class="col--ac">{{ _('AC') }}</th>
              <th class="col--difficulty course-subsection__difficulty">{{ _('Difficulty') }}</th>
            </tr>
          </thead>
          <tbody>
            {%- for pid in pids -%}
              {% if pid in pdict %}
                {% set pdoc=pdict[pid] %}
                {% set psdoc=psdict[pid] %}
                <tr data-pid="{{ pid }}">
                  {% if handler.user.hasPriv(PRIV.PRIV_USER_PROFILE) %}
                  {% if psdoc['rid'] %}
                    {{ record.render_status_td(psdoc, rid_key='rid', short=should_compare) }}
                  {% else %}
                    <td class="col--status record-status--border"></td>
                  {% endif %}
                  {% endif %}
                  <td class="col--name col--problem-name" {% if handler.user.hasPriv(PRIV.PRIV_USER_PROFILE) %} data-star="{{ psdoc.star }}"{% endif %}>
                    {{ problem.render_problem_title(
                      pdoc,
                      show_tags=false
                    ) }}
                  </td>
                  <td class="col--tried">{{ pdoc.nSubmit }}</td>
                  <td class="col--ac">{{ pdoc.nAccept }}</td>
                  <td class="col--difficulty course-subsection__difficulty">{{ pdoc['difficulty'] or lib.difficulty(pdoc.nSubmit, pdoc.nAccept) or _('(None)') }}</td>
                </tr>
              {% else %}
                {% set pdoc = {'_id': pid, 'hidden': true, 'title': '*'} %}
                <tr>
                  {% if handler.user.hasPriv(PRIV.PRIV_USER_PROFILE) %}
                  <td class="col--status record-status--border">
                  </td>
                  {% endif %}
                  <td class="col--name col--problem-name">
                    {{ problem.render_problem_title(pdoc, invalid=true) }}
                  </td>
                  <td class="col--tried">*</td>
                  <td class="col--ac">*</td>
                  <td class="col--difficulty course-subsection__difficulty">*</td>
                </tr>
              {% endif %}
            {%- endfor -%}
          </tbody>
        </table>
        </div>
      </div>
    </div>
  </div>
  <div class="medium-3 columns ui-stack course-sidebar" data-course-sidebar>
    {% set courseSubsectionResults = findSubModule('partials/course/subsection/detail/results/') %}
    {% if canEdit or courseSubsectionResults.length %}
    <div class="section side ui-panel course-side-results">
      <div class="section__header">
        <h1 class="section__title"><span class="icon icon-statistics"></span> {{ _('Scoreboard') }}</h1>
      </div>
      <ol class="menu course-side-results-menu course-ui__side-menu">
        {% if canEdit %}
          <li class="menu__item course-side-primary-result"><a class="menu__link course-ui__side-link" href="{{ url('course_subsec_scoreboard', cid=cdoc.docId, csid=csdoc.docId, ssid=ssdoc._id) }}">
            <span class="icon icon-statistics"></span>  {{ _('Scoreboard') }}
          </a></li>
        {% endif %}
        {% for page in courseSubsectionResults %}{% include page %}{% endfor %}
      </ol>
    </div>
    {% endif %}
    <div class="section side ui-panel course-side-actions-panel">
      <div>
        <ol class="menu course-side-actions-menu course-ui__side-menu">
          <li class="menu__item"><a class="menu__link course-ui__side-link" href="{{ url('course_detail', cid=cdoc.docId) }}">
            <span class="icon icon-award"></span> {{ _('View Course') }}
          </a></li>
          <li class="menu__item"><a class="menu__link course-ui__side-link" href="{{ url('course_section_detail', cid=cdoc.docId, csid=csdoc.docId) }}">
            <span class="icon icon-award"></span> {{ _('View Section') }}
          </a></li>
        {% if canEdit %}
          <li class="menu__item"><a class="menu__link course-ui__side-link" href="{{ url('course_subsec_files', cid=cdoc.docId, csid=csdoc.docId, ssid=ssdoc._id) }}">
            <span class="icon icon-file"></span> {{ _('File') }}
          </a></li>
          <li class="menu__item"><a class="menu__link course-ui__side-link" href="{{ url('course_subsec_edit', cid=cdoc.docId, csid=csdoc.docId, ssid=ssdoc._id) }}">
            <span class="icon icon-edit"></span>  {{ _('Edit Subsection') }}
          </a></li>
        {% endif %}
          {% for page in findSubModule('partials/course/subsection/detail/actions/') %}{% include page %}{% endfor %}
          <li class="menu__seperator"></li>
        </ol>
      </div>
      <div class="section__body typo">
        <dl class="course-ui__metadata">
            <dt>{{ _('Course') }}</dt>
            <dd><a href="{{ url('course_detail', cid=cdoc.docId) }}">{{ cdoc.title }}</a></dd>
        </dl>
        <dl class="course-ui__metadata">
          <dt>{{ _('Sections') }}</dt>
          <dd><a href="{{ url('course_section_detail', cid=cdoc.docId, csid=csdoc.docId) }}">{{ csdoc.title }}</a></dd>
        </dl>
        <dl class="course-ui__metadata">
          <dt>{{ _('Created By') }}</dt>
          <dd>{{ user.render_inline(udoc, badge=false) }}</dd>
        </dl>
      </div>
    </div>
    <div class="section side ui-panel">
      <ol class="menu course-ui__side-menu">
        {{ sidemenu.render_item('list', 'course_subsec_detail', {cid:cdoc.docId,csid:csdoc.docId,ssid:ssdoc._id}, label='Subsection', menu_item='course_subsec_detail') }}
      </ol>
    </div>
  </div>
</div>