<%def name="online_help_token()"><% return "course" %></%def>
<%namespace name='static' file='static_content.html'/>
<%!
from django.utils.translation import gettext as _
from django.urls import reverse
%>
<%page args="course" expression_filter="h"/>
<article class="course" id="${course.id}" role="region" aria-label="${course.display_name_with_default}">
    <header class="course-image">
      <div class="cover-image">
        <!-- NEW IN INDIGO: Add fallback image in case of no course-image using onerror -->
        <img src="${course.course_image_url}" onerror="this.src='/theming/asset/images/no_course_image.png';" alt="${course.display_name_with_default} ${course.display_number_with_default}" />
      </div>
    </header>
    <div class="course-info" aria-hidden="true">
      <h2 class="course-name">
        <span class="course-code">${course.display_number_with_default}</span>
        <span class="course-title">${course.display_name_with_default}</span>
        <span class="course-organization">${course.display_org_with_default}</span>
      </h2>
      <!-- NEW IN INDIGO Learn more button is displayed under the course image instead of the hover functionality. -->
      <a  href="${reverse('about_course', args=[str(course.id)])}" class="learn-more" aria-hidden="true">${_("Learn More")}</a>
      <%
      if course.start is not None:
          course_date_string = course.start.strftime('%Y-%m-%dT%H:%M:%S%z')
      else:
          course_date_string = ''
      %>
      % if course.advertised_start is not None:
          <div class="course-date" aria-hidden="true">
            <!-- NEW IN INDIGO calendar icon is displayed next to the course start date -->
            <svg xmlns="http://www.w3.org/2000/svg" width="20" height="21" viewBox="0 0 20 21" fill="none">
            <path fill-rule="evenodd" clip-rule="evenodd" d="M15 3.83332H15.8333C16.75 3.83332 17.5 4.58332 17.5 5.49999V17.1667C17.5 18.0833 16.75 18.8333 15.8333 18.8333H4.16667C3.24167 18.8333 2.5 18.0833 2.5 17.1667L2.50833 5.49999C2.50833 4.58332 3.24167 3.83332 4.16667 3.83332H5V2.16666H6.66667V3.83332H13.3333V2.16666H15V3.83332ZM4.16667 8.83332V17.1667H15.8333V8.83332H4.16667ZM15.8333 7.16666H4.16667V5.49999H15.8333V7.16666ZM14.1667 11.3333H10V15.5H14.1667V11.3333Z" fill="#9CA3AF"/>
            </svg>  ${_("Starts")}: ${course.advertised_start}</div>
      % else:
          <div class="course-date">
            <!-- NEW IN INDIGO calendar icon is displayed next to the course start date -->
            <svg xmlns="http://www.w3.org/2000/svg" width="20" height="21" viewBox="0 0 20 21" fill="none">
            <path fill-rule="evenodd" clip-rule="evenodd" d="M15 3.83332H15.8333C16.75 3.83332 17.5 4.58332 17.5 5.49999V17.1667C17.5 18.0833 16.75 18.8333 15.8333 18.8333H4.16667C3.24167 18.8333 2.5 18.0833 2.5 17.1667L2.50833 5.49999C2.50833 4.58332 3.24167 3.83332 4.16667 3.83332H5V2.16666H6.66667V3.83332H13.3333V2.16666H15V3.83332ZM4.16667 8.83332V17.1667H15.8333V8.83332H4.16667ZM15.8333 7.16666H4.16667V5.49999H15.8333V7.16666ZM14.1667 11.3333H10V15.5H14.1667V11.3333Z" fill="#9CA3AF"/>
          </svg><span class="localized_datetime" aria-hidden="true" data-format="shortDate" data-datetime="${course_date_string}" data-language="${LANGUAGE_CODE}" data-string="${_("Starts: {date}")}"></span></div>
      % endif
    </div>
    <div class="sr">
      <ul>
        <li>${course.display_org_with_default}</li>
        <li>${course.display_number_with_default}</li>
        % if course.advertised_start is not None:
            <li>${_("Starts")}: <time itemprop="startDate">${course.advertised_start}</time></li>
        % else:
            <li>${_("Starts")}: <time class="localized_datetime" itemprop="startDate" data-format="shortDate" data-datetime="${course_date_string}" data-language="${LANGUAGE_CODE}"></time></li>
        % endif
      </ul>
    </div>
</article>
<%static:require_module_async module_name="js/dateutil_factory" class_name="DateUtilFactory">
    DateUtilFactory.transform(iterationKey=".localized_datetime");
</%static:require_module_async>
