{% extends 'base.html.twig' %}

{% block title %}Courses
{% endblock %}

{% block body %}
{% include 'includes/header.html.twig' %}
<main>
    <section class="section-courses">
        <div class="container">
            <div class="row">
                <div class="col-md-6 align-content-center">
                    <img src="{{ asset('assets/images/CoursesLogo.svg') }}" alt="Logo" />
                </div>
                <div class="col-md-6">
                    <div class="bannerCourse-col-right">
                        <div class="container-col-right">
                            <h1>Foorsa Edu is one of world best virtual learning network eLearning.</h1>
                            <div class="description-text">
                                <p>You can be your own Guiding star with our help</p>
                                <button class="btn-discover-more">
                                    Discover More
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <section class="filter-section">
        <div class="container">
           {% for type, messages in app.flashes %}
                {% for message in messages %}
                    <div class="alert alert-{{ type }}">{{ message }}</div>
                {% endfor %}
            {% endfor %}
            <div class="d-flex justify-content-between align-items-center mb-5">
                <div class="filter-title">
                    <img src="{{ asset('assets/icons/filter-icon.svg') }}" alt="filter-icon">
                    <div>Filter</div>
                    {% if app.request.query.all is not empty %}
                        <div class="clear-filtre">
                            <a href="{{ path('app_course')}}"><span>Clear filtre</span>
                            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
                                <path d="M16 16L12 12M12 12L8 8M12 12L16 8M12 12L8 16" stroke="#1A2134" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                            </svg></a>
                        </div>
                    {% endif %}
                </div>
                <div class="number-result">{{ pagination.getTotalItemCount }} Results</div>
            </div>

            <div class="row py-3 border-top">
                <div class="col-md-3 ps-0">
                    <form id="filter-form" method="get" action="{{ path('app_course') }}">
                        {% include 'includes/filtre.html.twig' with { topics, levels, languages } %}
                    </form>
                </div>
                <div class="col-md-9 pe-0">
                    <div class="row" id="card-container">
                        {% for course in pagination.items %}
                            {% include 'components/course_card.html.twig' with { 'course': course ,class:'mb-4' } %}
                        {% endfor %}
                    </div>
                    {% if pagination.getTotalItemCount > pagination.getItemNumberPerPage %}
                    {{ include('pagination/custom_pagination.html.twig', { 'pagination': pagination }) }}
                    {% endif %}
                </div>
            </div>
        </div>
    </section>
    <section class="articles-section">
        <div class="container my-5">
            <div class="about-text">
                <p>{{ 'Popular Courses' }}</p>
                <h2>{{ 'Featured Courses' }}</h2>
            </div>

            <div class="row">
                <div class="col-md-4">
                    <div class="article-card">
                        <a href="#">
                            <img src="{{ asset('assets/images/imgArticl01.png') }}" alt="imgArticle"
                                class="article-Img" />
                        </a>
                        <div class="category-course-tag">
                            <span>{{ 'Design' }}</span>
                            <a href="#" class="btn-favorite WishlistCourses">
                                <img src="{{ asset('assets/icons/FavoriIcon.svg') }}" alt="">
                            </a>
                        </div>
                        <div class="courses-style">
                            <div class="px-4">
                                <div class="mb-3">
                                    <img src="{{ asset('assets/images/Article-Author01.png') }}" alt="Author-Img">
                                    <span>{{ 'by Lorem Ipsum' }}</span>
                                </div>
                                <h3 class="article-title">{{ 'The Python Mega Course: Build 10 Real World Applications'
                                    }}</h3>
                                <div class="badge-group">
                                    <span class="badge"><img src="{{ asset('assets/icons/AdvancementIcon01.svg') }}"
                                            alt="">Advance</span>
                                    <span class="badge"><img src="{{ asset('assets/icons/UsersIcon01.svg') }}"
                                            alt="">14</span>
                                    <span class="badge"><img src="{{ asset('assets/icons/RatingIcon.svg') }}"
                                            alt="">5.0</span>
                                </div>
                            </div>
                            <div class="hidden-cart-item">
                                <div class="d-flex justify-content-between align-items-center mt-4">
                                    <span class="price">$40.00</span>
                                    <div class="btn-add-cart">
                                        <a href="#"><img src="{{ asset('assets/icons/cartIcon01.svg') }}" alt="">
                                            Add to cart</a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="col-md-4">
                    <div class="article-card">
                        <a href="#">
                            <img src="{{ asset('assets/images/imgArticl02.png') }}" alt="imgArticle"
                                class="article-Img" />
                        </a>
                        <div class="category-course-tag">
                            <span class="article-dev">{{ 'Web Development' }}</span>
                            <a href="#" class="btn-favorite WishlistCourses">
                                <img src="{{ asset('assets/icons/FavoriIcon.svg') }}" alt="">
                            </a>
                        </div>
                        <div class="courses-style">
                            <div class="px-4">
                                <div class="mb-3">
                                    <img src="{{ asset('assets/images/Article-Author02.png') }}" alt="Author-Img">
                                    <span>{{ 'by Lorem Ipsum' }}</span>
                                </div>
                                <h3 class="article-title">{{ 'Learn Python Programming Masterclass' }}</h3>
                                <div class="badge-group">
                                    <span class="badge"><img src="{{ asset('assets/icons/AdvancementIcon01.svg') }}"
                                            alt="">Advance</span>
                                    <span class="badge"><img src="{{ asset('assets/icons/UsersIcon01.svg') }}"
                                            alt="">14</span>
                                    <span class="badge"><img src="{{ asset('assets/icons/RatingIcon.svg') }}"
                                            alt="">5.0</span>
                                </div>
                            </div>
                            <div class="hidden-cart-item">
                                <div class="d-flex justify-content-between align-items-center mt-4">
                                    <span class="price">$40.00</span>
                                    <div class="btn-add-cart">
                                        <a href="#"><img src="{{ asset('assets/icons/cartIcon01.svg') }}" alt="">
                                            Add to cart</a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="col-md-4">
                    <div class="article-card">
                        <a href="#">
                            <img src="{{ asset('assets/images/imgArticl01.png') }}" alt="imgArticle"
                                class="article-Img" />
                        </a>
                        <div class="category-course-tag">
                            <span class="article-mobile-dev">{{ 'Design' }}</span>
                            <a href="#" class="btn-favorite WishlistCourses">
                                <img src="{{ asset('assets/icons/FavoriIcon.svg') }}" alt="">
                            </a>
                        </div>
                        <div class="courses-style">
                            <div class="px-4">
                                <div class="mb-3">
                                    <img src="{{ asset('assets/images/Article-Author.png') }}" alt="Author-Img">
                                    <span>{{ 'by Lorem Ipsum' }}</span>
                                </div>
                                <h3 class="article-title">{{ 'Java Programming Masterclass covering Java 11 & Java 17'
                                    }}</h3>
                                <div class="badge-group">
                                    <span class="badge"><img src="{{ asset('assets/icons/AdvancementIcon01.svg') }}"
                                            alt="">Advance</span>
                                    <span class="badge"><img src="{{ asset('assets/icons/UsersIcon01.svg') }}"
                                            alt="">14</span>
                                    <span class="badge"><img src="{{ asset('assets/icons/RatingIcon.svg') }}"
                                            alt="">5.0</span>
                                </div>
                            </div>
                            <div class="hidden-cart-item">
                                <div class="d-flex justify-content-between align-items-center mt-4">
                                    <span class="price">$40.00</span>
                                    <div class="btn-add-cart">
                                        <a href="#"><img src="{{ asset('assets/icons/cartIcon01.svg') }}" alt="">
                                            Add to cart</a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

</main>
{% include 'includes/footer.html.twig' %}

{% endblock %}