{# formation card #}
<div class="js-session-card formation-card h-anim lg:w-full flex flex-col" data-sessionId="{{ this.session.id }}">
<div class="px-8 py-10 rounded-xl bg-white border border-grey-100 flex flex-col gap-4 flex-grow">
<div style="background-color: {{ this.training.category.color }}" class="w-fit rounded-lg">
<p class="font-allerRegular uppercase text-sm text-white px-3 py-1.5">{{ this.training.category.name }}</p>
</div>
<p class="font-allerRegular uppercase text-base text-grey-200">{{ this.training.acronym }}</p>
<h3 class="font-allerBold text-xl">Session {{ this.session.place }}</h3>
<div class="flex flex-col gap-2">
<div class="flex flex-row items-center gap-2">
<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="M20 10C20 14.4183 12 22 12 22C12 22 4 14.4183 4 10C4 5.58172 7.58172 2 12 2C16.4183 2 20 5.58172 20 10Z"
stroke="#8c8c8c" stroke-width="1.5"></path>
<path d="M12 11C12.5523 11 13 10.5523 13 10C13 9.44772 12.5523 9 12 9C11.4477 9 11 9.44772 11 10C11 10.5523 11.4477 11 12 11Z"
fill="#8c8c8c" stroke="#8c8c8c" stroke-width="1.5" stroke-linecap="round"
stroke-linejoin="round"></path>
</svg>
<p class="font-allerRegular text-sm text-grey-200"> {{ this.session.place }} </p>
</div>
<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.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>
<p class="font-allerRegular text-sm text-grey-200">À plein temps : {{ this.session.durationInMonth }}
mois</p>
</div>
<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">
Du {{ this.session.startDate|format_datetime(pattern="dd/MM/yyyy") }}
au {{ this.session.endDate|format_datetime(pattern="dd/MM/yyyy") }}</p>
</div>
</div>
<div class="flex justify-center items-center w-full relative z-30">
<a href="#formation-form" class="js-btn-registration cta small-cta w-full"
style="color: white; background-color: {{ this.training.category.color }}">S'inscrire à la
formation</a>
</div>
{# <div class="flex justify-center items-center w-full relative z-30">#}
{# <a href="{{ asset('upload/pdf/' ~ this.session.trainingFile) }}"#}
{# class="js-btn-registration cta small-cta w-full"#}
{# style="color: white; background-color: {{ this.training.category.color }}">Télécharger le programme</a>#}
{# </div>#}
<div class="flex justify-center items-center w-full relative z-30">
<button type="button" class="btn-catalog cta small-cta w-full" style="color: white; background-color: {{ this.training.category.color }}" data-bs-toggle="modal" data-bs-target="#catalogModalSession{{ this.session.id }}" data-url="/lead-catalog-session/submit">
Télécharger le programme
</button>
</div>
</div>
</div>