{namespace core = TYPO3\CMS\Core\ViewHelpers}

<div class="col-md-cal nano has-scrollbar">
	<div class="nano-content" tabindex="0" style="right: -5px;">
		<div class="category-list">
			<span class="info-filtre">Filtrer vos listes en cliquant sur les catégories </span>		
			<div class="text-right save-btn-container">
				<form data-validate="html5" enctype="multipart/form-data" name="category" class="formCategorySave" action="" method="post">
					<input class="catVal" type="hidden" name="tx_ifsttar_category" value="">
					<input class="btn btn-success btn-lg categorySave" type="submit" value="Enregistrer">
				</form>
				<style>
					.cal-day-container,
					.cal-event-item {
						display: none;
					}
				</style>
				<script>
					$(document).ready(function() {
						$.ajax({
							method: 'POST',
							url: '/?eID=newsCategory'
						})
						.done(function(msg) {
							if (msg) {

								var categoryFilter = msg.split(',');

							// Pour chaque catégorie parente
							$('.category-list .category-container').each(function() {
								$(this).css('opacity', '0.4');
								$(this).children('.category-children-container').children('span.category').css('opacity', '1');
							});

							// Pour chaque catégorie
							$('.category-list span.category').each(function() {
								var category = $(this).attr('data-category');
								var container = $(this).parent('.category-children-container').parent('.category-container');

								// Si la catégorie correspond à la liste des categories enregistrées
								if (($.inArray(category, categoryFilter) != -1)) {
									// La catégorie est activée
									$(this).addClass('active');
									$(this).css('opacity', '1');
									// La catégorie parente est activée
									container.addClass('active');
									container.css('opacity', '1');
								}
							});

							// Pour chaque catégorie parente active
							$('.category-list .category-container.active').each(function() {
								$(this).children('.category-children-container').children('span.category').not('.active').css('opacity', '0.4');
							});

							// Pour chaque évènement dans la liste (List view event only)
							$('.container-event-list .news').each(function() {
								var eventItem = $(this);
								// Récupération de toutes les categories attachée à l'évènement
								var listCategory = $(this).attr('data-category');
								listCategory = listCategory.substring(0, listCategory.length - 1);
								var aCategory = listCategory.split(',');
								aCategory = $.unique(aCategory);

								// Si le tableau contient au moins une catégorie
								if (categoryFilter.length > 0) {
									// Pour chaque catégorie présente dans le tableau
									$.each(categoryFilter, function(index, value) {
										// Si la catégorie correspond à la liste des categories attachée à l'évènement
										if (($.inArray(value, aCategory) != -1)) {
											// L'évènement est marqué à afficher
											eventItem.removeClass('hide-item');
											// On sort de la boucle
											return false;
										}
										// Sinon, l'évènement est marqué à cacher
										else {
											eventItem.addClass('hide-item');
										}
									});
								}
								// Si le tableau est vide
								else {
									// Tous les évènement sont marqué à afficher
									eventItem.removeClass('hide-item');
								}

								// Si l'évènement est marqué à cacher
								if (eventItem.hasClass('hide-item')) {
									// On cache l'évènement
									eventItem.slideUp(300);
									eventItem.css('opacity', '0');
								}
								else {
									// Sinon on l'affiche
									eventItem.slideDown(300);
									eventItem.css('opacity', '1');
								}
							});

							// Pour chaque actus ou évènements dans la liste (List view news + event)
							$('.container-news-list .news').each(function() {
								var eventItem = $(this);
								// Récupération de toutes les categories attachée à l'item
								var listCategory = $(this).attr('data-category');
								listCategory = listCategory.substring(0, listCategory.length - 1);
								var aCategory = listCategory.split(',');
								aCategory = $.unique(aCategory);

								// Si le tableau contient au moins une catégorie
								if (categoryFilter.length > 0) {
									// Pour chaque catégorie présente dans le tableau
									$.each(categoryFilter, function(index, value) {
										// Si la catégorie correspond à la liste des categories attachée à l'item
										if (($.inArray(value, aCategory) != -1)) {
											// L'item est marqué à afficher
											eventItem.removeClass('hide-item');
											// On sort de la boucle
											return false;
										}
										// Sinon, l'item est marqué à cacher
										else {
											eventItem.addClass('hide-item');
										}
									});
								}
								// Si le tableau est vide
								else {
									// Tous les item sont marqué à afficher
									eventItem.removeClass('hide-item');
								}
							});

							// Pour chaque jour dans la liste (List view news + event)
							$('.cal-day-container').each(function() {
								var newsItem = $(this);

								// Si tous les items d'un même jour sont marqué à cacher
								if (newsItem.children('.news.hide-item').length == newsItem.children('.news').length) {
									// Tout le bloc jour est caché
									newsItem.slideUp(300);
									newsItem.css('opacity', '0');
								}
								// Si au moins un item est marqué à caché
								else if (newsItem.children('.news.hide-item').length >= 1) {
									// Pour chaque item marqué à cacher
									newsItem.children('.news.hide-item').each(function() {
										// on cache l'item
										$(this).slideUp(300);
										$(this).css('opacity', '0');
									});
									// Affichage du bloc jour
									newsItem.slideDown(300);
									newsItem.css('opacity', '1');
								}
								// Si aucun item n'est marqué à cacher
								else {
									// Pour chaque item
									newsItem.children('.news').each(function() {
										// Affichage de l'item
										$(this).slideDown(300);
										$(this).css('opacity', '1');
									});
									// Affichage de tous les bloc jour
									newsItem.slideDown(300);
									newsItem.css('opacity', '1');
								}
							});
						}
						else {
							$('.cal-day-container').each(function() {
								$(this).css('display', 'block');
							});
							
							$('.cal-event-item').each(function() {
								$(this).css('display', 'block');
							});
						}
					});
});
</script>
</div>


<div class="category-container category-institut active" style="opacity: 1;">
	<div class="category-parent-container">
		<span class="category-parent"><i class="fa fas fa-envelope"></i></span>
	</div>
	<div class="category-children-container">

		<span class="category" data-category="77" data-category-parent="43" style="opacity: 0.4;">
			Administratif
		</span>

	</div>
</div>
<div class="category-container category-recherche active" style="opacity: 1;">
	<div class="category-parent-container">
		<span class="category-parent"><i class="fa fas fa-user-friends"></i></span>
	</div>
	<div class="category-children-container">

		<span class="category active" data-category="46" data-category-parent="44" style="opacity: 1;">
			Appel à projet
		</span>

		<span class="category active" data-category="101" data-category-parent="44" style="opacity: 1;">
			Conférence/Colloque/JT
		</span>
	</div>
</div>

</div>
</div></div>