window.addEventListener("load", function () {
	let DateTime = luxon.DateTime;
	let newsData = 1;
	let postsPerPage = parseInt(document.querySelector('#js-posts-per-page') ? document.querySelector('#js-posts-per-page').value : '');
	let tagsWrapperMobile = document.querySelector('.js-selected-tags.mobile');
	let tagsWrapperDesktop = document.querySelector('.js-selected-tags.desktop');
	const MONTHS = Array(
		'January',
		'February',
		'March',
		'April',
		'May',
		'June',
		'July',
		'August',
		'September',
		'October',
		'November',
		'December'
	);

	const whitelistPattern = /^[A-Za-z0-9&, -]+$/;
	const paramsWhitelist = [
		'categories',
		'regions',
		'archive',
		'keywords',
		'utm_campaign',
		'utm_content',
		'utm_medium',
		'utm_source',
		'utm_term',
		'utm_zcid'
	];

	// Fade In
	let fadeIn = (target, duration = 500) => {
		target.style.opacity = 0;
		target.style.removeProperty('display');
		let display = window.getComputedStyle(target).display;

		if (display === 'none')
			display = 'block';

		target.style.display = display;
		target.style.transitionProperty = "opacity";
		target.style.transitionDuration = duration + 'ms';
		window.setTimeout(() => {
			target.style.opacity = 1;
			window.setTimeout(() => {
				target.style.removeProperty('opacity');
				target.style.removeProperty('transition-duration');
				target.style.removeProperty('transition-property');
			}, duration);
		}, 1);
	}

	// Fade Out
	let fadeOut = (target, duration = 500) => {
		target.style.transitionProperty = 'opacity';
		target.style.transitionDuration = duration + 'ms';
		target.style.opacity = 0;
		window.setTimeout(() => {
			target.style.display = 'none';
			target.style.removeProperty('opacity');
			target.style.removeProperty('transition-duration');
			target.style.removeProperty('transition-property');
		}, duration);
	}

	// Fade Toggle
	let fadeToggle = (target, duration = 500) => {
		if (window.getComputedStyle(target).display === 'none') {
			return fadeIn(target, duration);
		} else {
			return fadeOut(target, duration);
		}
	}

	// Slide Down
	let slideDown = (target, duration=300) => {
		target.style.removeProperty('display');
		let display = window.getComputedStyle(target).display;
		if (display === 'none') display = 'block';
		target.style.display = display;
		let height = target.offsetHeight;
		target.style.overflow = 'hidden';
		target.style.height = 0;
		target.style.paddingTop = 0;
		target.style.paddingBottom = 0;
		target.style.marginTop = 0;
		target.style.marginBottom = 0;
		target.offsetHeight;
		target.style.boxSizing = 'border-box';
		target.style.transitionProperty = "height, margin, padding";
		target.style.transitionDuration = duration + 'ms';
		target.style.height = height + 'px';
		target.style.removeProperty('padding-top');
		target.style.removeProperty('padding-bottom');
		target.style.removeProperty('margin-top');
		target.style.removeProperty('margin-bottom');
		window.setTimeout( () => {
		target.style.removeProperty('height');
		target.style.removeProperty('overflow');
		target.style.removeProperty('transition-duration');
		target.style.removeProperty('transition-property');
		}, duration);
	}

	// Slide Up
	let slideUp = (target, duration=300) => {
		target.style.transitionProperty = 'height, margin, padding';
		target.style.transitionDuration = duration + 'ms';
		target.style.boxSizing = 'border-box';
		target.style.height = target.offsetHeight + 'px';
		target.offsetHeight;
		target.style.overflow = 'hidden';
		target.style.height = 0;
		target.style.paddingTop = 0;
		target.style.paddingBottom = 0;
		target.style.marginTop = 0;
		target.style.marginBottom = 0;
		window.setTimeout( () => {
			target.style.display = 'none';
			target.style.removeProperty('height');
			target.style.removeProperty('padding-top');
			target.style.removeProperty('padding-bottom');
			target.style.removeProperty('margin-top');
			target.style.removeProperty('margin-bottom');
			target.style.removeProperty('overflow');
			target.style.removeProperty('transition-duration');
			target.style.removeProperty('transition-property');
		}, duration);
	}

	// Slide Toggle
	let slideToggle = (target, duration = 300) => {
		if (window.getComputedStyle(target).display === 'none') {
			return slideDown(target, duration);
		} else {
			return slideUp(target, duration);
		}
	}

	// Security functions
	let fixedEncodeURIComponent = function(str) {
		return encodeURIComponent(str).replace(/[!'()*]/g, function(c) {
			return '%' + c.charCodeAt(0).toString(16).toUpperCase();
		});
	}

	let sterilizeParams = async function () {
		let urlParams = new URLSearchParams(window.location.search);

		let urlParamKeys = [];
		for (let key of urlParams.keys()) {
			urlParamKeys.push(key);
		}

		urlParamKeys.forEach((key) => {
			if (!paramsWhitelist.includes(key)) {
				urlParams.delete(key);
			}
		});

		paramsWhitelist.forEach((paramKey) => {
			if (urlParams.has(paramKey)) {
				if (!whitelistPattern.test(urlParams.get(paramKey))) {
					urlParams.delete(paramKey);
				}
			}
		});
		if (urlParams.toString()) {
			history.replaceState(null, null, "?"+urlParams.toString());
		} else {
			history.replaceState(null, null, window.location.pathname);
		}

		return true;
	}

	// Check if specific value is within an array
	function checkValue(value,arr){
		for(let i=0; i<arr.length; i++){
			if(fixedEncodeURIComponent(arr[i]) === fixedEncodeURIComponent(value.replace('&amp;', '&'))) {
				return true;
			}
		}
		return false;
	}

	// Header scroll animation
	function makeStickyHeader() {
		if (window.pageYOffset >= 150) {
			document.querySelector('header').classList.add("sticky");
		}
		document.addEventListener('scroll', function () {
			if (window.pageYOffset >= 150) {
				document.querySelector('header').classList.add("sticky");
			} else {
				document.querySelector('header').classList.remove("sticky");
			}
		});
	}

	// Get news data
	async function getNewsData() {
		let formData = new FormData();
		formData.append('action', 'get_news');

		return await fetch(ajaxURL, {
			method: "POST",
			body: formData
		})
		.then((response) => {
			return response.json();
		})
		.then((data) => {
			return data;
		})
		.catch((error) => {
			console.log(error);
		});
	}

	// News data in global variable
	async function getArticles() {
		newsData =  await getNewsData();
		if (newsData) {
			const archive = createArchiveListObject(newsData);
			const displayed = await displayArchiveList(archive);
			if (displayed === true) {
				updateOptionsFilters();
				updateURL();
			}
		}
	}

	// Get news HTML
	function getCard(item, dataType = 'card-view') {
		let page 		= document.querySelector('.zm-news-grid') ? document.querySelector('.zm-news-grid').dataset.page : '';
		let newsGrid 	= '';
		let link_text 	= item.has_video === true ? 'Watch Video' : 'Read More';
		page == 'home' ? newsGrid = 'col-md-6 col-lg-4' : newsGrid = 'col-md-6 col-lg-4 col-xl-3';

		let singleNewsHTML = ``;
		// Display posts in card-view
		if (dataType == 'card-view') {
			let category_name 	= item.has_thumbnail === true ? '' : `<h2>${item.categories[0]}</h2>`;
			let video_class 	= item.has_video === true ? 'video-post' : '';
			let video_icon 		= item.has_video === true ? `<a href="${item.permalink}" class="d-block" target="${item.target}"><div class="video-icon"><svg width="53" height="56" viewBox="0 0 53 56" fill="none" xmlns="http://www.w3.org/2000/svg"><g filter="url(#filter0_d_167_41377)"><path d="M36 22.2679C37.3333 23.0377 37.3333 24.9622 36 25.732L19.5 35.2583C18.1667 36.0281 16.5 35.0659 16.5 33.5263L16.5 14.4737C16.5 12.9341 18.1667 11.9719 19.5 12.7417L36 22.2679Z" fill="#0B5CFF"/></g><defs><filter id="filter0_d_167_41377" x="0.5" y="0.470703" width="52.5" height="55.0585" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/><feOffset dy="4"/><feGaussianBlur stdDeviation="8"/><feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.16 0"/><feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_167_41377"/><feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_167_41377" result="shape"/></filter></defs></svg></div></a>` : '';
			singleNewsHTML += `
			<div class="${newsGrid}">
				<div class="single-news">
					<a href="${item.permalink}" target="${item.target}">
						<div class="news-thumbnail">
							<img src="${item.thumbnail}" alt="zoom-img" loading="lazy" width="413" height="232">
							${category_name}
						</div><!--/.news-thumbnail-->
					</a><!--/.a-->
					<div class="news-details ${video_class}">
						${video_icon}
						<div class="details d-flex align-items-center">
							<span class="post-category"><a href="/news/?categories=${item.categories[0]}">${item.categories[0]}</a></span>
							<span class="post-date">${item.date.dateFormatted}</span>
						</div><!--/.details-->
						<h4>${item.title}</h4>
						<p>${item.description}</p>
						<a href="${item.permalink}" target="${item.target}" title="${link_text}" class="btn-zoom btn-zoom-primary-outline">${link_text}</a>
					</div><!--/.news-details-->
				</div><!--/.single-news-->
			</div><!--/.col-md-6-->`;

		} else {
			// Display posts in list-view
			singleNewsHTML += `
			<div class="single-news">
				<div class="news-details">
					<div class="details d-flex align-items-center">
						<span class="post-category"><a href="/news/?categories=${item.categories[0]}">${item.categories[0]}</a></span>
						<span class="post-date">${item.date.dateFormatted}</span>
					</div><!--/.details-->
					<a href="${item.permalink}" target="${item.target}">
						<h4>${item.title}</h4>
						<p>${item.description}</p>
					</a><!--/.a-->
				</div><!--/.news-details-->
				<div class="cta-container">
					<a href="${item.permalink}" target="${item.target}" title="${link_text}" class="btn-zoom btn-zoom-primary-outline">${link_text}</a>
				</div><!--/.cta-container-->
			</div><!--/.single-news-->`;
		}

		return singleNewsHTML;
	}

	// Load all news
	function loadAllNews(newsData, start = 0, end = postsPerPage) {
		let content_wrapper = document.querySelectorAll('.js-content');
		if (content_wrapper) {
			content_wrapper.forEach(element => {
				// Get data-content view
				let dataType = element.dataset.content;

				if (newsData) {
					let newsHTML = ``;
					newsData.slice(start, end).forEach(item => {
						newsHTML += getCard(item, dataType);
					});
					// Sanitize HTML
					let sanitize_newsHTML = DOMPurify.sanitize(newsHTML, { ADD_ATTR: ['target']});
					element.innerHTML = sanitize_newsHTML;
				}
			});
		}
	}

	// Filter news
	function filterList(newsData) {
		let queryParams 	= new URLSearchParams(window.location.search);
		let results 		= [];
		let categories		= queryParams.has('categories') ? queryParams.get('categories').split(',') : [''];
		let regions			= queryParams.has('regions') ? queryParams.get('regions').split(',') : [''];
		let archive 		= queryParams.has('archive') ? queryParams.get('archive').split(',') : [''];
		let searchKeywords 	= queryParams.has('keywords') ? queryParams.get('keywords').toLowerCase() : '';
		let keywords 		= fixedEncodeURIComponent(searchKeywords);
		// Hide loader
		let cardsLoader = document.querySelector('.cards-loader');

		if (cardsLoader) {
			cardsLoader.style.display = 'block';
		}

		// Filtering news
		if (newsData) {
			newsData.forEach((item) => {
				let postDate = item.date.dateISO;
				let postDateISO = DateTime.fromISO(postDate);
				let postYear = postDateISO.year;
				let postMonth = postDateISO.month;

				let filters = {
					categories: false,
					regions: false,
					archive: false,
					text: false,
				}

				// Categories filter
				if (categories.length === 1 && categories[0] === '') {
					filters.categories =  true;
				} else {
					item.categories.forEach((element) => {
						if (checkValue(element, categories)) {
							filters.categories =  true;
						}
					});
				}

				// Regions filter
				if (regions.length === 1 && regions[0] === '') {
					filters.regions =  true;
				} else {
					item.regions.forEach((element) => {
						if (checkValue(element, regions)) {
							filters.regions =  true;
						}
					});
				}

				// Archive filter
				if (archive.length === 1 && archive[0] === '') {
					filters.archive =  true;
				} else {
					archive.forEach((date) => {
						let dateArr = date.split('-');
						if (dateArr.length === 1) { //Only year
							let filterYear = parseInt(dateArr[0]);
							if ( filterYear === postYear) {
								filters.archive = true;
							}
						} else { //Both year and month
							let filterYear = parseInt(dateArr[0]);
							let filterMonth = parseInt(dateArr[1]);
							if ( filterYear === postYear && filterMonth === postMonth ) {
								filters.archive = true;
							}
						}
					});
				}

				// Keywords filter
				if (keywords === '') {
					filters.text = true;
				} else {
					let text = item.title + ' ' + item.description + ' ' + item.categories.join() + ' ' + item.regions.join();
					text = fixedEncodeURIComponent(text);

					if (text.toLowerCase().indexOf(keywords) >= 0) {
						filters.text = true;
					}
				}

				if (filters.categories && filters.regions && filters.archive && filters.text) {
					results.push(item);
				}
			});

			// Load results
			if (results.length > 0) {
				// Hide loader
				if (cardsLoader) {
					cardsLoader.style.display = 'none';
				}
				loadAllNews(results);
				createPagination(results);
				noNewsFoundMsg('hide');
			} else {

				// Display message 'No news found'
				if (cardsLoader) {
					cardsLoader.style.display = 'none';
				}

				let content_wrapper = document.querySelectorAll('.js-content');
				content_wrapper.forEach(element => {
					element.innerHTML = '';
				});

				noNewsFoundMsg('show');
				deletePagination();
			}
		}
	}

	// Shows / hides no 'No news found!' message
	function noNewsFoundMsg(action) {
		let noNewsFound = document.querySelector('.no-news-found');
		if (noNewsFound) {
			if (action === 'show') {
				noNewsFound.classList.remove('d-none');
			} else {
				noNewsFound.classList.add('d-none');
			}
		}
	}

	// Update List
	function updateURL() {
		let queryParams = new URLSearchParams(window.location.search);

		// Date filters
		let filtersArchive = Array();
		let activeOptionsArchive = document.querySelectorAll('.js-filter-archive .js-list-item.active-option');
		if (activeOptionsArchive) {
			activeOptionsArchive.forEach(element => {
				let dataOption = element.dataset.option;
				if (dataOption) {
					filtersArchive.push(dataOption.trim());
				}
			});
			filtersArchive = filtersArchive.join(',');

			if (filtersArchive.length > 0) {
				queryParams.set('archive', filtersArchive);
			} else {
				queryParams.delete('archive');
			}
		}

		// Category filters
		let filtersCategories = Array();
		let activeOptionsCategory = document.querySelectorAll('.js-filter-category .js-list-item.active-option');
		if (activeOptionsCategory) {
			activeOptionsCategory.forEach(element => {
				let dataOption = element.dataset.option;
				if (dataOption) {
					filtersCategories.push(dataOption.trim());
				}
			});
			filtersCategories = filtersCategories.join(',');

			if (filtersCategories.length > 0) {
				queryParams.set('categories', filtersCategories);
			} else {
				queryParams.delete('categories');
			}
		}

		// Region filters
		let filtersRegion = Array();
		let activeOptionsRegion = document.querySelectorAll('.js-filter-region .js-list-item.active-option');
		if (activeOptionsRegion) {
			activeOptionsRegion.forEach(element => {
				let dataOption = element.dataset.option;
				filtersRegion.push(dataOption.trim());
			});
			filtersRegion = filtersRegion.join(',');

			if (filtersRegion.length > 0) {
				queryParams.set('regions', filtersRegion);
			} else {
				queryParams.delete('regions');
			}
		}

		// Search input
		let keywords = document.querySelector('.input-filter') ? document.querySelector('.input-filter').value : '';
		if (keywords.length > 0) {
			queryParams.set('keywords', keywords);
		} else {
			queryParams.delete('keywords');
		}

		// Update URL
		if (queryParams.toString()) {
			history.replaceState( null, null, "?" + queryParams.toString() ); // (stateObj, unused, url)
		} else {
			history.replaceState( null, null, window.location.pathname );
		}

		filterList(newsData);
	}

	// Update options
	function updateOptionsFilters() {
		let queryParams 	= new URLSearchParams(window.location.search);
		let categories		= queryParams.has('categories') ? queryParams.get('categories').split(',') : [''];
		let regions			= queryParams.has('regions') ? queryParams.get('regions').split(',') : [''];
		let archives 		= queryParams.has('archive') ? queryParams.get('archive').split(',') : [''];
		let searchKeywords	= queryParams.has('keywords') ? queryParams.get('keywords').toLowerCase() : '';
		let keywords		= fixedEncodeURIComponent(searchKeywords);

		// Update categories: active checkbox and create tag
		categories.forEach((category) => {
			if (category.length > 0) {
				let listItem = document.querySelector('.js-filter-category .js-list-item[data-option="'+category+'"]');
				if (listItem) {
					if (!listItem.classList.contains('active-option')) {
						listItem.classList.add('active-option');
						createTag(category);
					}
				}
			}
		});

		// Update regions: active checkbox and create tag
		regions.forEach((region) => {
			if (region.length > 0) {
				let listItem = document.querySelector('.js-filter-region .js-list-item[data-option="'+region+'"]');
				if (listItem) {
					if (!listItem.classList.contains('active-option')) {
						listItem.classList.add('active-option');
						createTag(region);
					}
				}
			}
		});

		// Update archive: active checkbox and create tag
		archives.forEach((archive) => {
			if (archive.length > 0) {
				let listItem = document.querySelector('.js-filter-archive .js-list-item[data-option="'+archive+'"]');
				if (listItem) {
					if (!listItem.classList.contains('active-option')) {
						listItem.classList.add('active-option');
						createTag(archive);
					}
				}
			}
		});

		// Update keywords: add keywords in input filter
		if (keywords.length > 0) {
			document.querySelector('.input-filter').value = decodeURIComponent(keywords);
		}
	}

	// Pagination
	function createPagination(newsData) {
		let results = newsData;
		let pageNavigation = document.querySelector('#js-pagination-wrapper') ? document.querySelector('#js-pagination-wrapper') : '';
		let newsPerPage = postsPerPage;
		let numNews = results.length;
		let numPages = Math.ceil(numNews / newsPerPage);

		let currentLink = 0;
		let start = 0;
		let navHTML = ``;

		// Display pagination
		if (numNews <= newsPerPage) {
			navHTML += ``;
		} else {
			navHTML += `<li><a class="prev js-page-number pagination-control disabled" data-start="0" href="#0">Prev</a></li>`;
			while (numPages > currentLink) {
				let startClass =  currentLink === 0 ? 'current' : '';
				navHTML += `<li><a class="js-page-number js-item-number ${startClass}" href="#0" data-start="${start}">${currentLink + 1}</a></li>`;
				currentLink++;
				start += newsPerPage;
			}
			navHTML += `<li><a class="next js-page-number pagination-control" data-start="${newsPerPage}" href="#0">Next</a></li>`;
		}

		// Sanitize HTML
		let sanitizePagination = DOMPurify.sanitize(navHTML);
		pageNavigation.innerHTML = sanitizePagination;

		// Pagination events
		let pageNumbers = document.querySelectorAll('.js-page-number');
		pageNumbers.forEach((pageNumber) => {
			pageNumber.addEventListener('click', (e) => {
				e.preventDefault();
				let start = parseInt(e.target.dataset.start);
				let end = start + newsPerPage;

				if (e.target.classList.contains('disabled')) {
					return false;
				}

				loadAllNews(results, start, end);

				// Add class 'current' when click prev/next button
				let paginationControls = document.querySelectorAll('.pagination-control');
				paginationControls.forEach((element) => {
					let itemNumbers = document.querySelectorAll('.js-item-number');
					itemNumbers.forEach(element => {
						element.classList.remove('current');
					});
					let dataStart = document.querySelector('.js-item-number[data-start="'+start+'"]');
					if (dataStart) {
						dataStart.classList.add('current');
					}
				});

				// Prev / Next navigation
				let btnPrev =  document.querySelector('.prev');
				let btnNext =  document.querySelector('.next');
				let prev = btnPrev.dataset.start = start - newsPerPage;
				let next = btnNext.dataset.start = start + newsPerPage;

				if (prev < 0) {
					btnPrev.classList.add('disabled');
				} else {
					btnPrev.classList.remove('disabled');
				}

				if (next >= numNews) {
					btnNext.classList.add('disabled');
				} else {
					btnNext.classList.remove('disabled');
				}
			});
		});

		// Add class 'current' to number pages
		let itemNumbers = document.querySelectorAll('.js-item-number');
		itemNumbers.forEach(itemNumber => {
			itemNumber.addEventListener('click', (e) => {
				e.preventDefault();
				pageNumbers.forEach((el) => {
					el.classList.remove('current');
				});
				e.target.closest('.js-item-number').classList.add('current');
			});
		});
	}

	// Deletes pagination when no results found
	function deletePagination() {
		let pageNavigation = document.querySelector('#js-pagination-wrapper') ? document.querySelector('#js-pagination-wrapper') : '';
		if (pageNavigation) {
			pageNavigation.textContent = '';
		}
	}

	// Archive list
	function createArchiveListObject(newsData) {
		const archiveListObject = {};

		// Group post dates by year and month
		newsData.forEach(post => {
			let postDateISO = DateTime.fromISO(post.date.dateISO);
			const year = postDateISO.year;
			const month = postDateISO.month;

			if (!archiveListObject[year]) {
				archiveListObject[year] = {};
			}

			if (!archiveListObject[year][month]) {
				archiveListObject[year][month] = 1;
			} else {
				archiveListObject[year][month]++;
			}
		});

		return archiveListObject;
	}

	// Display archive list
	async function displayArchiveList(archiveListObject) {
		let archiveListHTML = ``;
		archiveListHTML += `<ul class="js-filter-list js-filter-archive select-filter-list">`;
		archiveListHTML += `<li class="js-filter-list-item js-filter-item-all list-item" data-option=""><svg width="25" height="24" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg"><rect x="0.333984" width="24" height="24" rx="4" fill="#F2F4F8"></rect> <rect class="checkbox-minus" x="4.333984" y="11" width="16" height="3" rx="1" fill="transparent"></rect> <path class="checkbox-check" d="M6.33398 12L10.334 16L18.334 8" stroke="currentColor" stroke-width="2.61538"></path></svg>All</li>`;
		// Create year item
		for (const year in archiveListObject) {
			archiveListHTML += `<li class="year-list">
			<div class="list-item">
				<div class="js-list-item js-filter-list-item inner-list-item js-list-item-year" data-option="${year}">
					<svg width="25" height="24" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg"><rect x="0.333984" width="24" height="24" rx="4" fill="#F2F4F8"></rect> <rect class="checkbox-minus" x="4.333984" y="11" width="16" height="3" rx="1" fill="transparent"></rect> <path class="checkbox-check" d="M6.33398 12L10.334 16L18.334 8" stroke="currentColor" stroke-width="2.61538"></path></svg>
					${year}
				</div>
				<span class="js-arrow-year-btn arrow-year-list"><svg width="15" height="9" viewBox="0 0 15 9" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M1.95886 1.5L7.95886 7.5L13.9589 1.5" stroke="#00031F" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg></span>
			</div>`;
				archiveListHTML += `<ul class="js-months-list months-list">`;

				// Create month within the year item
				for (const month in archiveListObject[year]) {
					archiveListHTML += `<li class="js-list-item js-filter-list-item list-item js-list-item-month" data-option="${year}-${month}">
					<svg width="25" height="24" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg"><rect x="0.333984" width="24" height="24" rx="4" fill="#F2F4F8"></rect> <rect class="checkbox-minus" x="4.333984" y="11" width="16" height="3" rx="1" fill="transparent"></rect> <path class="checkbox-check" d="M6.33398 12L10.334 16L18.334 8" stroke="currentColor" stroke-width="2.61538"></path></svg>
					${MONTHS[month - 1]} (${archiveListObject[year][month]})
					</li>`;
				}

				archiveListHTML += `</ul>`;
			archiveListHTML += `</li>`;
		}

		archiveListHTML += `</ul>`;

		//Sanitize HTML archive list
		let filterArchive = document.querySelector('.js-archive-list-wrapper');

		if (filterArchive) {
			let sanitize_archiveListHTML = DOMPurify.sanitize(archiveListHTML);
			filterArchive.innerHTML += sanitize_archiveListHTML;
			openInnerArchiveDropdowns();
		}

		return true;
	}

	// Check year in archive list
	function checkYear (items) {
		for (const item of items) {
			if (!item.classList.contains('active-option')) {
				return false;
			}
		}

		return true;
	}

	// Open filter archive dropdowns
	function openInnerArchiveDropdowns() {
		let dropdown_year_btns = document.querySelectorAll(".year-list .list-item .js-arrow-year-btn");
		if (dropdown_year_btns) {
			dropdown_year_btns.forEach((el) => {
				el.addEventListener('click', (e)=> {
					let months_list = el.parentNode.nextSibling;
					// Hide inner dropdown
					if (months_list.classList.contains('active')) {
						months_list.classList.remove('active');
						el.classList.remove('open');
						slideUp(months_list);
					} else {
						//Show inner dropdown
						months_list.classList.add('active');
						el.classList.add('open');
						slideDown(months_list);
					}
				});
			});
		}

		// Active checkbox in 'all' option
		let options = document.querySelectorAll('.js-filter-archive .js-filter-item-all');
		options.forEach((element) => {
			element.addEventListener('click', function() {

				if (!element.classList.contains('active-option')) {
					element.classList.add('active-option');

					let archiveItems = document.querySelectorAll('.js-filter-archive .js-list-item');
					archiveItems.forEach(archiveItem => {
						if (archiveItem.classList.contains('active-option')) {
							archiveItem.classList.remove('active-option');

							let tags = document.querySelectorAll('li.tag');
							for (const tag of tags) {
								tag.remove();
							}
						}
					});

				} else {
					element.classList.remove('active-option');
				}

				updateURL();
			});
		});

		//Active checkbox in archive dropdown
		let yearItems = document.querySelectorAll('.js-filter-archive .js-list-item-year');
		yearItems.forEach((element) => {
			element.addEventListener('click', function() {
				let months = element.parentNode.nextSibling.querySelectorAll('.js-list-item-month');
				let action = 'add';

				if (element.classList.contains('active-option')) {
					action = 'remove';
					let yearTags = document.querySelectorAll('li.tag[data-option="'+element.dataset.option+'"]');
					for (const yearTag of yearTags) {
						yearTag.remove();
					}
					
				}

				let allOption = document.querySelector('.js-filter-archive .js-filter-item-all');
				if (allOption.classList.contains('active-option')) {
					allOption.classList.remove('active-option');
				}

				element.classList.toggle('active-option');

				// Check all months when click year item
				if (months) {
					for (const month of months) {
						if (action === 'add' && !month.classList.contains('active-option')) {
							month.click();
						}

						if (action === 'remove' && month.classList.contains('active-option')) {
							month.click();
						}
					}
				}
			});
		});

		//Active checkbox in archive dropdown
		let monthItems = document.querySelectorAll('.js-filter-archive .js-list-item-month');
		monthItems.forEach((element) => {
			element.addEventListener('click', function() {

				if (!element.classList.contains('active-option')) {
					createTag(element.dataset.option);
				} else {
					let tags = document.querySelectorAll('li.tag[data-option="'+element.dataset.option+'"]');
					for (const tag of tags) {
						tag.remove();
					}
				}

				element.classList.toggle('active-option');

				let months = element.parentNode.querySelectorAll('.js-list-item-month');
				let listItemYear = element.parentNode.parentNode.querySelector('.js-list-item-year');

				let allOption = document.querySelector('.js-filter-archive .js-filter-item-all');
				if (allOption.classList.contains('active-option')) {
					allOption.classList.remove('active-option');
				}

				//Check if all months are active
				if (checkYear(months) === true) {
					listItemYear.classList.add('active-option');
					createTag(listItemYear.dataset.option);

					//Remove all month tags
					for (const month of months) {
						let dataMonth = month.dataset.option;
						let tags = document.querySelectorAll('li.tag[data-option="'+dataMonth+'"]');

						for (const tag of tags) {
							tag.remove();
						}
					}

					// Check if year item is active
				} else if( listItemYear.classList.contains('active-option') ) {
					// Create month tags when year item is not active
					for (const month of months) {
						let dataMonth = month.dataset.option;
						if (month.classList.contains('active-option')) {
							createTag(dataMonth);
						}
					}

					// Remove tag and class to year item
					listItemYear.classList.remove('active-option');
					let tags = document.querySelectorAll('li.tag[data-option="'+listItemYear.dataset.option+'"]');
					for (const tag of tags) {
						tag.remove();
					}
				}

				updateURL();
			});
		});
	}

	// Get tag layout HTML
	function getTagHTML(dataOption) {
		let dataOptionText = dataOption;
		dataOptionText = dataOption.split('-');
		if (dataOptionText.length > 1) {
			dataOptionText = dataOptionText.reverse();
			dataOptionText = dataOptionText[0] +'/'+ dataOptionText[1];
		}

		return `<li class="tag" data-option="${dataOption}"><span class="term-name">${dataOptionText}</span><span class="close"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 10 10" height="10" width="10"><path fill="black" d="M9.60877 1.59598L8.19456 0.181763L5.01258 3.36374L1.8306 0.181763L0.416382 1.59598L3.59836 4.77796L0.416382 7.95994L1.8306 9.37415L5.01258 6.19217L8.19456 9.37415L9.60877 7.95994L6.42679 4.77796L9.60877 1.59598Z"></path></svg></span></li>`;
	}

	// Create tag
	function createTag(dataOption) {
		let selectedTagsLists = document.querySelectorAll('.js-selected-tags');
		selectedTagsLists.forEach((selectedTagsList) => {
			let tag = getTagHTML(dataOption);
			let sanitize_selectedTags = DOMPurify.sanitize(tag);
			selectedTagsList.innerHTML += sanitize_selectedTags;
		});
		closeTag();
	}

	// Close tag
	function closeTag() {
		let closeTags = document.querySelectorAll('.tag .close');
		if (closeTags) {
			closeTags.forEach((tag) => {
				tag.addEventListener('click', () => {
					let parentData = tag.parentNode.dataset.option;
					let itemList = document.querySelector('.js-filter-list .js-filter-list-item[data-option="'+parentData+'"]');
					itemList.click();
				});
			});
		}
	}

	// Get articles after sterilize URL params
	async function run() {
		const sanitized = await sterilizeParams();
		if (sanitized === true) {
			getArticles();
			setUtmParams();
		}
	}

	// Change checkbox error message
	function changeMsg() {
		setTimeout(() => {
			let checkboxMessage = document.querySelector('.checkbox-input span.wpcf7-not-valid-tip');
			if (checkboxMessage) {
				checkboxMessage.textContent = 'Please accept the terms to proceed.';
			}
		}, 5);
	}

	// Set utm_* params
	function setUtmParams() {
		let queryParams = new URLSearchParams(window.location.search);

		let utmCampaignParam	= queryParams.has('utm_campaign') ? queryParams.get('utm_campaign').toLowerCase() : "";
		const utmCampaign		= fixedEncodeURIComponent(utmCampaignParam);

		let utmContentParam	= queryParams.has('utm_content') ? queryParams.get('utm_content').toLowerCase() : "";
		const utmContent		= fixedEncodeURIComponent(utmContentParam);

		let utmMediumParam	= queryParams.has('utm_medium') ? queryParams.get('utm_medium').toLowerCase() : "";
		const utmMedium		= fixedEncodeURIComponent(utmMediumParam);

		let utmSourceParam	= queryParams.has('utm_source') ? queryParams.get('utm_source').toLowerCase() : "";
		const utmSource		= fixedEncodeURIComponent(utmSourceParam);

		let utmTermParam	= queryParams.has('utm_term') ? queryParams.get('utm_term').toLowerCase() : "";
		const utmTerm		= fixedEncodeURIComponent(utmTermParam);

		let utmZcidParam	= queryParams.has('utm_zcid') ? queryParams.get('utm_zcid').toLowerCase() : "";
		const utmZcid		= fixedEncodeURIComponent(utmZcidParam);

		let utmCampaignEl = document.querySelector('input[name=utm_campaign]');
		let utmContentEl = document.querySelector('input[name=utm_content]');
		let utmMediumEl = document.querySelector('input[name=utm_medium]');
		let utmSourceEl = document.querySelector('input[name=utm_source]');
		let utmTermEl = document.querySelector('input[name=utm_term]');
		let utmZcidEl = document.querySelector('input[name=utm_zcid]');
		
		if (utmCampaignEl) utmCampaignEl.value = utmCampaign;
		if (utmContentEl) utmContentEl.value = utmContent;
		if (utmMediumEl) utmMediumEl.value = utmMedium;
		if (utmSourceEl) utmSourceEl.value = utmSource;
		if (utmTermEl) utmTermEl.value = utmTerm;
		if (utmZcidEl) utmZcidEl.value = utmZcid;
	}

	// Events
	// Modal Video
	let openModal = document.querySelectorAll('.js-open-modal');
	openModal.forEach(card => {
		card.addEventListener('click', function() {
			let type = card.closest('.js-open-modal').dataset.type;
			let url = card.closest('.js-open-modal').dataset.url;

			// Type video url
			if (type === 'url') {
				document.querySelector('.Modal_video .Box_player .Box_video #Player_modal_video').style.display = "block";
				let currentID = url;
				player = new YT.Player("Player_modal_video", {
					videoId: currentID,
					playerVars: {
						autoplay: 1,
						controls: 1,
					}
				});
			}

			// Type video file
			if (type === 'file') {
				let video_modal_video = document.querySelector('.Modal_video .Box_player .Box_video #Video_modal_video');
				video_modal_video.style.display = "block";
				video_modal_video.innerHTML = '';
				let html_video_modal_video = '<video src="'+url+'" controls autoplay></video>';
				let sanitized_html_video_modal_video = DOMPurify.sanitize(html_video_modal_video);
				video_modal_video.innerHTML += sanitized_html_video_modal_video;
			}

			// Open video modal
			document.querySelector('body').classList.add('no-scroll-modal-video');
			fadeIn(document.querySelector('.Modal_video'));
		})
	});

	// Close modal
	let close_modal = (el) => {
		if (!el.closest('.Box_video')) {
			document.querySelector('body').classList.remove('no-scroll-modal-video');
			let box_video = document.querySelector('.Modal_video .Box_player .Box_video')
			box_video.innerHTML = '';
			let html_player_modal = '<div class="embed-responsive-item" id="Player_modal_video"> <div class="embed-responsive-item" id="Video_modal_video">';
			let sanitized_html_player_modal = DOMPurify.sanitize(html_player_modal);
			box_video.innerHTML += sanitized_html_player_modal;
			fadeOut(document.querySelector('.Modal_video'));
		}
	}
	// Loop through each close modal button and close video modal
	let close_modal_btns =  document.querySelectorAll('.js-close-modal');
	if (close_modal_btns) {
		close_modal_btns.forEach(el => {
			el.addEventListener('click', (e) => {
				close_modal(e.target);
			});
		});
	}

	// Add margin-top to header when admin-bar is visible
	let admin_bar = document.querySelector('body');
	let header = document.querySelector('header');

	if (admin_bar.classList.contains('admin-bar')) {
		header.classList.add('custom-margin-top');
	}

	// Filters dropdown
	let dropdown_btns = document.querySelectorAll(".js-dropdown-btn");
	if (dropdown_btns) {
		dropdown_btns.forEach((el) => {
			el.addEventListener('click', (e)=> {
				let list = el.parentNode.querySelector('.js-filter-list');
				if (list) {
					// Hide dropdown
					if (list.classList.contains('active')) {
						list.classList.remove('active');
						list.style.display = 'none';
						el.classList.remove('open');
					} else {
						// Show dropdown
						list.classList.add('active');
						list.style.display = 'block';
						el.classList.add('open');
					}
				}
			});
		} );
	}

	// Active checkbox when click and create tags for categories and regions
	let options = document.querySelectorAll('.js-filter-list-item');
	options.forEach((element) => {
		element.addEventListener('click', function() {

			let dataOption = element.dataset.option;
			// Active checkbox and create tags
			if (!element.classList.contains('active-option')) {
				element.classList.add('active-option');
				createTag(dataOption);
			// Uncheck and remove tags
			} else {
				element.classList.remove('active-option');
				tagsWrapperDesktop ? tagsWrapperDesktop.querySelector('li.tag[data-option="'+dataOption+'"]').remove() : '';
				tagsWrapperMobile ? tagsWrapperMobile.querySelector('li.tag[data-option="'+dataOption+'"]').remove() : '';
			}

			updateURL();
		});
	});

	// Close all filters dropdown
	document.addEventListener('click', function(event) {
		if (!event.target.closest('.js-dropdown-btn') && !event.target.closest('.js-filter-list') && !event.target.closest('.js-filter-list li')) {
			let filter_lists = document.querySelectorAll('.js-filter-list');
			let dropdown_btns = document.querySelectorAll('.js-dropdown-btn');
			if (filter_lists) {
				filter_lists.forEach(list => {
					list.style.display = 'none';
					list.classList.remove('active');
				});
			}
			if (dropdown_btns) {
				dropdown_btns.forEach(dropdown => {
					dropdown.classList.remove('open');
				});
			}
		}
	});

	// Open mobile filters
	let filter_icon_btn = document.querySelector("#filter-icon");
	let dropdown_wrapper = document.querySelector(".filter-dropdown-wrapper");
	if (filter_icon_btn) {
		filter_icon_btn.addEventListener('click', function() {
			slideToggle(dropdown_wrapper);
			filter_icon_btn.classList.toggle('active-filter-icon');
		});
	}

	// News views
	let view_type_btns = document.querySelectorAll('.js-btn-view');
	view_type_btns.forEach((el) => {
		el.addEventListener('click', (e) => {
			view_type_btns.forEach((el) => {
				el.classList.remove('btn-view-active');
			});
			document.querySelectorAll('.js-news-inner-wrapper').forEach((el) => {
				el.classList.add('d-none');
			});
			e.target.closest('.js-btn-view').classList.add('btn-view-active');
			let data_view = document.querySelector('.news-' + e.target.closest('.js-btn-view').dataset.view);
			data_view.classList.remove('d-none');
		});
	});

	// Copy post link
	let clipboard = document.querySelectorAll('.clipboard');
	let hidden_url = document.querySelector('#post_url');
	let copied_msg = document.querySelector('.text-copied-msg');
	clipboard.forEach((btn, index) => {
		btn.addEventListener('click', () => {
			navigator.clipboard.writeText(hidden_url.value).then(function() {
				// clipboard successfully set
				copied_msg.style.display = 'block';
				setTimeout(() => {
					copied_msg.style.display = 'none';
				}, 3000);
			}, function() {
				// clipboard write failed
			});
		});
	});

	// Input filter
	let inputFilter = document.querySelector('.input-filter');
	if (inputFilter) {
		inputFilter.addEventListener('input', function() {
			updateURL();
		});
	}

	// CF7 fields with invalid input event
	document.addEventListener( 'wpcf7invalid', function(event) {
		changeMsg();
	}, false );

	// Set value to hidden input 'gdpr_post_opt_in_status'
	let gdprOptInOut = document.querySelector("input[type=checkbox]");
	if (gdprOptInOut) {
		gdprOptInOut.addEventListener('change', function() {

			let status = 'false';
			if (this.checked) {
				status = 'true';
			} else {
				status = 'false';
				changeMsg();
			}
			document.querySelector('#gdpr_post_opt_in_status').value = status;
		});
	}

	// Create custom checkbox
	let checkmark = document.createElement("p");
	checkmark.classList.add('checkmark');
	let label = document.querySelector('.checkbox-input .wpcf7-list-item label');
	if (label) {
		label.append(checkmark);
	}

	// change cf7 spinner
	let cf7Spinner = document.querySelector('.wpcf7-spinner');
	if (cf7Spinner) {
		cf7Spinner.innerHTML = DOMPurify.sanitize('<div class="form-loader"><div></div><div></div><div></div><div></div></div>');
	}

	makeStickyHeader();
	run();
});