@model BlogPostViewModel

@{
	ViewData["Title"] = Model.Title;
}

<article class="blog-post">
	@Html.Raw(Model.ContentHtml)
</article>

<small>Posted on @Model.Timestamp</small>

<script type="text/javascript">
	function adornImage(image, append) {
		var parent = image.parentNode;
		parent.removeChild(image);
		image.className = "blog-post__image-container--image";

		var tagLine = document.createElement("span");
		tagLine.className = "blog-post__image-container--tagline";
		tagLine.innerText = image.getAttribute("alt");

		var container = document.createElement("div");
		container.className = "blog-post__image-container";
		container.appendChild(image);
		container.appendChild(tagLine);

		var containerContainer = document.createElement("div");
		containerContainer.className = "blog-post__image-container--container";
		containerContainer.appendChild(container);

		if (append)
			parent.appendChild(containerContainer);
		else
			parent.prepend(containerContainer);
	}


	document.querySelectorAll("p>img:only-child,p>img:first-child").forEach(image => adornImage(image, false));
	document.querySelectorAll("p>img:last-child").forEach(image => adornImage(image, true));
</script>