templates/front-office/formation/list.html.twig line 1

{% extends "front-office/_base.html.twig" %}

{% block content %}

    <div class="formation-list meli-section-90">

        {# Breadcrumb #}
        <div class="breadcrumb">
            <a class="txt-century txt-orange txt-size12 txt-regular txt-underline" href="{{ path('home') }}">Accueil</a>
            <span class="txt-century txt-orange txt-size12 txt-regular"> > </span>
            <span class="txt-century txt-orange txt-size12 txt-regular">Formations</span>
        </div>

        <div class="title-container">
            <h1 class="title txt-dancing txt-green txt-bold txt-size40 txt-center">Les Formations</h1>

            {% if formations is not empty %}
                <p class="txt-century txt-center txt-regular txt-size15 txt-green meli-section-45">
                    Bienvenue, si vous êtes ici c’est que vous êtes un.e passionné.e de couture, et que vous souhaitez
                    progresser pas à pas. Grâce à nos capsules de formation vous aurez un accès en ligne permanent à des
                    vidéos présentant de véritables cours de couture. Rejoignez nous et passez à une étape supérieure !
                </p>
            {% else %}
                <p class="txt-century txt-center txt-regular txt-size15 txt-green meli-section-45">
                    Nos formations sont en cours de création
                </p>
            {% endif %}

        </div>

        <section class="formation-container meli-start-start">

            {% for key, formation in formations %}
                {% set key = key +1 %}

                <div class="item {% if key%3 != 0 or key == 0 %}mx-right{% endif %} meli-width-30">
                    <a href="{{ path('formation_read',{'id':formation.id,'slug':formation.name|url}) }}">
                        <div class="info-box bgc-green">
                            <h2 class="item-title txt-century txt-center txt-bold txt-size20 txt-white ">
                                {{ formation.name }}
                            </h2>

                            <div class="review meli-around-center meli-section-45">
                                {% if formation.rating is not null %}
                                    {% for i in 1..5 %}
                                        {% if i <= formation.rating %}
                                            <div class="meli-width-10">
                                                <img src="{{ asset('assets/img/icons/etoile-orange.png') }}" alt="1">
                                            </div>
                                        {% else %}
                                            <div class="meli-width-10">
                                                <img src="{{ asset('assets/img/icons/etoile-vide.png') }}" alt="0">
                                            </div>
                                        {% endif %}
                                    {% endfor %}
                                {% else %}
                                    <p class="txt-green">-</p>
                                {% endif %}

                            </div>

                            <div class="informations meli-center-center">

                                <div class="information-one level meli-width-50 meli-start-center">
                                    <div class="meli-width-10 meli-center-center">
                                        <img src="{{ asset('assets/img/icons/niveau.png') }}" alt="Niveau">
                                    </div>
                                    <div class="">
                                        <p class="txt-century txt-bold txt-size15 txt-white">Niveau :</p>
                                    </div>
                                    <div class="level-orange bgc-orange">
                                        <p class="txt-century txt-white txt-size12 txt-bold">{{ formation.level.name }}</p>
                                    </div>

                                </div>

                                <div class="information-one meli-width-25">
                                    <p class="txt-center txt-century txt-white txt-size15 txt-bold">{{ formation.during }}</p>
                                </div>

                                <div class="meli-width-25">
                                    <p class="txt-center txt-century txt-white txt-size15 txt-bold">
                                        {{ formation.priceHT*(1+formation.tva) }} €
                                    </p>
                                </div>

                            </div>


                        </div>

                        <div class="img-box meli-center-center">
                            {% if formation.picture is not null %}
                                <img src="{{ asset('uploads/formations/formation-'~formation.id~'/'~formation.picture) }}"
                                     alt="{{ formation.pictureAlt }}" loading="lazy">
                            {% else %}
                                <img src="{{ asset('assets/img/logo/logo-couleur.png') }}"
                                     alt="{{ formation.pictureAlt }}" loading="lazy">
                            {% endif %}

                        </div>
                    </a>
                </div>
            {% endfor %}

        </section>

        {# PAGNIATION #}
        {% include "front-office/partials/_pagination.html.twig" %}

    </div>

{% endblock %}