@page
@using AfRApay.Web.Backend
@model IndexModel
@{
	ViewData["Title"] = "Index";
	var db = new Database.DbConn();
}

@section Header {
	<link rel="stylesheet" href="~/lib/datatables/dataTables.bootstrap5.min.css"/>
}

@section Scripts {
	<script src="~/lib/datatables/jquery.dataTables.min.js"></script>
	<script src="~/lib/datatables/dataTables.bootstrap5.min.js"></script>
	<script>
	$(document).ready( function () {
		let search = "";
		if (window.location.hash.startsWith("#")) {
			search = decodeURI(window.location.hash.substring(1));
		}
		
		$('#users').DataTable({
			// Setting the DOM for dataTables. Using default with adjustments for margin. See here for syntax details https://datatables.net/reference/option/dom
			dom: "<'row'<'col-sm-12 col-md-6 my-1'l><'col-sm-12 col-md-6 my-1'f>>" +
				 "<'row'<'col-sm-12'tr>>" +
        		 "<'row'<'col-sm-12 col-md-5'i><'col-sm-12 col-md-7'p>>",
        	lengthMenu: [10, 25, 50, 100, -1],
        	pageLength: 25,
        	search: {
				search: search,
			}
        });
    } );
	</script>
}

<div class="text-center">
	<h1 class="display-5">
		Users
		<a class="btn btn-lg btn-primary" href="/AddUser">Add</a>

	</h1>
</div>
<div>
	<table class="table table-striped table-hover" id="users">
		<thead>
		<tr>
			<th scope="col">Nickame</th>
			<th scope="col">Balance</th>
			<th scope="col">Cards</th>
			<th scope="col">Actions</th>
		</tr>
		</thead>
		<tbody>
		@foreach (var user in db.Users.OrderBy(p => p.Nickname.ToLower())) {
			<tr id="user_@user.Id">
				<td>
					<b>@user.Nickname</b>
				</td>
				<td>
					@($"{user.Balance / 100M:C}")
				</td>
				<td>
					<b>@db.Cards.Count(p => p.UserId == user.Id)</b> cards linked.
				</td>
				<td>
					<!-- Displayed when in big layout -->
					<form method="POST">
						<input type="hidden" name="action" value="transaction">
						<input type="hidden" name="userId" value="@user.Id">
						<div class="d-none d-md-flex btn-group btn-group-lg" role="group">
							<!-- Make sure these buttons match the small/mobile layout ones below -->
							<button type="submit" class="btn px-3 btn-danger" name="amount" value="-150">-1.50&euro;</button>
							<button type="submit" class="btn px-3 btn-success" name="amount" value="500">+5&euro;</button>
							<button type="submit" class="btn px-3 btn-success" name="amount" value="1000">+10&euro;</button>
							<a class="btn px-2 btn-primary" href="/EditUser/@user.Id">Edit</a>
						</div>
						<!-- Displayed when in compact/phone layout -->
						<div class="dropdown d-md-none">
							<a class="btn btn-lg px-1 btn-secondary dropdown-toggle" href="#" role="button" id="dropdownMenuLink" data-bs-toggle="dropdown" aria-expanded="false">
								Actions
							</a>
							<div class="dropdown-menu p-1 mw-max-content" aria-labelledby="dropdownMenuLink">
								<!-- Inline CSS, sets minimum width of drop down to maxium size of content -->
								<div class="d-grid gap-1">
									<!-- Make sure these buttons match the big layout ones above-->
									<button type="submit" class="btn btn-lg btn-danger" name="amount" value="-150">-1.50&euro;</button>
									<button type="submit" class="btn btn-lg btn-success" name="amount" value="500">+5&euro;</button>
									<button type="submit" class="btn btn-lg btn-success" name="amount" value="1000">+10&euro;</button>
									<a class="btn btn-lg btn-primary" href="/EditUser/@user.Id">Edit</a>
								</div>
							</div>
						</div>
					</form>
				</td>
			</tr>
		}
		</tbody>
	</table>
</div>