@model ArtworkViewModel
@{
	ViewData["Title"] = Model.Current?.Title;
}

<header>
	@if (Model.Previous != null)
	{
		@:&#xE760;
		<a asp-action="Details" asp-route-id="@Model.Previous">Previous</a>
		@:|
	}
	&#xE8B9; <a asp-action="Index" asp-controller="Gallery">All artworks</a>
	@if (Model.Next != null)
	{
		@:| &#xE761;
		<a asp-action="Details" asp-route-id="@Model.Next">Next</a>
	}
</header>

<article class="image-overview-block">
	<img src="~/images/Gallery/@Model.Current?.FileName" onclick="ToggleImageSize();" />

	<div>
		<h1>@Model.Current?.Title</h1>
		<span>Creation date: @Model.Current?.CreationDate.ToShortDateString()</span>
		<p>
			@Html.Raw(Model.Current?.Description)
		</p>
	</div>
</article>

@section Imports 
{
	<link rel="stylesheet" type="text/css" href="~/css/Gallery.css" />

	<script type="text/javascript">
		function ToggleImageSize()
		{
			var image = document.querySelector("img");

			if (image.style.cursor == "zoom-out")
				image.style = "";
			else
			{
				image.style.maxHeight = "none";
				image.style.maxWidth = "none";
				image.style.cursor = "zoom-out";
			}
		}
	</script>
}