{% extends "base.twig" %}

{% block content %}


    <section class="module-list">
        <div class="container">
            <div class="text-gradient__wrap text-gradient__wrap--left">
                <h1 class="h2 module-list__title text-gradient">Modules</h1>
            </div>
            <h2 class="module-list__text">{{ modules_subtitle_text }}</h2>
            <div class="row">



                {% for module in modules %}

                    <div class="col-12 col-sm-6 col-md-4">
                        <article class="card card--alt">
                            <div class="card__header">
                                <div class="card__img-wrap">
                                    <a href="{{ module.link  }}">
                                        <img class="card__img" src="{{ module.featuredImage.src('82x46_medium') }}" alt="{{ module.featuredImage.alt }}" />
                                    </a>
                                    {% if(module.meta('coming_soon')) %}
                                        <div class="card__label">
                                            <span>Coming soon</span>
                                        </div>
                                    {% endif %}
                                </div>
                            </div>
                            <div class="card__content">
                                <a href="{{ module.link  }}" class="h2 card__title alt">{{ module.name  }}</a>
                                {{ module.short_description }}
                                <div class="btn-center">
                                    <a href="{{ module.link  }}" class="btn btn--gradient-small">See all courses</a>
                                </div>
                            </div>
                        </article>
                    </div>
                {% endfor %}

            </div>
            <!-- According to the designer, pagination should always show only the three closest pages..so active page  and +1 / -1 on that.
            The active page is centered unless it's the first or last page, in which case there will still be three pages shown, but the active page (being the first or last one) won't be centered -->
           <!-- <div class="pagination">
                <a href="#" class="previous">
                    <svg class="icon-small-arrow-left"><use xlink:href="<?= THEMEROOT ?>/frontend/icons/icons.svg#icon-small-arrow-left"></use></svg>
                </a>
                <a href="#" class="page">1</a>
                <a href="#" class="page active">2</a>
                <a href="#" class="page">3</a>
                <a href="#" class="previous">
                    <svg class="icon-small-arrow-right"><use xlink:href="<?= THEMEROOT ?>/frontend/icons/icons.svg#icon-small-arrow-right"></use></svg>
                </a>
            </div> -->
        </div>
    </section>
{% endblock %}