{% extends "base.twig" %}

{% block content %}

    <section id="{{ element.html_id  }}" class="tabs-menu">
        <div class="tabs-menu__header">
            <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>
        <div class="tabs-menu__wrapper">
            <div class="tabs-menu-arrow tabs-menu-arrow--left courses-slider-left">
                <svg class="icon-arrow-left">
                    <use xlink:href="{{ site.theme.link }}/frontend/icons/icons.svg#icon-arrow-left"></use>
                </svg>
            </div>
            <div class="tabs-menu__tabs card-list owl-carousel owl-refresh" id="js-tabs-slider">
                <div class="owl-stage-outer">
                    <div class="owl-stage">
                    {% for item in modules %}
                        <div class="owl-item">
                            <a href="{{ item.link }}" class="tabs-menu__link">
                                <div class="tabs-menu__tab {% if item.ID == module.ID %} tabs-menu--active {% endif %}"  style=" background-image: url({{ item.featuredImage.src('82x46_medium') }});" >
                                    <h2 class="tabs-menu__title">{{ item.name  }}</h2>
                                    <div class="overlay"></div>
                                </div>
                            </a>
                        </div>
                    {% endfor %}
                    </div>
                </div>
            </div>
            <div class="tabs-menu-arrow tabs-menu-arrow--right courses-slider-right">
                <svg class="icon-arrow-right">
                    <use xlink:href="{{ site.theme.link }}/frontend/icons/icons.svg#icon-arrow-right"></use>
                </svg>
            </div>
        </div>
    </section>
   <div id="swup-inside" class="transition-fade">
        <section class="tabs-info">
            <div class="container">
                <div class="tabs-info__tab tabs-info--active">
                    <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>
        </section>

        <section class="tabs-outer">
            <div class="container">
                <div class="row">
                    {% for course in courses %}
                        <div class="col-12 col-sm-6 col-md-4">
                            {% include 'partials/course-card.twig' %}

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