{% extends "base.html.twig" %} 
{% block title %} Cours gratuit en ligne - programmation- marketing IoAcademy {% endblock %}
{% block metatag %} 
  <meta name="description" content="Prenez gratuitement des cours en ligne et lancez-vous dans la programmation, le marketing et la science des données." />
  <link rel="canonical" href="{{ app.request.schemeAndHttpHost ~ app.request.requestUri }}" />
  <meta property="og:title" content="Cours gratuit en ligne - IoAcademy">
  <meta property="og:site_name" content="IoAcademy">
  <meta property="og:url" content="{{ app.request.schemeAndHttpHost ~ app.request.requestUri }}"/>
  <meta property="og:description" content="Prenez gratuitement des cours en ligne et lancez-vous dans la programmation, le marketing et la science des données."/>
  <meta property="og:locale" content="fr_FR" />
  <meta property="og:type" content="website" />
  <meta property="og:image" content={{ absolute_url ( asset('images/formation/defaultformation.jpg') )}}/>  
{% endblock %}
{% block content %}
<div class="container">
    <form>
        <div class="row mt-5">
            <nav aria-label="breadcrumb">
                <ul class="list-inline">
                    <li class="list-inline-item"><a class="nav-link text-dark p-0" href="{{ path('home') }}">Accueil</a></li>
                    <li class="list-inline-item">/</li>
                    <li class="list-inline-item"><a class="nav-link text-dark p-0" href="{{ path('cours') }}">Cours</a></li>
                </ul>
            </nav>
            <div class="col-sm-12 col-lg-6 ps-3 align-self-center">
                <h1 class="title">Toutes les <span class="text-primary d-block">Cours</span></h1>
                <p class="fs-5  pt-2">
                    Découvrez une technologie spécifique à travers une série de vidéo qui vous guidera dans votre apprentissage
                </p>
            </div>
            <div class="col-sm-12 col-lg-6">
                <div class="row justify-content-end pe-2">
                    <div class="col-auto margin-flex d-flex border rounded ">
                        <label class="form-label pt-2 size_niveau text-uppercase text-muted" for="filter-level">Niveau:</label>
                        <select name="level" class="border-0 form-select ps-2 size_select" id="filter-level" onchange="this.form.submit()">
                            <option value="">Tous</option>
                            {% for key, level in levels %}
                            <option {{ app.request.get('level')==key ~ '' ? 'selected' : '' }} value="{{ key }}">{{ level }}</option>
                            {% endfor %}
                        </select>

                    </div>
                    <div class="col-auto margin-flex d-flex border rounded">
                        <label class="form-label pt-2 size_Technologie text-uppercase text-muted" for="category_id">Technologie:</label>
                        <select name="category" class="border-0 form-select ps-2 size_select" id="filter-category" onchange="this.form.submit()">
                            <option value="">Toutes</option>

                            {% if selectedCategory %}
                            <option value="{{ selectedCategory.id }}" selected>{{ selectedCategory.name }}</option>
                            {% endif %}
                            {% for category in categorys %}
                            <option value="{{ category.id }}">{{ category.name}}</option>
                            {% endfor %}
                        </select>
                    </div>
                </div>
                {% if courses| length > 0 %}
                    <div class="row ">
                        {% for cours in courses|slice(0,2)%}
                        <div class="col-12 col-sm-12 col-md-6 col-lg-6 my-3 ">
                            {% include 'courses/card.html.twig' %}
                        </div>
                        {% endfor %} 
                    </div>
                {% endif %}
            </div>
        </div>
        <div class="row">
            {% if courses | length > 0 %} 
                {% for cours in courses|slice(2,courses|length) %}
                    <div class="col-12 col-sm-6 col-md-4 col-lg-3 my-2">
                        {% include 'courses/card.html.twig' %}
                    </div>
                {% endfor %}
                <div class="d-flex flex-row-reverse ">
                    <div class="navigation my-4">
                        {% do courses.setPageRange(1) %} {{ knp_pagination_render(courses,'pagination.html.twig') }}
                    </div>
                    <div class="my-4">
                      <select name="resultat"class="form-select nbr-course-page me-2 text-muted "id="resultat" onchange="this.form.submit()">
                            {% for key, resultat in resultats %}
                                <option {{ app.request.get('resultat')==key ~ '' ? 'selected' : '' }} value="{{ key }}">{{ resultat }}</option>
                            {% endfor %}
                        </select>
                    </div>          
                </div>
            {% else %}
            <div class="container mt-5">
                <div class="row">
                    <img src="{{asset('build/images/no-courses.svg')}}" class="card-img-top rounded-img-5 img-card-size" alt="no cours">
                    <p class="text-center my-4 text-muted">Nous n'avons pas trouvé de résultats qui correspondent vos critères de recherche.</p>
                    <p class="text-center text-muted">
                        <a class="btn btn-primary" href="{{ path('cours')}}">Explorer les cours</a>
                    </p>
                </div>
            </div>
            {% endif %}
        </div>
    </form>
</div>
{% endblock %}