{% load i18n cms_tags extra_tags thumbnail %}
{% comment %}Obviously, the context template variable "course" is required and must be a Course page extension{% endcomment %}
{% with course_page=course.extended_object course_state=course.state main_org_title=course.get_main_organization.extended_object.get_title %}
<a href="{{ course.extended_object.get_absolute_url }}" class="course-glimpse course-glimpse--link {% if course.extended_object.publisher_is_draft %}course-glimpse--draft{% endif %}">
  <div class="course-glimpse__media">
    {% get_placeholder_plugins "course_cover" course_page as cover_plugins or %}
      <p class="course-glimpse__media__empty">{% trans "Cover" %}</p>
    {% endget_placeholder_plugins %}
    {% blockplugin cover_plugins.0 %}
      <img src="{% thumbnail instance.picture 300x170 crop upscale subject_location=instance.picture.subject_location %}"
        srcset="
          {% thumbnail instance.picture 300x170 crop upscale subject_location=instance.picture.subject_location %} 300w,
          {% if instance.picture.width >= 600 %}{% thumbnail instance.picture 600x340 crop upscale subject_location=instance.picture.subject_location %} 600w,{% endif %}
          {% if instance.picture.width >= 900 %}{% thumbnail instance.picture 900x510 crop upscale subject_location=instance.picture.subject_location %} 900w{% endif %}
        "
        sizes="300px"
        {# alt forced to empty string for a11y because the image does not carry more information than the course title #}
        alt=""
      />
    {% endblockplugin %}
  </div>
  <div class="course-glimpse__icon">
    {% get_placeholder_plugins "course_icons" course_page as icon_plugins %}
    {% if icon_plugins %}
      <div class="course-glimpse__icon__band" style="background: {{ icon_plugins.0.page.category.color }};" aria-hidden="true">
        {{ icon_plugins.0.page.get_title }}
        <div class="course-glimpse__icon__band__end" style="border-left-color: {{ icon_plugins.0.page.category.color }};"></div>
      </div>
      {% with form_factor="mark" %}
        {% render_plugin icon_plugins.0 %}
      {% endwith %}
    {% endif %}
  </div>
  <div class="course-glimpse__content">
      <div class="course-glimpse__content__wrapper">
          <p class="course-glimpse__content__title">{{ course_page.get_title }}</p>
          {% if main_org_title %}
          <p>{{ main_org_title }}</p>
          {% endif %}
      </div>
      <div class="course-glimpse__footer">
          <p class="course-glimpse__footer__date">
              {{ course_state.text|capfirst }}<br>
              {{ course_state.datetime|date:"DATE_FORMAT" }}
          </p>
          {% if course_state.call_to_action %}
          <div class="course-glimpse__footer__cta">
              <button class="button">{{ course_state.call_to_action|capfirst }}</button>
          </div>
          {% endif %}
      </div>
  </div>
</a>
{% endwith %}
