@model ScreenshotViewModel
@{
	ViewData["Title"] = "Screenshot";
	Layout = "_Layout.cshtml";
}

<header>
	<p class="controls">
		&#xE15C; <a asp-action="Index" class="back">Back to description</a>
		@if (Model.Previous != null)
		{
			@:| &#xE760;
			<a asp-action="Screenshot" asp-route-id="@Model.Previous" class="back">Previous</a>
		}
		@if (Model.Next != null)
		{
			@:| &#xE761;
			<a asp-action="Screenshot" asp-route-id="@Model.Next" class="back">Next</a>
		}
	</p>
	<p>
		<b>@Model.Current</b>
	</p>
</header>

<article class="image-overview-block">
	<img src="@Model.Paths[Model.Position]" id="image" onclick="ToggleImageSize();" />
</article>

@section Imports {
	<link rel="stylesheet" type="text/css" href="~/css/Gallery.css" />
	<style type="text/css">
		#image
		{
			max-height: 75vh;
		}

		header
		{
			display: grid;
			grid-template-columns: 1fr auto;
			margin: 0px 20px;
		}
	</style>

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

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