<%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'/>
<%block name="js_extra">
  <script type="text/javascript" src="${static.url('common/js/vendor/bootstrap.bundle.js')}"></script>
</%block>
% 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">
        <!-- NEW IN INDIGO Heading was added. -->
        <div class="course-heading-area">
          <h2>Unlock Your Potential: Discover New Courses Today!</h2>
          <p>Explore a world of knowledge and enhance your skills with our diverse range of courses</p>
        </div>
        <!-- NEW IN INDIGO Modified search bar and filters. -->
        % if course_discovery_enabled:
          <div class="saerch-bar-discover">
            <div class="dropdown filter-block">
              <a class="dropdown-toggle" href="#" role="button" id="dropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                <svg class="filter-icon" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
                <path d="M2 3C2 2.44772 2.44772 2 3 2H13C13.5523 2 14 2.44772 14 3V4.25245C14 4.51767 13.8946 4.77202 13.7071 4.95956L9.62623 9.04044C9.43869 9.22798 9.33333 9.48233 9.33333 9.74755V11.3333L6.66667 14V9.74755C6.66667 9.48233 6.56131 9.22798 6.37377 9.04044L2.29289 4.95956C2.10536 4.77202 2 4.51767 2 4.25245V3Z" stroke="#9CA3AF" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
                </svg>
                <span>Filters</span>
                <svg class="arrow" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
                  <path fill-rule="evenodd" clip-rule="evenodd" d="M5.29289 7.29289C5.68342 6.90237 6.31658 6.90237 6.7071 7.29289L9.99999 10.5858L13.2929 7.29289C13.6834 6.90237 14.3166 6.90237 14.7071 7.29289C15.0976 7.68342 15.0976 8.31658 14.7071 8.70711L10.7071 12.7071C10.3166 13.0976 9.68341 13.0976 9.29289 12.7071L5.29289 8.70711C4.90237 8.31658 4.90237 7.68342 5.29289 7.29289Z" fill="#9CA3AF"/>
                  </svg>
              </a>
              <div class="dropdown-menu search-facets-lists" aria-labelledby="dropdownMenuLink">
                  <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>
              </div>
            </div>
            <div class="discover-search">
            <div id="discovery-form" role="search" aria-label="course" class="wrapper-search-context">
              <form class="wrapper-search-input">
                <label for="discovery-input" class="sr">${_('Search for a course')}</label>
                <div class="input-holder">
                  <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
                    <path fill-rule="evenodd" clip-rule="evenodd" d="M8 4C5.79086 4 4 5.79086 4 8C4 10.2091 5.79086 12 8 12C10.2091 12 12 10.2091 12 8C12 5.79086 10.2091 4 8 4ZM2 8C2 4.68629 4.68629 2 8 2C11.3137 2 14 4.68629 14 8C14 9.29583 13.5892 10.4957 12.8907 11.4765L17.7071 16.2929C18.0976 16.6834 18.0976 17.3166 17.7071 17.7071C17.3166 18.0976 16.6834 18.0976 16.2929 17.7071L11.4765 12.8907C10.4957 13.5892 9.29583 14 8 14C4.68629 14 2 11.3137 2 8Z" fill="#9CA3AF"/>
                    </svg>
                  <input id="discovery-input" class="discovery-input" placeholder="${_('Explore course')}" type="text"/>
                </div>
                <div class="button-holder">
                  <button type="submit" class="button postfix discovery-submit" title="${_('Search')}">
                    Search
                  </button>
                </div>
              </form>
              <div id="discovery-message" class="search-status-label"></div>
            </div>
            <div id="filter-bar" class="filters hide-phone is-collapsed">>
            </div>
          </div>
        </div>
      % endif

        <div class="course-holder 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>
      </section>
    </section>
</main>
