// nav bar scroll effect
const scrollLimit = 150;

document.addEventListener('DOMContentLoaded', () =>
{
	goToURL(window.location.pathname);
});

window.addEventListener('popstate', _ =>
{
	goToURL(window.history.state);
});

window.onscroll = () =>
{
	// check if scrolled past limit if so add scrolled class to change background of nav
	if (document.body.scrollTop >= scrollLimit || document.documentElement.scrollTop >= scrollLimit)
	{
		document.querySelector('nav').classList.add('scrolled');
	}
	else
	{
		document.querySelector('nav').classList.remove('scrolled');
	}
};

/**
 * goToURL tries to go to the specified URL if not shows the error page (not yet implemented)
 * @param {string} url of the page
 */
function goToURL(url)
{
	// Get the current URL and split it into an array
	let urlArray = url.split('/');
	
	if (localStorage.getItem('cookiePopup') === 'accepted')
	{
		document.querySelector('#cookiePopup').classList.add('hidden');
	}
	
	if (url === '/blog/' || url === '/blog')
	{
		loadHomeContent();
		// window.history.pushState(null, null, url);
		return;
	}
	
	// Check if the URL is a post page
	if (urlArray[2] === 'post')
	{
		// Create a new URL with the dynamic part
		loadIndividualPost(urlArray[urlArray.length - 1]).catch(err => console.log(err));
		return;
	}
	
	if (urlArray[2] === 'category')
	{
		// Create a new URL with the dynamic part
		if (urlArray[3])
		{
			loadPostsByCategory(urlArray[urlArray.length - 1]);
			return;
		}
		
		loadAllCategories().catch(err => console.log(err));
		return;
	}
	
	if (urlArray[2] === 'search' && urlArray[3])
	{
		// Create a new URL with the dynamic part
		loadSearchResults(urlArray[urlArray.length - 1]);
		return;
	}
	
	if (urlArray[2] === 'policy')
	{
		if (urlArray[3] === 'privacy')
		{
			loadPrivacyPolicy();
			return;
		}
		
		if (urlArray[3] === 'cookie')
		{
			loadCookiePolicy();
			return;
		}
	}
	
	show404();
}

document.querySelector('#searchBtn').addEventListener('click', _ =>
{
	let searchTerm = document.querySelector('#searchField').value;
	if (searchTerm.length > 0)
	{
		window.history.pushState(null, null, `/blog/search/${searchTerm}`);
		document.querySelector('#searchField').value = '';
		document.querySelector('#main').innerHTML = '';
		goToURL(`/blog/search/${searchTerm}`);
	}
});

document.querySelector('#searchField').addEventListener('keyup', e =>
{
	if (e.key === 'Enter')
	{
		document.querySelector('#searchBtn').click();
	}
});

document.querySelector('#cookieAccept').addEventListener('click', _ =>
{
	document.querySelector('#cookiePopup').classList.add('hidden');
	localStorage.setItem('cookiePopup', 'accepted');
});

/**
 * Submits the newsletter form
 */
function submitNewsletter()
{
	fetch(`/api/blog/newsletter/${document.querySelector('#email').value}`, {
		method: 'POST',
		headers: {
			'Content-Type': 'application/json',
		},
	}).then(res => res.json().then(json =>
	{
		
		document.querySelector('#newsletterMessage').classList.remove('hidden');
		
		if (json.message.includes('exists'))
		{
			document.querySelector('#newsletterMessage').classList.add('error');
			document.querySelector('#newsletterMessage').classList.remove('success');
			document.querySelector('#newsletterMessage div').innerHTML = 'You\'ve already signed up you silly goose!';
			return;
		}
		
		if (!res.ok)
		{
			document.querySelector('#newsletterMessage').classList.add('error');
			document.querySelector('#newsletterMessage').classList.remove('success');
			document.querySelector('#newsletterMessage div').innerHTML = json.error;
			return;
		}
		
		document.querySelector('#newsletterMessage div').innerHTML = json.message;
		document.querySelector('#newsletterMessage').classList.add('success');
	}));
}

/**
 * Creates a formatted date
 * @param {string} dateString - the date string
 * @returns {string} the formatted date
 */
function createFormattedDate(dateString)
{
	let formattedDate = new Date(dateString);
	return formattedDate.toLocaleDateString('en-GB', { day: '2-digit', month: 'short', year: 'numeric' });
}

/**
 * Creates a large post element
 * @param post the post object
 * @returns {HTMLDivElement} the outer content of the post
 */
function createLargePost(post)
{
	let outerContent = document.createElement('div');
	outerContent.classList.add('outerContent');
	let img = document.createElement('img');
	img.className = 'banner';
	img.src = post.headerImg;
	img.alt = post.title;
	outerContent.appendChild(img);
	let content = document.createElement('div');
	content.classList.add('content');
	let postContent = document.createElement('div');
	postContent.classList.add('postContent');
	let categories = '';
	post.categories.split(', ').forEach(category =>
	{
		categories += `<a href="/blog/category/${category}" class="link">${category}</a>`;
		if (post.categories.split(', ').length > 1)
		{
			categories += ', ';
		}
	});
	
	if (categories.endsWith(', '))
	{
		categories = categories.substring(0, categories.length - 2);
	}
	let dateModifiedString = createFormattedDate(post.dateModified);
	
	postContent.innerHTML = `
                    <h2>${post.title}</h2>
                    <h3>Last updated: ${dateModifiedString} | ${categories}</h3>
                    <p>${post.abstract}</p>
                    <a href="/blog/post/${post.title}" class="btn btnPrimary">See Post</a>
                `;
	content.appendChild(postContent);
	outerContent.appendChild(content);
	return outerContent;
}

/**
 * Loads the home content
 */
function loadHomeContent()
{
	fetch('/api/blog/post').then(res => res.json().then(json =>
	{
		for (let i = 0; i < json.length; i++)
		{
			if (json[i].featured === 1)
			{
				let featuredPost = document.createElement('section');
				featuredPost.classList.add('largePost');
				featuredPost.id = 'featuredPost';
				let h1 = document.createElement('h1');
				h1.innerHTML = 'featured post';
				featuredPost.appendChild(h1);
				let outerContent = createLargePost(json[i]);
				featuredPost.appendChild(outerContent);
				document.querySelector('#main').appendChild(featuredPost);
			}
			
			if (i === 1)
			{
				let latestPost = document.createElement('section');
				latestPost.classList.add('largePost');
				latestPost.id = 'latestPost';
				let h1 = document.createElement('h1');
				h1.innerHTML = 'latest post';
				latestPost.appendChild(h1);
				let outerContent = createLargePost(json[i]);
				latestPost.appendChild(outerContent);
				document.querySelector('#main').appendChild(latestPost);
			}
			
		}
	}));
}

/**
 * Gets the latest and featured posts
 * @returns {Promise<any[]>} the latest and featured posts
 */
async function getLatestAndFeaturedPosts()
{
	let latestPost = await fetch('/api/blog/post/latest').then(res => res.json());
	let featuredPost = await fetch('/api/blog/post/featured').then(res => res.json());
	return [latestPost, featuredPost];
}

/**
 * Converts a csv to an array
 * @param text the csv text
 * @returns {string[]} the array
 */
function csvToArray(text)
{
	let p = '';
	let arr = [''];
	let i = 0;
	let s = true;
	let l = null;
	for (l of text)
	{
		if ('"' === l)
		{
			if (s && l === p)
			{
				arr[i] += l;
			}
			s = !s;
		}
		else if (',' === l && s)
		{
			l = arr[++i] = '';
		}
		else if ('\n' === l && s)
		{
			if ('\r' === p)
			{
				row[i] = row[i].slice(0, -1);
			}
			arr = arr[++r] = [l = ''];
			i = 0;
		}
		else
		{
			arr[i] += l;
		}
		p = l;
	}
	return arr;
}

/**
 * Gets the categories
 * @returns {Promise<*[]>} the categories
 */
async function getCategories()
{
	let categories = await fetch('/api/blog/categories').then(res => res.json());
	let modifiedCategories = [];
	categories.forEach(category => modifiedCategories = modifiedCategories.concat(csvToArray(category.categories.replace(/\s*,\s*/g, ','))));
	return [...new Set(modifiedCategories)];
}

/**
 * Creates the categories
 * @param {*[]} categoriesList the categories
 */
function createCategories(categoriesList)
{
	let categories = '';
	categoriesList.forEach(category => categories += `<a href="/blog/category/${category}" class="link">${category}</a>`);
	return categories;
}

/**
 * Creates the button categories
 * @param {string[][]} categoriesList - the categories
 */
function createButtonCategories(categoriesList)
{
	let categories = '';
	categoriesList.forEach(lst => lst.forEach(category => categories += `<a href="/blog/category/${category}" class="btn btnOutline">${category}</a>`));
	return categories;
}

/**
 * Creates the side content
 * @returns {HTMLElement} the aside element
 */
async function createSideContent()
{
	
	let posts = await getLatestAndFeaturedPosts();
	let latestPost = posts[0];
	let featuredPost = posts[1];
	let categoriesList = await getCategories();
	let categories = createCategories(categoriesList);
	
	let sideContent = document.createElement('aside');
	sideContent.classList.add('sideContent');
	sideContent.innerHTML = `
                            <div class="authorInfo">
                                <div class="picture">
                                    <img src="/imgs/profile.jpg"
                                        alt="My professional picture taken in brighton near 
                                        north street at night wearing a beige jacket and checkered shirt"
                                        class="profile">
                                        <p>Rohit Pai</p>
                                </div>
                                
                                <a href="https://linkedin.com/in/rohitpai98">
                                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
                                        <path d="M12 0c-6.627 0-12 5.373-12 12s5.373 12 12 12 12-5.373 12-12-5.373-12-12-12zm-2 16h-2v-6h2v6zm-1-6.891c-.607 0-1.1-.496-1.1-1.109 0-.612.492-1.109 1.1-1.109s1.1.497 1.1 1.109c0 .613-.493 1.109-1.1 1.109zm8 6.891h-1.998v-2.861c0-1.881-2.002-1.722-2.002 0v2.861h-2v-6h2v1.093c.872-1.616 4-1.736 4 1.548v3.359z"/>
                                    </svg>
                                </a>
                    
                                <a href="mailto:rohit@rohitpai.co.uk">
                                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
                                        <path d="M13.718 10.528c0 .792-.268 1.829-.684 2.642-1.009 1.98-3.063 1.967-3.063-.14 0-.786.27-1.799.687-2.58 1.021-1.925 3.06-1.624 3.06.078zm10.282 1.472c0 6.627-5.373 12-12 12s-12-5.373-12-12 5.373-12 12-12 12 5.373 12 12zm-5-1.194c0-3.246-2.631-5.601-6.256-5.601-4.967 0-7.744 3.149-7.744 7.073 0 3.672 2.467 6.517 7.024 6.517 2.52 0 4.124-.726 5.122-1.288l-.687-.991c-1.022.593-2.251 1.136-4.256 1.136-3.429 0-5.733-2.199-5.733-5.473 0-5.714 6.401-6.758 9.214-5.071 2.624 1.642 2.524 5.578.582 7.083-1.034.826-2.199.799-1.821-.756 0 0 1.212-4.489 1.354-4.975h-1.364l-.271.952c-.278-.785-.943-1.295-1.911-1.295-2.018 0-3.722 2.19-3.722 4.783 0 1.73.913 2.804 2.38 2.804 1.283 0 1.95-.726 2.364-1.373-.3 2.898 5.725 1.557 5.725-3.525z"/>
                                    </svg>
                                </a>
                                
                                <a href="https://gitea.rohitpai.co.uk/rodude123">
                                    <svg xmlns="http://www.w3.org/2000/svg"
                                         x="0px" y="0px" viewBox="0 0 1024 1024"
                                         style="enable-background:new -1 0 1024 1024;" xml:space="preserve">
                                        <style type="text/css">.st1 {fill: #FFFFFF;}</style>
                                        <g id="Guides"></g>
                                        <g id="Icon"><circle class="st0" cx="512" cy="512" r="512"/>
                                            <g><path class="st1" d="M762.2,350.3c-100.9,5.3-160.7,8-212,8.5v114.1l-16-7.9l-0.1-106.1c-58.9,0-110.7-3.1-209.1-8.6 c-12.3-0.1-29.5-2.4-47.9-2.5c-47.1-0.1-110.2,33.5-106.7,118C175.8,597.6,296,609.9,344,610.9c5.3,24.7,61.8,110.1,103.6,114.6 H631C740.9,717.3,823.3,351.7,762.2,350.3z M216.2,467.6c-4.7-36.6,11.8-74.8,73.2-73.2C296.1,462,307,501.5,329,561.9 C272.8,554.5,225,536.2,216.2,467.6z M631.8,551.1l-51.3,105.6c-6.5,13.4-22.7,19-36.2,12.5l-105.6-51.3 c-13.4-6.5-19-22.7-12.5-36.2l51.3-105.6c6.5-13.4,22.7-19,36.2-12.5l105.6,51.3C632.7,521.5,638.3,537.7,631.8,551.1z"/>
                                                <path class="st1"
                                                      d="M555,609.9c0.1-0.2,0.2-0.3,0.2-0.5c17.2-35.2,24.3-49.8,19.8-62.4c-3.9-11.1-15.5-16.6-36.7-26.6 c-0.8-0.4-1.7-0.8-2.5-1.2c0.2-2.3-0.1-4.7-1-7c-0.8-2.3-2.1-4.3-3.7-6l13.6-27.8l-11.9-5.8L519.1,501c-2,0-4.1,0.3-6.2,1 c-8.9,3.2-13.5,13-10.3,21.9c0.7,1.9,1.7,3.5,2.8,5l-23.6,48.4c-1.9,0-3.8,0.3-5.7,1c-8.9,3.2-13.5,13-10.3,21.9 c3.2,8.9,13,13.5,21.9,10.3c8.9-3.2,13.5-13,10.3-21.9c-0.9-2.5-2.3-4.6-4-6.3l23-47.2c2.5,0.2,5,0,7.5-0.9 c2.1-0.8,3.9-1.9,5.5-3.3c0.9,0.4,1.9,0.9,2.7,1.3c17.4,8.2,27.9,13.2,30,19.1c2.6,7.5-5.1,23.4-19.3,52.3 c-0.1,0.2-0.2,0.5-0.4,0.7c-2.2-0.1-4.4,0.2-6.5,1c-8.9,3.2-13.5,13-10.3,21.9c3.2,8.9,13,13.5,21.9,10.3 c8.9-3.2,13.5-13,10.3-21.9C557.8,613.6,556.5,611.6,555,609.9z"/>
                                            </g>
                                        </g>
                                    </svg>
                                </a>
                                
                                <h3>Avid Full Stack Dev | Uni of Notts Grad | Amateur Blogger</h3>
                            </div>
                            <div class="otherPosts">
                                <h2>latest post</h2>
                                <h3>${latestPost.title}</h3>
                                <p>${latestPost.abstract}</p>
                                <a href="/blog/post/${latestPost.title}" class="btn btnPrimary boxShadowIn boxShadowOut">See Post</a>
                            </div>
                            <div class="otherPosts">
                                <h2>featured post</h2>
                                <h3>${featuredPost.title}</h3>
                                <p>${featuredPost.abstract}</p>
                                <a href="/blog/post/${featuredPost.title}" class="btn btnPrimary boxShadowIn boxShadowOut">See Post</a>
                            </div>
                            <div class="newsletter">
                            	<h3>Sign up to the newsletter to never miss a new post!</h3>
                            	<div id="newsletterForm" class="form">
                            		<div class="formControl">
                            			<label for="email">Email</label>
                            			<input type="email" id="email" name="email" placeholder="Email" required>
                            		</div>
                            		<div class="success hidden" id="newsletterMessage">
										<button class="close" type="button" onclick="this.parentElement.classList.toggle('hidden')">&times;</button>
										<div></div>
									</div>

                            		<input type="submit" value="Sign Up" onclick="submitNewsletter()">
                            	</div>
                            </div>
                            <div class="feeds">
								<h2>feeds</h2>
								<div class="icons">
									<a href="https://rohitpai.co.uk/api/blog/feed/rss" class="btn btnPrimary" title="RSS"><i class="fa-solid fa-rss"></i></a>
									<a href="https://rohitpai.co.uk/api/blog/feed/atom" class="btn btnPrimary" title="Atom"><img class="atom" src="/blog/imgs/atomFeed.svg" alt="Atom"></a>
									<a href="https://rohitpai.co.uk/api/blog/feed/json" class="btn btnPrimary" title="JSON"><img class="json" src="/blog/imgs/jsonFeed.svg" alt="JSON"></a>
								</div>
							</div>
                            <div class="categories">
                                <h2>categories</h2>
                                ${categories}
                            </div>
                           
                            `;
	return sideContent;
}

/**
 * Create the meta tags
 * @param nameOrProperty - the name or property
 * @param attribute - the attribute
 * @param value	- the value
 */
function createMetaTag(nameOrProperty, attribute, value)
{
	let existingTag = document.querySelector(`meta[name="${nameOrProperty}"], meta[property="${nameOrProperty}"]`);
	
	if (!existingTag)
	{
		// If the meta tag doesn't exist, create it
		let newTag = document.createElement('meta');
		newTag.setAttribute(nameOrProperty.includes('name') ? 'name' : 'property', nameOrProperty);
		newTag.setAttribute(attribute, value);
		document.head.appendChild(newTag);
		return;
	}
	
	existingTag.setAttribute(attribute, value);
}

/**
 * inserts the meta tags
 * @param json - the json
 */
function insertMetaTags(json)
{
	let metaDesc = document.querySelector('meta[name="description"]');
	metaDesc.setAttribute('content', json.abstract);
	
	// Twitter meta tags
	createMetaTag('twitter:title', 'content', json.title);
	createMetaTag('twitter:description', 'content', json.abstract);
	createMetaTag('twitter:image', 'content', json.headerImg);
	
	// Open Graph (Facebook) meta tags
	createMetaTag('og:title', 'content', json.title);
	createMetaTag('og:description', 'content', json.abstract);
	createMetaTag('og:image', 'content', json.headerImg);
	createMetaTag('og:url', 'content', window.location.href);
	createMetaTag('og:type', 'content', 'blog');
	createMetaTag('og:site_name', 'content', 'Rohit Pai\'s Blog');
	createMetaTag('og:locale', 'content', 'en_GB');
	
	//Keywords
	let metKeywords = document.querySelector('meta[name="keywords"]');
	let keywords = metKeywords.getAttribute('content');
	keywords += `, ${json.keywords}`;
	metKeywords.setAttribute('content', keywords);
	
}

/**
 * Trys to load the individual post if not runs the 404 function
 * @param title
 */
async function loadIndividualPost(title)
{
	document.title = 'Rohit Pai - ' + decodeURI(title);
	await fetch(`/api/blog/post/${title}`).then(async res =>
	{
		if (!res.ok)
		{
			show404();
			return;
		}
		
		await res.json().then(async json =>
		{
			//replace meta description
			insertMetaTags(json);
			// create the post
			let post = document.createElement('section');
			post.classList.add('post');
			post.id = 'individualPost';
			let mainContent = document.createElement('div');
			mainContent.classList.add('mainContent');
			let article = document.createElement('article');
			article.innerHTML = `
                                <h1>${json.title}</h1>
                                <div class="byLine">
                                    <h3>Published: ${createFormattedDate(json.dateCreated)} | Last updated: ${createFormattedDate(json.dateModified)}</h3>
                                    <h3>${createButtonCategories([csvToArray(json.categories.replace(/\s*,\s*/g, ','))])}</h3>
                                    <div class="sharethis-inline-share-buttons" data-url="https://rohitpai.co.uk/blog/post/${title}"
                                    	data-title="${json.title}" data-description="${json.abstract}"
                                    	data-image="https://rohitpai.co.uk/${json.headerImg}" data-username="@rohitpai123"></div>
                                </div>
                                <div class="cover" style="background-image: url('${json.headerImg}')"></div>
                                ${json.body}
                                 `;
			let comments = document.createElement('section');
			comments.classList.add('comments');
			comments.innerHTML = `<h2>Comments</h2>
                                  <div id="disqus_thread"></div>
                                 `;
			
			mainContent.appendChild(article);
			mainContent.appendChild(comments);
			let sideContent = await createSideContent();
			post.appendChild(mainContent);
			post.appendChild(sideContent);
			
			document.querySelector('#main').appendChild(post);
			
			let disqus_config = _ =>
			{
				this.page.url = window.location.href;  // Replace PAGE_URL with your page's canonical URL variable
				this.page.identifier = window.location.href.substring(window.location.href.lastIndexOf('/') + 1); // Replace PAGE_IDENTIFIER with your page's unique identifier variable
			};
			
			(function ()
			{ // DON'T EDIT BELOW THIS LINE
				var d = document, s = d.createElement('script');
				s.src = 'https://rohitpaiportfolio.disqus.com/embed.js';
				s.setAttribute('data-timestamp', +new Date());
				d.body.appendChild(s);
			})();
		});
	});
}

/**
 * Loads all the categories
 */
async function loadAllCategories()
{
	document.title = 'Rohit Pai - Categories';
	let categoriesList = await getCategories();
	let main = document.querySelector('#main');
	let categories = document.createElement('section');
	categories.classList.add('categories');
	categories.id = 'allCategories';
	let h1 = document.createElement('h1');
	h1.innerHTML = 'Categories';
	main.appendChild(h1);
	for (let category of categoriesList)
	{
		let btnContainer = document.createElement('div');
		btnContainer.classList.add('btnContainer');
		let btn = document.createElement('a');
		btn.classList.add('btn');
		btn.classList.add('btnPrimary');
		btn.innerHTML = category;
		btn.href = `/blog/category/${category}`;
		btnContainer.appendChild(btn);
		categories.appendChild(btnContainer);
	}
	main.appendChild(categories);
}

/**
 * Loads the posts by category
 * @param category the category
 */
function loadPostsByCategory(category)
{
	document.title = 'Rohit Pai - ' + decodeURI(category);
	fetch(`/api/blog/categories/${category}`).then(res => res.json().then(json =>
	{
		let main = document.querySelector('#main');
		let posts = document.createElement('section');
		posts.classList.add('catPosts');
		posts.id = 'postsByCategory';
		let h1 = document.createElement('h1');
		h1.innerHTML = decodeURI(category);
		main.appendChild(h1);
		for (let i = 0; i < json.length; i++)
		{
			let largePost = document.createElement('section');
			largePost.classList.add('largePost');
			if (i < json.length - 1)
			{
				largePost.classList.add('categoryPost');
			}
			largePost.id = `lp-${i + 1}`;
			let outerContent = createLargePost(json[i]);
			largePost.appendChild(outerContent);
			posts.appendChild(largePost);
		}
		main.appendChild(posts);
	}));
}

/**
 * Loads the search results
 * @param searchTerm the search term
 */
function loadSearchResults(searchTerm)
{
	document.title = 'Rohit Pai - Search Results for ' + decodeURI(searchTerm);
	fetch(`/api/blog/search/${searchTerm}`).then(res => res.json().then(json =>
	{
		let main = document.querySelector('#main');
		let posts = document.createElement('section');
		posts.classList.add('catPosts');
		posts.id = 'searchResults';
		let h1 = document.createElement('h1');
		h1.innerHTML = 'Search Results';
		main.appendChild(h1);
		for (let i = 0; i < json.length; i++)
		{
			let largePost = document.createElement('section');
			largePost.classList.add('largePost');
			if (i < json.length - 1)
			{
				largePost.classList.add('categoryPost');
			}
			let outerContent = createLargePost(json[i]);
			largePost.appendChild(outerContent);
			posts.appendChild(largePost);
		}
		main.appendChild(posts);
	}));
}

/**
 * Loads the privacy policy
 */
function loadPrivacyPolicy()
{
	document.querySelector('#main').innerHTML = `
		<div class="policy">
			<h2>Privacy Policy</h2>
			<p>Last Updated: Nov 12, 2023</p>
			<p>
				Thank you for visiting the Privacy Policy of Rohit Pai's Blog. This Privacy Policy explains how I, Rohit Pai, collect, use, and share information about you (“you”, “yours” or “user”) when you access or use my website (“Services”). You are responsible for any third-party data you provide or share through the Services and confirm that you have the third party's consent to provide such data to me.
			</p>
			<br>

			<h3>Sources of Information and Tracking Technologies</h3>
			<p>
				I collect information that you directly provide to me, such as when you submit a form or send me a message with your information. I may also receive information about you from my partners, including but not limited to distribution partners, data services, and marketing firms. I may combine this information with other information I collect from or about you. In these cases, my Privacy Policy governs the handling of the combined information. I and my partners may collect the information noted in this privacy policy using cookies, web beacons, pixels, and other similar technologies. These technologies are used for authentication, to store your preferences or progress, for analytics, and for advertising and analytics. Cookies are small text files stored on your computer. You can set your browser to reject cookies altogether, to reject my cookies in particular, or to delete cookies. However, this may cause some or all of my Services not to function on your computer or device.
			</p>
			<br>
			<h3>How I Use Your Information</h3>
			<p>
				I use information I collect about you to provide, maintain, and improve my Services and other interactions I have with you. For example, I use the information collected to:
			</p>
			<ul>
				<li>Facilitate and improve your online experience;</li>
				<li>Provide and deliver products and services, perform authentication, process transactions and returns, and send you related information, including confirmations, receipts, invoices, customer experience surveys, and product or Services-related notices;</li>
				<li>Process and deliver promotions;</li>
				<li>Respond to your comments and questions and provide customer service;</li>
				<li>If you have indicated to me that you wish to receive notifications or promotional messages;</li>
				<li>Detect, investigate and prevent fraudulent transactions and other illegal activities and protect my rights and property and others;</li>
				<li>Comply with my legal and financial obligations;</li>
				<li>Monitor and analyze trends, usage, and activities;</li>
				<li>Provide and allow my partners to provide advertising and marketing targeted toward your interests.</li>
			</ul>
			<br>
			<h3>How I May Share Information</h3>
			<p>
				I may share your Personal Information in the following situations:
			</p>
			<ul>
				<li>
					<strong><em>Third Party Services Providers.</em></strong>
					I may share data with service providers, vendors, contractors, or agents who complete transactions or perform services on my behalf, such as those that assist me with my business and internal operations like shipping and delivery, payment processing, fraud prevention, customer service, gift cards, experiences, personalization, marketing, and advertising;
				</li>
				<li>
					<strong><em>Change in Business.</em></strong>
					I may share data in connection with a corporate business transaction, such as a merger or acquisition of all or a portion of my business to another company, joint venture, corporate reorganization, insolvency or bankruptcy, financing or sale of company assets;
				</li>
				<li>
					<strong><em>To Comply with Law.</em></strong>
					I may share data to facilitate legal process from lawful requests by public authorities, including to meet national security or law enforcement demands as permitted by law.
				</li>
				<li>
					<strong><em>With Your Consent.</em></strong>
					I may share data with third parties when I have your consent.
				</li>
				<li>
					<strong><em>With Advertising and Analytics Partners.</em></strong>
					See the section entitled “Advertising and Analytics” below.
				</li>
			</ul>
			<br>
			<h3>Advertising and Analytics</h3>
			<p>
				I use advertising and analytics technologies to better understand your online activity on my Services to provide personalized products and services that may interest you. I may allow third-party companies, including ad networks, to serve advertisements, provide other advertising services, and/or collect certain information when you visit my website. Third-party companies may use pseudonymized personal data (e.g., click stream information, browser type, time and date, subject of advertisements clicked or scrolled over) during your visit to this website in order to provide advertisements about goods and services likely to be of interest to you, on this website and others. To learn more about Interest-Based Advertising or to opt-out of this type of advertising, you can visit <a href="http://optout.aboutads.info/?c=2&amp;lang=EN">AboutAds.info/choices</a> or <a href="http://optout.networkadvertising.org/?c=1">www.networkadvertising.org/choices</a>. Some third-party companies may also use non-cookie technologies, such as statistical IDs. Please keep in mind that your web browser may not permit you to block the use of these non-cookie technologies, and those browser settings that block cookies may have no effect on such techniques. If the third-party company uses the non-cookie technologies for interest-based advertising, you can opt out at <a href="http://optout.networkadvertising.org/?c=1">www.networkadvertising.org/choices</a>. Please note the industry opt out only applies to use for interest-based advertising and may not apply to use for analytics or attribution. Some websites have “do not track” features that allow you to tell a website not to track you. These features are not all uniform. I do not currently respond to those signals.
			</p>
			<br>
			<h3>Data Security</h3>
			<p>
				I implement commercially reasonable security measures designed to protect your information. Despite my best efforts, however, no security measures are completely impenetrable.
			</p>
			<br>
			<h3>Data Retention</h3>
			<p>
				I store the information I collect about you for as long as necessary for the purpose(s) for which I collected it or for other legitimate business purposes, including to meet my legal, regulatory, or other compliance obligations.
			</p>
			<br>

			<h3>EU Privacy Rights</h3>

			<p>Individuals located in certain countries, including the European Economic Area (EEA) and the United Kingdom, have certain statutory rights under the General Data Protection Regulation (GDPR) in relation to their personal data.</p>
			<p>To the extent information I collect is associated with an identified or identifiable natural person and is protected as personal data under GDPR, it is referred to in this Privacy Policy as “Personal Data”.</p>
			<p>
				<strong><em>Data Subject Access Requests</em></strong>
			</p>
			<p>
				Subject to any exemptions provided by law, you may have the right to request:
			</p>
			<ul>
				<li>
					a copy of the Personal Data I hold about you;
				</li>
				<li>
					to correct the Personal Data I hold about you;
				</li>
				<li>
					to delete your Account or Personal Data;
				</li>
				<li>
					to object to processing of your Personal Data for certain purposes;
				</li>
			</ul>

			<p>
				To access your privacy rights, send me an email at rohit@rohitpai.co.uk.
			</p>
			<p>
				I will generally process requests within one month. I may need to request specific information from you to help me confirm your identity and/or the jurisdiction in which you reside. If your request is complicated or if you have made a large number of requests, it may take me longer. I will let you know if I need longer than one month to respond.
			</p>
			<p>
				<strong><em>Legal Bases For Processing Personal Data</em></strong>
			</p>
			<p>
				I may process your Personal Data under applicable data protection law on the following legal grounds:
			</p>
			<ul>
				<li>
					<strong><em>Contractual Necessity:</em></strong>
					I may process your Personal Data to enter into or perform a contract with you.
				</li>
				<li>
					<strong><em>Consent:</em></strong>
					where you have provided consent to process your Personal Data. You may withdraw your consent at any time.
				</li>
				<li>
					<strong><em>Legitimate interest:</em></strong>
					I process your Personal Data to provide my Services to you such as to provide my online user experience, communicate with you, provide customer service, market, analyze and improve my business, and to protect my Services.
				</li>
			</ul>
			<br>
			<h3>Age Limitations</h3>
			<p>
				My Service is intended for adults ages 18 years and above. I do not knowingly collect personally identifiable information from children. If you are a parent or legal guardian and think your child under 13 has given me information, please email or write to me at the address listed at the end of this Privacy Policy. Please mark your inquiries “COPPA Information Request.”
			</p>
			<br>
			<h3>Changes to this Privacy Policy</h3>
			<p>
				Rohit Pai may change this Privacy Policy from time to time. I encourage you to visit this page to stay informed. If the changes are material, I may provide you additional notice to your email address or through my Services. Your continued use of the Services indicates your acceptance of the modified Privacy Policy.
			</p>
			<br>
			<h3>Newsletters</h3>
			<p>
				You can opt in to receive my marketing emails and/or newsletters by  below. I may still send you transactional messages, which include Services-related communications and responses to your questions.
			</p>
			<br>
			<h3>Storage of Information in the United States</h3>
			<p>
				Information I maintain may be stored both within and outside of the United States. If you live outside of the United States, you understand and agree that I may transfer your information to the United States, and that U.S. laws may not afford the same level of protection as those in your country.
			</p>
			<br>
			<h3>Contact Me</h3>
			<p>
				If you have questions, comments, or concerns about this Privacy Policy, you may contact me at:
			</p>
			<a href="https://rohitpai.co.uk/#contact" class="link">Contact</a>
			<a href="mailto:rohit@rohitpai.co.uk" class="link">rohit@rohitpai.co.uk</a>
		</div>
		`;
}

function loadCookiePolicy()
{
	document.querySelector('#main').innerHTML = `
		<div class="policy">
			<h3>Cookies Policy</h3>
			<p>I only use functional cookies for the blog which includes PHP Session ID, disqus. a cookie to disable the cookie popup, and maybe share this. I think that these are functional cookies, if you don't, you're welcome to exit the site or tell me by emailing me through the email address below, or the contact form on the contact section of my main website.</p>
			<br>
			<a href="mailto:rohit@rohitpai.co.uk" class="link">rohit@rohitpai.co.uk</a>
			<br>
			<a href="https://rohitpai.co.uk/#contact" class="link">contact</a>
		</div>
	`;
}

/**
 * Shows the 404 page
 */
function show404()
{
	document.querySelector('#main').innerHTML = `
        <div class="errorFof">
            <div class="fof">
                <h1>Blog post, Category or page not found</h1>
                <a href="/blog/" class="btn btnPrimary">See all blog posts</a>
            </div>
        </div>    
    `;
}