<article class="card">
    <div class="card__header">
        <div class="card__img-wrap">
            <a href="{{ course.link }}">
                <img class="card__img" src="{{ course.featuredImage.src('82x46_medium') }}" alt="" />
            </a>
            {% if (course.meta('coming_soon')) %}
                <div class="card__label">
                    <span>Coming soon</span>
                </div>
            {% endif %}
            {% if ( course.meta('video').url ) %}
                <div class="card__watch video-trigger" data-video-link="{{ course.meta('video').url }}" onClick="gtag('event', 'play_video', { 'event_category' : 'Play Course (module) video', 'event_label' : '{{ course.meta('video').title }}' });">

                    <div class="card__icon">
                        <svg class="icon-play"><use xlink:href="{{ site.theme.link  }}/frontend/icons/icons.svg#icon-play"></use></svg>
                    </div>
                    <div class="card__text">watch trailer</div>
                </div>
            {% endif %}
        </div>
    </div>
    <div class="card__content">

        <h6 class="card__subtitle">Session {{ course.meta('session_number') | format_session }}  </h6>

        <a href="{{ course.link }}" class="h2 card__title">{{ course.title }}</a>

        <p>{{ course.meta('short_description') }}</p>

        <div class="btn-center">
            {% if(course.meta('coming_soon')) and (not course.meta('allow_viewing_of_full_course_page'))  %}
                <a href="{{ course.link }}" class="btn btn--gradient-small modal-form-trigger">Get notified when this becomes available</a>
            {% else %}
                <a href="{{ course.link }}" class="btn btn--gradient-small">Learn more</a>

            {% endif %}
        </div>
    </div>
</article>