{# formation card #}
<a href="{{ path('single_training' , {'slug' : this.formationCard.slug }) }}" class="formation-card h-anim lg:w-full flex flex-col">
<img class="w-full rounded-t-xl"
src="{{ asset('upload/images/training/card/' ~ this.formationCard.cardImageName)|imagine_filter('card_img') }}"
alt="formation card image">
<div class="px-8 py-10 rounded-b-xl bg-white border border-grey-100 flex flex-col gap-4 flex-grow">
<div style="background-color: {{ this.formationCard.category.color }}" class="w-fit rounded-lg">
<p class="font-allerRegular uppercase text-sm text-white px-3 py-1.5">{{ this.formationCard.category.name }}</p>
</div>
{% if this.formationCard.acronym is defined %}
<p class="font-allerRegular uppercase text-base text-grey-200">{{ this.formationCard.acronym }}</p>
{% endif %}
<h3 class="font-allerBold text-xl">{{ this.formationCard.title|slice(0, 65) ~ '...' }}</h3>
<div class="flex flex-col gap-2">
<div class="flex flex-row items-center gap-2">
{% if this.formationCard.certificate is defined %}
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="13.714" viewBox="0 0 16 13.714">
<path d="M5.161,12.257V15.3l5.089,2.911L15.339,15.3V12.257L10.25,15.168ZM10.25,4.5l-8,4.571,8,4.571L16.8,9.9v5.264H18.25v-6.1Z"
transform="translate(-2.25 -4.5)"
fill="#8c8c8c"/>
</svg>
<p class="font-allerRegular text-sm text-grey-200"> {{ this.formationCard.certificate }} </p>
{% endif %}
</div>
<div class="flex flex-row items-center gap-2">
{% if this.formationCard.sessions is defined and this.formationCard.price is defined %}
<svg width="16px" height="16px" stroke-width="2" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" color="#8c8c8c">
<path d="M18.5 4.80423C17.4428 4.28906 16.2552 4 15 4C10.5817 4 7 7.58172 7 12C7 16.4183 10.5817 20 15 20C16.2552 20 17.4428 19.7109 18.5 19.1958" stroke="#8c8c8c" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
<path d="M5 10H16" stroke="#8c8c8c" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path><path d="M5 14H16" stroke="#8c8c8c" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
</svg>
<p class="font-allerRegular text-sm text-grey-200">Prix : {{ this.formationCard.price }} €</p>
{% else %}
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16.931">
<path d="M17.837,6.75H16.3v1a.322.322,0,0,1-.308.334h-.615a.322.322,0,0,1-.308-.334v-1H7.683v1a.322.322,0,0,1-.308.334H6.76a.322.322,0,0,1-.308-.334v-1H4.913A1.612,1.612,0,0,0,3.375,8.418V19.763a1.612,1.612,0,0,0,1.538,1.668H17.837a1.612,1.612,0,0,0,1.538-1.668V8.418A1.612,1.612,0,0,0,17.837,6.75Zm.308,12.512a.806.806,0,0,1-.769.834h-12a.806.806,0,0,1-.769-.834V11.755a.322.322,0,0,1,.308-.334H17.837a.322.322,0,0,1,.308.334Z"
transform="translate(-3.375 -4.5)" fill="#8c8c8c"/>
<path d="M11.25,5.063a.564.564,0,0,0-.562-.562H9.563A.564.564,0,0,0,9,5.063V6.75h2.25Z"
transform="translate(-6.135 -4.5)" fill="#8c8c8c"/>
<path d="M27,5.063a.564.564,0,0,0-.562-.562H25.313a.564.564,0,0,0-.562.563V6.75H27Z"
transform="translate(-13.865 -4.5)" fill="#8c8c8c"/>
</svg>
{% if this.formationCard.durationInMonth is defined %}
<p class="font-allerRegular text-sm text-grey-200">À plein temps : {{ this.formationCard.durationInMonth }} mois</p>
{% else %}
{% if this.formationCard.durationInDayMax != null %}
<p class="font-allerRegular text-sm text-grey-200"> De {{ this.formationCard.durationInDayMin }} à {{ this.formationCard.durationInDayMax }} jours</p>
{% else %}
{% if this.formationCard.durationInDayMin == 1 %}
<p class="font-allerRegular text-sm text-grey-200"> {{ this.formationCard.durationInDayMin }} jour</p>
{% else %}
<p class="font-allerRegular text-sm text-grey-200"> {{ this.formationCard.durationInDayMin }} jours</p>
{% endif %}
{% endif %}
{% endif %}
{% endif %}
</div>
{% if this.formationCard.sessions is defined and this.formationCard.sessions is not empty %}
<div class="flex flex-row items-center gap-2">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
<g transform="translate(-3.375 -3.375)">
<path d="M11.367,3.375a8,8,0,1,0,8.008,8A8,8,0,0,0,11.367,3.375Zm.008,14.4a6.4,6.4,0,1,1,6.4-6.4A6.4,6.4,0,0,1,11.375,17.775Z"
fill="#8c8c8c"/>
<path d="M17.738,10.688h-1.2v4.8l4.2,2.519.6-.985-3.6-2.135Z"
transform="translate(-5.963 -3.313)" fill="#8c8c8c"/>
</g>
</svg>
<p class="font-allerRegular text-sm text-grey-200">Prochaine session
le {{ this.dateNextSession|date('d/m/y') }}</p>
</div>
{% endif %}
{% if this.formationCard.participantNumber is defined %}
<div class="flex flex-row items-center gap-2">
<svg xmlns="http://www.w3.org/2000/svg" width="16.5" height="14.5" viewBox="0 0 16.5 14.5">
<path d="M12.75,12A2.25,2.25,0,1,0,10.5,9.75,2.241,2.241,0,0,0,12.75,12Zm-6,0A2.25,2.25,0,1,0,4.5,9.75,2.241,2.241,0,0,0,6.75,12Zm0,1.5C5,13.5,1.5,14.378,1.5,16.125V22H12V16.125C12,14.378,8.5,13.5,6.75,13.5Zm6,0c-.218,0-.465.015-.728.038A3.165,3.165,0,0,1,13.5,16.125V22H18V16.125C18,14.378,14.5,13.5,12.75,13.5Z"
transform="translate(-1.5 -7.5)" fill="#8c8c8c"/>
</svg>
<p class="font-allerRegular text-sm text-grey-200">
{{ this.formationCard.participantNumber }}</p>
</div>
<div class="flex flex-row items-center gap-2">
<svg xmlns="http://www.w3.org/2000/svg" width="16.5" height="16.5" viewBox="0 0 16.5 16.5">
<path d="M8.25.562a8.25,8.25,0,1,0,8.25,8.25A8.249,8.249,0,0,0,8.25.562Zm-5.1,5.353,1.161-.166L4.824,4.7a.257.257,0,0,1,.462,0L5.8,5.749l1.161.166a.259.259,0,0,1,.143.439l-.845.818.2,1.161a.249.249,0,0,1-.366.263L5.056,8.057,4.015,8.6a.249.249,0,0,1-.366-.263l.2-1.161L3,6.357a.261.261,0,0,1,.143-.442Zm5.1,8.752c-2.016,0-4.474-1.274-4.784-3.1a.534.534,0,0,1,.689-.6,14.379,14.379,0,0,0,4.1.506,14.379,14.379,0,0,0,4.1-.506.533.533,0,0,1,.689.6C12.724,13.393,10.266,14.667,8.25,14.667ZM13.5,6.354l-.845.818.2,1.161a.249.249,0,0,1-.366.263l-1.041-.539L10.4,8.6a.249.249,0,0,1-.366-.263l.2-1.161-.845-.818a.26.26,0,0,1,.143-.439L10.7,5.752,11.211,4.7a.257.257,0,0,1,.462,0l.516,1.051,1.161.166a.256.256,0,0,1,.146.436Z"
transform="translate(0 -0.563)" fill="#8c8c8c"/>
</svg>
<p class="font-allerRegular text-sm text-grey-200">{{ this.formationCard.marketLabel }}</p>
</div>
{% endif %}
</div>
</div>
</a>