@{
	Layout = "~/Views/Shared/_FunctionLayout.cshtml";
}

@model IEnumerable<GreenTree.Nachtragsmanagement.Web.Models.Misc.HelpPageTreeModel>

<script src='@Url.Content("~/Scripts/jquery.mCustomScrollbar.concat.min.js")'></script>
<script>
	$(document).ready(function () {
		setTimeout(function () {
			setHelpContentHeight();
		}, 500);
	});

	$(window).resize(function () {
		setHelpContentHeight();
	});

	function setHelpContentHeight() {
		var height = $(window).height() - 50;
		$("#helpPageNavigation").height(height);
		$("#helpPageContent").height(height);
	}

	function viewHelpPage(id) {
		if (!id) return;
		$.ajax({
			url: '@Url.Action("ViewHelpPage", "Misc")',
			data: { Id: id },
			success: function (response) {
				setTimeout(function () {
					$("#helpPageContent").html(response);
				}, 200);
			},
			error: function () {
				 alert("error occured");
			}
		});
	}

	function editHelpPage(id) {
		if (!id) return;
		$.ajax({
			url: '@Url.Action("EditHelpPage", "Misc")',
			data: { Id: id },
			success: function (response) {
				setTimeout(function () {
					$("#helpPageContent").html(response);
				}, 200);
			},
			error: function () {
				 alert("error occured");
			}
		});
	}
</script>

<link rel="stylesheet" type="text/css" href='@Url.Content("~/Content/jquery.mCustomScrollbar.min.css")' />

<style>

	.helpTable {
		width: 100%;
	}

	.helpTable > tbody > tr > td {
		vertical-align: top;
	}

	.helpTable > tbody > tr > td:first-of-type {
		padding-right: 12px;
	}

	.helpTable > tbody > tr > td:last-of-type {
		padding-left: 12px;
	}

	.helpTable > tbody > tr > td:first-of-type ul {
		line-height: 24px;
		font-size: 16px;
		list-style-type: none;
		padding-left: 12px;
	}

	.helpTable > tbody > tr > td:first-of-type ul > ul {
		font-size: 16px;
	}

	.helpTable > tbody > tr > td:first-of-type ul > ul > ul {
		font-size: 16px;
	}

	.helpTable > tbody > tr > td:first-of-type ul a {
		text-decoration: none;
	}

	.helpTable > tbody > tr > td:first-of-type li {
		margin-left: 8px;
	}

	.helpPageMenu {
		width: auto;
		margin: 0 8px 6px 0;
		padding-bottom: 6px;
		border-bottom: 1px dashed #009688;
	}

	#helpPageNavigation {
		border-right: 1px solid #009688;
	}

</style>

<table class="helpTable">
	<tr>
		<td style="width: 20%">
			<div class="helpPageMenu">
				@Html.DevExpress().Button(b =>
				{
					b.Name = "devButtonNewHelpPage";
					b.Text = "Neu";
					b.UseSubmitBehavior = false;
					b.RenderMode = ButtonRenderMode.Link;
					b.ClientSideEvents.Click = "function (s, e) { editHelpPage(-1); }";
				}).GetHtml()
			</div>
			<div id="helpPageNavigation" class="mCustomScrollbar" data-mcs-theme="minimal-dark" style="width: 100%">
				@Html.Partial("~/Views/Misc/_HelpPageTreePartial.cshtml", Model)
			</div>
		</td>
		<td style="width: 80%">
			<div id="helpPageContent" class="mCustomScrollbar" data-mcs-theme="minimal-dark" style="width: 100%">

			</div>
		</td>
	</tr>
</table>