{% extends "base.twig" %}

{% block content %}

<section id="{{ element.html_id  }}" class="tabs-menu">
    <div class="container">
        <div class="row">
            <div class="col-12 col-lg-5">
                <h1>Courses</h1>
                <p>{{ modules_subtitle_text }}</p>
            </div>
        </div>
    </div>
    <div class="tabs-menu__tabs card-list owl-carousel" id="js-tabs-slider">
        {% for module in modules %}
            <div class="tabs-menu__tab {% if loop.first %} tabs-menu--active {% endif %}"  style=" background-image: url({{ module.featuredImage.src('82x46_medium') }});" data-index="{{ loop.index }}">
                <h2 class="tabs-menu__title">{{ module.name  }}</h2>
                <div class="overlay"></div>
            </div>
        {% endfor %}
    </div>
</section>

<section class="tabs-info">
    <div class="container">
    {% for module in modules %}
        <div class="tabs-info__tab {% if loop.first %} tabs-info--active {% endif %}" data-index="tabs-info-{{ loop.index }}">
            <div class="tabs-info__text">{{ module.short_description }}</div>
            <div class="tabs-info__line"></div>
            <a href="#" class="btn btn--gradient-small modal-form-trigger" onClick="gtag('event', 'form_open', { 'event_category' : 'Sign up (for Module) click', 'event_label' : '{{ module.name }}' });"><span>Sign up for this module</span></a>
        </div>
    {% endfor %}
</section>

<section class="tabs-outer">
    <div class="container">
        {% for module in courses %}
         <div class="row tabs-item {% if loop.first %} tabs-item--active {% endif %}" data-index="tabs-item-{{ loop.index }}">
                {% for course in module.courses %}
                    <div class="col-12 col-sm-6 col-md-4">
                        <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>
                    </div>
                {% endfor %}
            </div>
        {% endfor %}

    </div>
</section>
{% endblock %}