@model MyWebsite.Models.ImageModel
@{
	ViewData["Title"] = "Delete artwork";
}

<header>
	&#xE760; <a asp-action="Index">Back to the list</a>
	<h1>Delete artwork</h1>
	<h3>Are you sure you want to delete this?</h3>
</header>

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

	<div>
		<p>
			<b>@Html.DisplayNameFor(model => model.Title):</b> @Model.Title<br />
			<b>@Html.DisplayNameFor(model => model.CreationDate):</b> @Model.CreationDate<br />
			<b>@Html.DisplayNameFor(model => model.FileName):</b> @Model.FileName<br />
		</p>

		<p>
			<b>@Html.DisplayNameFor(model => model.Description):</b> @Html.Raw(Model.Description)<br />
		</p>

		<form asp-action="Delete">
			<input hidden asp-for="FileName" />
			<input type="submit" value="Delete" required />
		</form>
	</div>
</article>

@section Imports
{
	<link type="text/css" rel="stylesheet" href="~/css/Gallery.css" />
	<style type="text/css">
		@@media only screen and (max-width: 500px)
		{
			.image-overview-block > div
			{
				margin: initial;
			}
		}
	</style>

	<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>
}