(function(id, endpoint) {

	const CLASS_LOADING = 'feed--loading';
	const CLASS_ERROR = 'feed--error';

	// Insert a wrapper div
	const $script = document.getElementById(`${'feed-'+id+'-script'}`);
	let $wrap = null;

	if($script) {
		// The <script> had an ID so insert the wrapper after it
		$wrap = document.createElement('div');
		$wrap.id = 'feed-'+id;
		$wrap.classList.add('feed');

		$script.after($wrap);
	}
	else {
		// ... otherwise just insert the wrapper right here (this isn't perfect though)
		document.write(`<div id="${'feed-'+id}" class="feed"></div>`);
		$wrap = document.getElementById('feed-'+id);
	}

	// Send an event
	$wrap.dispatchEvent(new CustomEvent('aggregator.feed.init', {
		bubbles: true,
		detail: {
			id: id,
			endpoint: endpoint,
		},
	}));

	// Give the wrapper a loading state
	const $loading = document.createElement('p');
	$loading.classList.add('feed__loading');
	$loading.innerHTML = 'Loading posts&hellip;';

	$wrap.appendChild($loading);
	$wrap.classList.add(CLASS_LOADING);

	// Fetch the posts
	fetch(endpoint)
		.then((response) => response.json())
		.then(function(data) {
			// Remove the loading state
			$wrap.removeChild($loading);
			$wrap.classList.remove(CLASS_LOADING);

			// Insert the new posts
			const $list = document.createElement('ul');
			$list.classList.add('feed__posts');

			$wrap.appendChild($list);

			for(let post of data.posts) {
				// Make the elements
				const $image = document.createElement('figure');
				$image.classList.add('feed__post__image');
				$image.innerHTML = `<img src="${post.preview_url}"/>`;

                const $title = document.createElement('h5');
				$title.classList.add('feed__post__title');
                $title.textContent = post.title;

                const $description = document.createElement('p');
				$description.classList.add('feed__post__description');
                $description.textContent = post.description;

                const $meta = document.createElement('p');
				$meta.classList.add('feed__post__meta');
                $meta.innerHTML = `${post.posted_at.diff} | <a href="${post.actual_url}" target="_blank">View on ${post.source.type}</a>`;

                // Make a wrapper
                const $inner = document.createElement('div');
                $inner.classList.add('feed__post__inner');

                if(post.preview_url) $inner.appendChild($image);
                if(post.title) $inner.appendChild($title);
                if(post.description) $inner.appendChild($description);
                $inner.appendChild($meta);

                // Insert the post
                const $post = document.createElement('li');
                $post.id = 'feed-post-'+post.key;
                $post.classList.add('feed__post');
                $post.classList.add('feed__post--'+post.source.type.toLowerCase());

                $post.appendChild($inner);

                $list.appendChild($post);
			}

			// Send an event
			$wrap.dispatchEvent(new CustomEvent('aggregator.feed.loaded', {
				bubbles: true,
				detail: {
					id: id,
					endpoint: endpoint,
					data: data,
				},
			}));
		})
		.catch(function(error) {
			console.error('Failed to load posts:', error);

			// Swap out the loading state for an error message
			$wrap.removeChild($loading);
			$wrap.classList.remove(CLASS_LOADING);

			const $error = document.createElement('p');
			$error.classList.add('feed__error');
			$error.innerHTML = 'Failed to load posts.';

			$wrap.appendChild($error);
			$wrap.classList.add(CLASS_ERROR);

			// Send an event
			$wrap.dispatchEvent(new CustomEvent('aggregator.feed.failed', {
				bubbles: true,
				detail: {
					id: id,
					endpoint: endpoint,
					error: error,
				},
			}));
		});

})(12, "https:\/\/aggregator.pace.com.au\/api\/feed\/12\/json?limit=12")