{% extends "base.html.twig" %} 
{% block title %} Formations en ligne - IoAcademy {% endblock %}
{% block metatag %} 
  <meta name="description" content="IoAcademy est une plate-forme d'apprentissage et d'enseignement qui propose des programmes de formation en ligne qui répondent aux attentes du marché du travail." />
  <link rel="canonical" href="{{ app.request.schemeAndHttpHost ~ app.request.requestUri }}" />
  <meta property="og:title" content="Formations 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="IoAcademy est une plate-forme d'apprentissage et d'enseignement qui propose des programmes de formation en ligne qui répondent aux attentes du marché du travail."/>
  <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('formations') }}">Formation</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">Formations</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 formations | length > 0 %}
                    <div class="row ">
                        {% for formation in formations|slice(0,2)%}
                        <div class="col-12 col-sm-12 col-md-6 col-lg-6 my-3 ">
                            {% include 'formation/card.html.twig' %}
                        </div>
                        {% endfor %} 
                    </div>
                {% endif %}
        </div>
    </div>
    <div class="row">
        {% if formations | length > 0 %} {% for formation in formations|slice(2,formations|length) %}
        <div class="col-12 col-sm-6 col-md-4 col-lg-3 my-2">
            {% include 'formation/card.html.twig' %}
        </div>
        {% endfor %}
            <div class="d-flex flex-row-reverse ">
                <div class="navigation my-4">
                    {% do formations.setPageRange(1) %} {{ knp_pagination_render(formations,'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 formation">
                <p class="text-center my-4 text-muted">Nous n'avons pas trouvé de résultats avec vos critères de
                    recherche.</p>
                <p class="text-center text-muted">
                    <a class="btn btn-primary" href="{{ path('formations')}}">Explorer les formations</a>
                </p>
            </div>
        </div>
        {% endif %}
    </div>
</form>
</div>
{% endblock %}