@page

@model DeepDungeonsModel

@{
	ViewData["Title"] = "Expedience";
}

@section scripts {
	<script type="text/javascript">
		$(document).ready(function () {
			$("#deepDungeonTableDiv").removeAttr("style");
		});

		function durationSorter(a, b) {
			const firstIsEmpty = a === null || a === undefined || a === "";
			const secondIsEmpty = b === null || b === undefined || b === "";
			const sortOrder = $("#deepDungeonTable").bootstrapTable("getOptions").sortOrder;
			const modifier = sortOrder === "asc" ? 1 : -1
			if (firstIsEmpty) {
				return 1 * modifier;
			}

			if (secondIsEmpty) {
				return -1 * modifier;
			}

			return a.localeCompare(b);
		}
	</script>
}

<div class="text-center" id="mainDiv">
	
	<nav>
		<div class="nav nav-tabs" id="nav-tab" role="tablist">
			<button class="nav-link active" id="nav-potd-tab" data-bs-toggle="tab" data-bs-target="#nav-potd" type="button" role="tab" aria-controls="nav-home" aria-selected="true">The Palace of the Dead</button>
			<button class="nav-link" id="nav-hoh-tab" data-bs-toggle="tab" data-bs-target="#nav-hoh" type="button" role="tab" aria-controls="nav-profile" aria-selected="false">Heaven-on-High</button>
			<button class="nav-link" id="nav-eo-tab" data-bs-toggle="tab" data-bs-target="#nav-eo" type="button" role="tab" aria-controls="nav-contact" aria-selected="false">Eureka Orbos</button>
		</div>
	</nav>
	<div class="tab-content" id="nav-tabContent">
		<div class="tab-pane fade show active" id="nav-potd" role="tabpanel" aria-labelledby="nav-potd-tab">
			<div id="deepDungeonTableDiv" style="display:none;">
				@await Html.PartialAsync("_DeepDungeonTable", Model.DeepDungeonRecords!.Where(r => r.DeepDungeon == "The Palace of the Dead"))
			</div>
		</div>
		<div class="tab-pane fade" id="nav-hoh" role="tabpanel" aria-labelledby="nav-hoh-tab">
			@await Html.PartialAsync("_DeepDungeonTable", Model.DeepDungeonRecords!.Where(r => r.DeepDungeon == "Heaven-on-High"))
		</div>
		<div class="tab-pane fade" id="nav-eo" role="tabpanel" aria-labelledby="nav-eo-tab">
			@await Html.PartialAsync("_DeepDungeonTable", Model.DeepDungeonRecords!.Where(r => r.DeepDungeon == "Eureka Orthos"))
		</div>
	</div>
</div>