@page "{id:int}"
@using AfRApay.Web.Backend
@model EditUserModel
@{
	ViewData["Title"] = "Edit User";
	if (Request.Method == "POST" && Request.Form["action"] == "delete") {
		return;
	}
	var db = new Database.DbConn();
	var user = db.Users.First(p => p.Id == int.Parse(RouteData.Values["id"]!.ToString()!));
	var cards = db.Cards.Where(p => p.UserId == user.Id);
}

<div class="text-center">
	<h1 class="display-5">
		Edit User
	</h1>
</div>

<form id="change_user" method="POST">
	<h3>Account</h3>
	<div class="mb-3">
		<label for="nickname" class="form-label">Nickname</label>
		<input type="text" maxlength="10" class="form-control" id="nickname" name="nickname" value="@user.Nickname" required>
	</div>
	<button type="submit" class="btn btn-lg btn-primary" name="action" value="save">Save</button>
	<button type="button" class="btn btn-lg btn-danger" name="action" data-bs-toggle="modal" data-bs-target="#deleteConfirmModal">Delete</button> <!-- Calls the below modal dialog to confirm user deletetion -->
</form>

<!-- Modal dialog to confirm user deletion -->
<div class="modal fade" id="deleteConfirmModal" tabindex="-1" aria-labelledby="deleteConfirmModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="deleteConfirmModalLabel">Delete user @user.Nickname?</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        Are you sure you want to delete this user?<br>This cannot be undone.
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-lg btn-secondary" data-bs-dismiss="modal">Close</button>
        <button type="submit" form="change_user" class="btn btn-lg btn-danger" name="action" value="delete">Delete User</button>
      </div>
    </div>
  </div>
</div>

<br/>
<h3 class="text-center">Cards</h3>
@{	<!-- We add all the cards here! -->
	<div class="row justify-content-center">
		@foreach (var card in cards) {
			<div class="fake-card-wrapper blur-true m-2">
				<div class="fake-card">
					<div class="hover-overlay"></div>
					<a class="btn btn-danger btn-lg hover-button">Delete</a>
					<div class="face-card front">
						<div class="chip">
							<div>
								<div>
									<div>
									</div>
								</div>
							</div>
						</div>
						<h2 class="card-number">@card.CardId</h2>
						<h3 class="card-holder">@user.Nickname</h3>
						<span class="validity">
							<span class="small">VALID<br>THRU</span>
							<span>01/2038</span>
						</span>

						<div class="fake-card-logo-top">
							<img src="/img/afra.png" class="fake-card-logo-inner" alt="">
						</div>
						<div class="fake-card-logo-bottom">
							<img src="/img/matecard.png" class="fake-card-logo-inner" alt="">
						</div>

					</div>
				</div>
			</div>
		}
	<!-- Here we display a faded placholder card, with the add button at its center -->
		<div class="fake-card-wrapper m-2">
				<div class="fake-card">
					<a class="btn btn-success btn-lg add-card-button" href="/LinkCard/@user.Id">Add Card</a>
					<div class="face-card ghost-card front">
						<div class="chip">
							<div>
								<div>
									<div>
									</div>
								</div>
							</div>
						</div>
						<h2 class="card-number">Awooo!</h2>
						<h3 class="card-holder">@user.Nickname</h3>
						<span class="validity">
							<span class="small">VALID<br>THRU</span>
							<span>01/2038</span>
						</span>

						<div class="fake-card-logo-top">
							<img src="/img/afra.png" class="fake-card-logo-inner" alt="">
						</div>
						<div class="fake-card-logo-bottom">
							<img src="/img/matecard.png" class="fake-card-logo-inner" alt="">
						</div>

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