@page "{expac?}"

@model IndexModel

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

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

		function durationSorter(a, b) {
			const firstIsEmpty = a === null || a === undefined || a === "";
			const secondIsEmpty = b === null || b === undefined || b === "";
			const sortOrder = $("#dutyTable").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-dungeons-tab" data-bs-toggle="tab" data-bs-target="#nav-dungeons" type="button" role="tab" aria-controls="nav-home" aria-selected="true">Dungeons</button>
			<button class="nav-link" id="nav-trials-tab" data-bs-toggle="tab" data-bs-target="#nav-trials" type="button" role="tab" aria-controls="nav-profile" aria-selected="false">Trials</button>
			<button class="nav-link" id="nav-raids-tab" data-bs-toggle="tab" data-bs-target="#nav-raids" type="button" role="tab" aria-controls="nav-contact" aria-selected="false">Raids</button>
			<button class="nav-link" id="nav-alliance-raids-tab" data-bs-toggle="tab" data-bs-target="#nav-alliance-raids" type="button" role="tab" aria-controls="nav-contact" aria-selected="false">Alliance Raids</button>
			<button class="nav-link" id="nav-ultimate-raids-tab" data-bs-toggle="tab" data-bs-target="#nav-ultimate-raids" type="button" role="tab" aria-controls="nav-contact" aria-selected="false">Ultimate Raids</button>
			<button class="nav-link" id="nav-exploration-raids-tab" data-bs-toggle="tab" data-bs-target="#nav-exploration-raids" type="button" role="tab" aria-controls="nav-contact" aria-selected="false">Exploration Raids</button>
		</div>
	</nav>
	<div class="tab-content" id="nav-tabContent">
		<div class="tab-pane fade show active" id="nav-dungeons" role="tabpanel" aria-labelledby="nav-dungeons-tab">
			<div id="dutyTableDiv" style="display:none;">
				@await Html.PartialAsync("_DutyTable", Model.DutyCompletionRecords!.Where(r => r.ContentType == "Dungeons"))
			</div>
		</div>
		<div class="tab-pane fade" id="nav-trials" role="tabpanel" aria-labelledby="nav-trials-tab">
			@await Html.PartialAsync("_DutyTable", Model.DutyCompletionRecords!.Where(r => r.ContentType == "Trials"))
		</div>
		<div class="tab-pane fade" id="nav-raids" role="tabpanel" aria-labelledby="nav-raids-tab">
			@await Html.PartialAsync("_DutyTable", Model.DutyCompletionRecords!.Where(r => r.ContentType == "Raids"))
		</div>
		<div class="tab-pane fade" id="nav-alliance-raids" role="tabpanel" aria-labelledby="nav-alliance-raids-tab">
			@await Html.PartialAsync("_DutyTable", Model.DutyCompletionRecords!.Where(r => r.ContentType == "Alliance Raids"))
		</div>
		<div class="tab-pane fade" id="nav-ultimate-raids" role="tabpanel" aria-labelledby="nav-ultimate-raids-tab">
			@await Html.PartialAsync("_DutyTable", Model.DutyCompletionRecords!.Where(r => r.ContentType == "Ultimate Raids"))
		</div>
		<div class="tab-pane fade" id="nav-exploration-raids" role="tabpanel" aria-labelledby="nav-exploration-raids-tab">
			@await Html.PartialAsync("_DutyTable", Model.DutyCompletionRecords!.Where(r => r.ContentType == "Exploration"))
		</div>
	</div>

</div>