{% import "components/user.html" as user with context %}
{% import "components/paginator.html" as paginator with context %}
{% import "components/ui/v1.html" as ui_v1 %}
{% import "partials/course_visibility_toggle.html" as vis with context %}
{% extends "layout/basic.html" %}
{% block content %}
<div class="ui-page ui-page--padded">
  <div class="ui-split">
    <main class="ui-stack">
      <section class="ui-panel">
        <header class="ui-panel__header ui-toolbar ui-toolbar--flush">
          <h1 class="ui-panel__title">{{ _('Course') }}</h1>
          <form method="get" name="filter-form" class="ui-actions course-catalog__filters">
            {% if canOrderCourses %}
              <a class="button rounded" href="{{ url('course_order') }}">{{ _('Adjust Course Order') }}</a>
            {% endif %}
            <div class="ui-field course-catalog__search">
              <input type="text" class="compact textbox ui-field__control" name="q" value="{{ q }}" placeholder="{{ _('Search courses...') }}" aria-label="{{ _('Search courses...') }}">
            </div>
            <button type="submit" class="button hasjs--hide">
              {{ _('Search') }}
            </button>
          </form>
        </header>
        {% if not cdocs.length %}
        <div class="ui-panel__body">
          {{ ui_v1.empty_state(_('No course yet...')) }}
        </div>
        {% else %}
        <div class="ui-panel__body">
          <ol class="ui-stack ui-stack--xs ui-list-reset">
            {%- for cdoc in cdocs -%}
            <li class="ui-card course-card{% if cstdict[cdoc.docId]['enroll'] %} course-card--enrolled{% endif %}">
              <div class="ui-card__body media">
                <div class="media__left middle course-card__stat">
                  <div class="ui-stat">
                    <div class="ui-stat__value">{{ cdoc.attend|default(0) }}</div>
                    <div class="ui-stat__label">{{ _('Enrollees') }}</div>
                  </div>
                </div>
                <div class="media__body middle course-card__content">
                  <div class="ui-stack ui-stack--xs course-card__details">
                    <h2 class="ui-card__title course-card__title"><a href="{{ url('course_detail', cid=cdoc.docId) }}" data-emoji-enabled>{{ cdoc['title'] }}</a>{{ vis.badge(cdoc) }}</h2>
                    {% set courseSummary = cdoc.content|default('')|markdown|striptags|trim %}
                    {% if courseSummary %}
                      <p class="course-card__summary ui-muted">{{ courseSummary|truncate(100, true) }}</p>
                    {% endif %}
                    <div class="ui-meta">
                      {% if cstdict[cdoc.docId]['enroll'] %}
                        <span class="ui-badge ui-badge--success"><span class="icon training-status--icon done"></span> {{ _('Enrolled') }}</span>
                      {% elif handler.user.hasPriv(PRIV.PRIV_USER_PROFILE) %}
                        <span class="ui-badge ui-badge--neutral"><span class="icon training-status--icon outside"></span> {{ _('Not Enrolled') }}</span>
                      {% endif %}
                    </div>
                  </div>
                </div>
              </div>
            </li>
            {%- endfor -%}
          </ol>
          {% if page and cpcount %}{{ paginator.render(page, cpcount) }}{% endif %}
        </div>
        {% endif %}
      </section>
    </main>
    {% if canCreate %}
    <aside class="ui-sidebar ui-sidebar--flow">
      <section class="ui-panel">
        <div class="ui-panel__body">
          <a href="{{ url('course_create') }}" class="button expanded"><span class="icon icon-add"></span> {{ _('New Course') }}</a>
        </div>
      </section>
    </aside>
    {% endif %}
  </div>
</div>
{% endblock %}