@using BeWoPlanerMobil.Util
@model BeWoPlanerMobil.Models.DevToolsModel
    
@{
	if(TempData[TempDataConstants.DoLogoutKey] is bool doLogout && doLogout)
	{
		<text>
			<script type="text/javascript">
				$("#second-logout-form").submit();
			</script>
		</text>
	}
}

<script type="text/javascript">
	$(document).ready(function() {
		$(".collapse").on("shown.bs.collapse", function() {
			window.saveCollapsibleState($(this).attr("id"), "@Url.Action("SaveCollapsibleStatus")");
		});

		$(".collapse").on("hidden.bs.collapse", function() {
			window.saveCollapsibleState($(this).attr("id"), "@Url.Action("SaveCollapsibleStatus")");
		});

		$(".nav-link").removeClass("active");
		$("#settings-tab").addClass("active");

		$(`#dev-tools-tab-container`).load("@Url.Action("LoadSettingsPartial")");
	});

	function selectTab(element) {
		var url = "";

		switch($(element).prop("id")) {
		case "user-rights-tab":
			url = "@Url.Action("LoadUserRightPartial")";
			break;
		case "generate-data-tab":
			url = "@Url.Action("LoadDataGenerationPartial")";
			break;
		default:
			url = "@Url.Action("LoadSettingsPartial")";
			break;
		}

		$(".nav-link").removeClass("active");
		$(element).addClass("active");

		$(`#dev-tools-tab-container`).load(url);
	}
</script>

<div class="m-2 h-100">
	<div class="card">
		<div class="card-header">
			<ul class="nav nav-tabs">
				<li class="nav-item">
					<a id="settings-tab" class="nav-link" href="#" onclick="selectTab(this)">Settings</a>
				</li>
				<li class="nav-item">
					<a id="user-rights-tab" class="nav-link" href="#" onclick="selectTab(this)">Rechte</a>
				</li>
				<li class="nav-item">
					<a id="generate-data-tab" class="nav-link" href="#" onclick="selectTab(this)">Daten generieren</a>
				</li>
			</ul>
		</div>
		<div class="card-body">
			<div id="dev-tools-tab-container">

			</div>
		</div>
	</div>
</div>