courses.html

<%!
  import json
  from django.utils.translation import ugettext as _
  from openedx.core.djangolib.js_utils import dump_js_escaped_json
%>
<%inherit file="../main.html" />
<%
  course_discovery_enabled = settings.FEATURES.get('ENABLE_COURSE_DISCOVERY')
%>

<%namespace name='static' file='../static_content.html'/>

% if course_discovery_enabled:
<%block name="header_extras">
  % for template_name in ["course_card", "filter_bar", "filter", "facet", "facet_option"]:
  <script type="text/template" id="${template_name}-tpl">
      <%static:include path="discovery/${template_name}.underscore" />
  </script>
  % endfor
  <%static:require_module module_name="js/discovery/discovery_factory" class_name="DiscoveryFactory">
    DiscoveryFactory(
      ${course_discovery_meanings | n, dump_js_escaped_json},
      getParameterByName('search_query')
    );
  </%static:require_module>
</%block>
% endif

<%block name="pagetitle">${_("Courses")}</%block>

<main id="main" aria-label="Content" tabindex="-1">
    <section class="find-courses">
      <section class="courses-container">
        % if course_discovery_enabled:
        <div id="discovery-form" role="search" aria-label="course" class="wrapper-search-context">
          <div id="discovery-message" class="search-status-label"></div>
          <form class="wrapper-search-input">
            <label for="discovery-input" class="sr">${_('Search for a course')}</label>
            <input id="discovery-input" class="discovery-input" placeholder="${_('Search for a course')}" type="text"/>
            <button type="submit" class="button postfix discovery-submit" aria-label="${_('Search')}">
              <i class="icon fa fa-search" aria-hidden="true"></i>
              <div aria-live="polite" aria-relevant="all">
                <div id="loading-indicator" class="loading-spinner hidden">
                  <i class="icon fa fa-spinner fa-spin"></i>
                  <span class="sr">${_('Loading')}</span>
                </div>
              </div>
            </button>
          </form>
        </div>

        <div id="filter-bar" class="filters hide-phone is-collapsed">
        </div>
        % endif

        <div class="courses${'' if course_discovery_enabled else ' no-course-discovery'}" role="region" aria-label="${_('List of Courses')}">
          <ul class="courses-listing">
            %for course in courses:
            <li class="courses-listing-item">
              <%include file="../course.html" args="course=course" />
            </li>
            %endfor
          </ul>
        </div>


        % if course_discovery_enabled:
        <aside aria-label="${_('Refine Your Search')}" class="search-facets phone-menu">
          <h2 class="header-search-facets">${_('Refine Your Search')}</h2>
          <section class="search-facets-lists">
          </section>
        </aside>
        % endif

      </section>
    </section>
</main>