{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">
		 <p class='info-filtre'>Filtrer vos listes en cliquant sur les catégories </p>
		 <div class="text-right reset-btn-container">
			<form data-validate="html5" enctype="multipart/form-data" name="category" class="formCategorySave" action="" method="post">
				<input class="catVal" id="catValReset" type="hidden" name="tx_ifsttar_category" value="">
				<input class="btn btn-default btn-lg categoryReset" type="submit" value="Initialiser">
			</form>
		</div>
		 <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">
				<f:cObject typoscriptObjectPath="lib.folderCurrent"/>
			</form>
			<script>
				jQuery(document).ready(function() {
					folderCurrent = $('.folderCurrent').html();
					var categoryFilter = folderCurrent.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');
						}
					});
				});
			</script>
		</div>

		<div class="category-list">
			<f:cObject typoscriptObjectPath="lib.newsletters_folders"/>
		</div>
	</div>
	</div>
</div>

<div class="col-md-list nano has-scrollbar">
	<div class="nano-content">
		<f:cObject typoscriptObjectPath="lib.navigation.breadcrumb"/>
		<f:cObject typoscriptObjectPath="lib.favButton"/>
		<f:cObject typoscriptObjectPath="lib.pageTitle"/>
		<f:cObject typoscriptObjectPath="lib.allNewsletters"/>
	</div>
</div>