<%page expression_filter="h"/>

<%!

import json

from django.utils.translation import gettext as _

from openedx.core.djangolib.js_utils import js_escaped_string, 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'),

"${user_language | n, js_escaped_string}",

"${user_timezone | n, js_escaped_string}",

${set_default_filter | n, dump_js_escaped_json}

);

</%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" title="${_('Search')}">

<span class="icon fa fa-search" aria-hidden="true"></span>

<div aria-live="polite" aria-relevant="all">

<div id="loading-indicator" class="loading-spinner hidden">

<span class="icon fa fa-spinner fa-spin" aria-hidden="true"></span>

<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 courses-list">

%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>