<div {{ attributes.add(stimulus_controller('training_filter')) }}>
<section class="formations-diplomantes">
<div class="p-horizontal p-vertical relative ">
<div class="relative z-10 flex flex-col gap-12 justify-center items-center">
<h2 class="font-allerBold uppercase text-center text-2xl">Trouvez votre <span class="text-blue-500"><br
class="md:hidden">prochaine formation</span>
</h2>
{# TODO if sur xl:flex-row #}
<div class="lg:py-5 w-full flex flex-col {% if this.type != 'short' %} xl:flex-row {% endif %} gap-8 lg:items-center items-start justify-start lg:justify-center">
<ul class="flex gap-4 whitespace-nowrap font-AllerRegular text-grey-200 flex-wrap lg:max-xl:flex-nowrap"
style="flex-wrap: wrap;">
{% if this.type == 'short' %}
{% for category in this.AllShortTrainingCategories %}
<li class="mb-4">
<input class="hidden" data-model="category[]" type="checkbox" id="{{ category["slug"] }}"
name="category" value="{{ category["id"] }}"/>
<label class="cursor-pointer transition-all px-5 py-3 border border-grey-100 rounded-lg"
for="{{ category["slug"] }}">{{ category[1] }}</label>
</li>
{% endfor %}
{% else %}
{% for category in this.allDiplomaTrainingCategories %}
<li class="mb-4">
<input class="hidden" data-model="category[]" type="checkbox" id="{{ category["slug"] }}"
name="category" value="{{ category["id"] }}"/>
<label class="cursor-pointer transition-all px-5 py-3 border border-grey-100 rounded-lg "
for="{{ category["slug"] }}">{{ category[1] }}</label>
</li>
{% endfor %}
{% endif %}
</ul>
<div class="flex flex-col lg:flex-row gap-8 w-full lg:w-fit">
{% if this.type != 'short' %}
<svg class="hidden xl:block" xmlns="http://www.w3.org/2000/svg" width="1" height="48"
viewBox="0 0 1 48">
<line data-name="Ligne" y2="48" transform="translate(0.5)" fill="none"
stroke="#d8d8d8" stroke-width="1"/>
</svg>
{% endif %}
<div class="flex gap-4 items-center">
<input data-model="cpf" type="checkbox" id="CPF" name="CPF">
<label class="font-allerRegular text-lg whitespace-nowrap" for="CPF">Éligible CPF</label>
</div>
{% if this.type == 'short' %}
<div class="flex gap-4 items-center">
<input data-model="openToAll" type="checkbox" id="openToAll" name="openToAll">
<label class="font-allerRegular text-lg whitespace-nowrap" for="openToAll">Tous
public</label>
</div>
<div class="flex gap-4 items-center">
<input data-model="publicInDifficulty" type="checkbox" id="publicInDifficulty"
name="publicInDifficulty">
<label class="font-allerRegular text-lg whitespace-nowrap" for="publicInDifficulty">Public
en difficulté</label>
</div>
{% endif %}
<svg class="hidden xl:block" xmlns="http://www.w3.org/2000/svg" width="1" height="48"
viewBox="0 0 1 48">
<line data-name="Ligne" y2="48" transform="translate(0.5)" fill="none"
stroke="#d8d8d8" stroke-width="1"/>
</svg>
{% if this.type == 'short' %}
<select data-model="durationInDay"
class=" w-full lg:w-fit decoration-0 font-AllerRegular px-6 py-4 border border-grey-100 rounded-lg text-lg"
name="duree" id="duree-select">
<option value="0">Pour quelle durée ?</option>
<option value="0.5">0.5 jours</option>
<option value="1">1 jours</option>
<option value="1.5">1.5 jours</option>
<option value="2">2 jours</option>
<option value="3">3 jours</option>
<option value="5">5 jours</option>
<option value="12">12 jours</option>
</select>
{% else %}
<select data-model="durationInMonth"
class=" w-full lg:w-fit decoration-0 font-AllerRegular px-6 py-4 border border-grey-100 rounded-lg text-lg"
name="duree" id="duree-select">
<option value="0">Pour quelle durée ?</option>
<option value="9">9 mois</option>
<option value="10">10 mois</option>
<option value="11">11 mois</option>
<option value="12">12 mois</option>
<option value="14">14 mois</option>
<option value="18">18 mois</option>
</select>
{% endif %}
</div>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-8 justify-center"
style="flex-wrap: wrap;">
{% if this.type == 'short' %}
{% if this.shortTrainingFilter is empty %}
<div class="font-allerLight italic text-pink-500 h-full"> Aucun résultat ne correspond à votre
recherche. <button data-action="live#action" data-action-name ="resetFilterShort" class="underline cursor-pointer">Réinitialiser les filtres</button> </div>
{% else %}
{% for training in this.shortTrainingFilter %}
{{ component('cards:formation_card' , {id : training.id}) }}
{% endfor %}
{% endif %}
{% else %}
{% if this.diplomaTrainingFilter is empty %}
<div class="font-allerLight italic text-pink-500 h-full"> Aucun résultat ne correspond à votre
recherche. <button data-action="live#action" data-action-name ="resetFilterDiploma" class="underline cursor-pointer">Réinitialiser les filtres</button> </div>
{% else %}
{% for training in this.diplomaTrainingFilter %}
{{ component('cards:formation_card' , {id : training.id}) }}
{% endfor %}
{% endif %}
{% endif %}
</div>
</div>
</div>
</section>
</div>