{% extends "front-office/_base.html.twig" %}
{% block metaDescription %}
{{ formation.metaDescription }}
{% endblock %}
{% block script %}
<script defer src="{{ asset('assets/js/command/basket.js') }}"></script>
<script defer src="{{ asset('assets/js/formation.js') }}"></script>
{% endblock %}
{% block modal %}
{% include "front-office/partials/_basket-aside.html.twig" %}
{% endblock %}
{% block content %}
<div class="formation-read-container">
<section class="formation-read">
{# Breadcrumb #}
<div class="breadcrumb meli-section-90">
<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>
<a href="{{ path('formation_list') }}"
class="txt-century txt-orange txt-size12 txt-regular txt-underline">Formations</a>
<span class="txt-century txt-orange txt-size12 txt-regular"> > </span>
<span class="txt-century txt-orange txt-size12 txt-regular">{{ formation.name }}</span>
</div>
<article>
<div class="top">
<div class="text-box meli-section-90">
<h1 class="title txt-century txt-bold txt-size35 txt-green">
{{ formation.name }}
</h1>
<div class="intro meli-width-50">
{{ formation.introduction|raw }}
</div>
</div>
<div class="review-box meli-section-90">
<div class="review-content meli-start-center meli-width-15">
{% if formation.rating is not null %}
{% for i in 1..5 %}
{% if i <= formation.rating %}
<div class="star meli-width-10">
<img src="{{ asset('assets/img/icons/etoile-orange.png') }}" alt="1">
</div>
{% else %}
<div class="star meli-width-10">
<img src="{{ asset('assets/img/icons/etoile-vide.png') }}" alt="0">
</div>
{% endif %}
{% endfor %}
{% endif %}
{% if formation.rating|length > 0 %}
<p class="number-review txt-century txt-orange txt-bold txt-size12">({{ formation.rating|length}} avis)</p>
{% endif %}
</div>
</div>
{# FLOATTING ELEMENT #}
<div class="floating meli-width-25">
<div class="img-box meli-width-100 meli-center-center">
{% if formation.iframe is not null %}
<div class="icon-play" id="js-play-btn" data-iframe="{{ formation.iframe }}"></div>
{% endif %}
{% if formation.picture is not null %}
<img src="{{ asset('uploads/formations/formation-'~formation.id~'/'~formation.picture) }}"
alt="{{ formation.pictureAlt }}">
{% else %}
<img src="{{ asset('assets/img/logo/logo-couleur.png') }}" alt="{{ formation.pictureAlt }}">
{% endif %}
</div>
<div class="text-box bgc-green">
<p class="txt-center txt-century txt-bold txt-white txt-size30">
<span class="price-during">{{ formation.priceHT*(1+formation.tva) }} €</span>
<span class="price-during">|</span>
<span class="price-during">{{ formation.during }}</span>
</p>
<p class="level-p txt-century txt-bold txt-white txt-size15 txt-center">
<span class="icon"></span>
Niveau :
<span class="level bgc-orange">{{ formation.level.name }}</span>
</p>
<div class="button-box meli-center-center">
<a id="js-add-basket-btn"
data-url="{{ path('ajax_basket_generate_view') }}"
href="{{ path('ajax_add_basket',{'id':formation.id,'type':'formation'}) }}">
<button class="btn-base bgc-orange">
<span>
Ajouter au panier
</span>
</button>
</a>
</div>
</div>
</div>
{# END - FLOATING ELEMENT #}
</div>
<div class="content meli-section-90">
<div class="description-box meli-width-60">
{{ formation.description|raw }}
</div>
<div class="content-box">
<h2 class="txt-century txt-orange txt-size30 txt-bold">Contenu de la formation</h2>
<div class="sections meli-width-60">
{% for s in formation.section %}
<div class="item bgc-lightGreen">
<div class="title-box meli-between-center">
<h3 class="title-section txt-century txt-size12 txt-bold txt-white">
<span class="icon"></span>{{ s.name }}
</h3>
<p class="txt-century txt-size12 txt-bold txt-white">{{ s.during }}</p>
</div>
<div class="details-box">
{% for step in s.steps %}
{% set capsule = step.capsule %}
<div class="subitem bgc-green meli-between-center">
<h3 class="title-section txt-century txt-size12 txt-bold txt-white">
{{ capsule.name }}
</h3>
<p class="txt-century txt-size12 txt-bold txt-white">
{{ capsule.duringFormat }}
</p>
</div>
{% endfor %}
</div>
</div>
{% endfor %}
</div>
</div>
</div>
</article>
</section>
{% if formation.formationAssociated|length > 0 %}
<section class="formation-read-associated meli-section-90">
<h2 class="title txt-century txt-orange txt-size30 txt-bold">Formations associées</h2>
<div class="items-box meli-between-start meli-width-60">
{% for f in formation.formationAssociated %}
<div class="item meli-width-30">
<div class="img-box meli-center-center">
{% if f.picture is not null %}
<img src="{{ asset('uploads/formations/formation-'~f.id~'/mini/'~f.picture) }}"
alt="{{ f.pictureAlt }}">
{% else %}
<img src="{{ asset('assets/img/logo/logo-couleur.png') }}" alt="{{ f.pictureAlt }}">
{% endif %}
</div>
<div class="text-box bgc-green">
<h3 class="txt-century txt-bold txt-white txt-size12 txt-center">{{ f.name }}</h3>
<p class="txt-century txt-bold txt-white txt-size12 txt-center">
{{ f.priceHT*(1+f.tva) }} € | {{ f.during }}
</p>
<p class="level-p txt-century txt-bold txt-white txt-size12 txt-center">
<span class="icon"></span>
Niveau :
<span class="level bgc-orange">{{ f.level.name }}</span>
</p>
<div class="button-box meli-center-center">
<button class="btn-base bgc-orange">
<span>
Ajouter au panier
</span>
</button>
</div>
</div>
</div>
{% endfor %}
</div>
</section>
{% endif %}
</div>
<div class="meli-width-70 formation-read-line-orange-container">
<div class="formation-read-line-orange"></div>
</div>
<section class="formation-read-testimony meli-width-70">
<h2 class="title txt-dancing txt-bold txt-size30 txt-center txt-green">Témoignages clients</h2>
{% include "front-office/partials/_reviews.html.twig" %}
</section>
{% endblock %}