@using System.Collections.Generic
@inherits Dynamicweb.Rendering.RazorTemplateBase<Dynamicweb.Rendering.RazorTemplateModel<Dynamicweb.Rendering.Template>>

@{ 
	List<LoopItem> savedCardsLoop = GetLoop("SavedCards");
}

<div class="h-100" data-dw-colorscheme="@Pageview.CurrentParagraph?.ColorSchemeId" id="SavedCardList">
	<header class="d-flex flex-row align-items-center gap-3 px-2 py-3 border-bottom">
		<h1 class="h6 m-0 flex-fill">@Pageview.CurrentParagraph.Item["Title"]</h1>
	</header>

	@if (!GetBoolean("Ecom:CustomerCenter.SavedCards.EmptyList"))
	{
		<table class="table d-none d-lg-table table-striped table-hover table-linked align-top mb-0">

			<thead>
				<tr>
					<th>@Translate("Card Name")</th>
					<th>@Translate("Card no")</th>
					<th>@Translate("Card Type")</th>
					<th></th>
				</tr>
			</thead>

			<tbody class="border-top-0">
				@foreach (LoopItem savedCard in savedCardsLoop)
				{
					string cardName = savedCard.GetString("Ecom:SavedCard.Name");
					string cardNumber = savedCard.GetString("Ecom:SavedCard.Identifier");
					string cardType = savedCard.GetString("Ecom:SavedCard.CardType");
					string savedCardUrl = savedCard.GetString("Ecom:CustomerCenter.SavedCards.MessagesUrl");
					string deleteCardUrl = savedCard.GetString("Ecom:CustomerCenter.SavedCards.DeleteUrl");

					<tr class="position-relative swift_saved-card">
						<td>
							<a href="@savedCardUrl" class="d-block text-decoration-none">
								<span>@cardName</span>
							</a>
						</td>
						<td>
							<a href="@savedCardUrl" class="d-block text-decoration-none">
								<span>@cardNumber</span>
							</a>
						</td>
						<td style="vertical-align: middle">
							<a href="@savedCardUrl" class="text-decoration-none" tabindex="-1">
								@{
									string iconPath = "/Files/Images/Icons/";
									string svgIcon = ReadFile(iconPath + cardType.ToLower().Replace(" ", "") + ".svg");

									if (!string.IsNullOrEmpty(svgIcon))
									{
										<span class="icon-5">@svgIcon</span>
									}
									else
									{
										<span>@cardType</span>
									}
								}
							</a>
						</td>
						<td class="text-end">
							<a href="@deleteCardUrl" class="btn btn-link">@Translate("Delete")</a>
						</td>
					</tr>
				}
			</tbody>
		</table>

		<table class="table d-table d-lg-none table-borderless table-linked table-clean align-top mb-0">
			@foreach (LoopItem savedCard in savedCardsLoop)
			{
				string cardName = savedCard.GetString("Ecom:SavedCard.Name");
				string cardNumber = savedCard.GetString("Ecom:SavedCard.Identifier");
				string cardType = savedCard.GetString("Ecom:SavedCard.CardType");
				string savedCardUrl = savedCard.GetString("Ecom:CustomerCenter.SavedCards.MessagesUrl");
				string deleteCardUrl = savedCard.GetString("Ecom:CustomerCenter.SavedCards.DeleteUrl");

				<tbody class="border-bottom">
					<tr>
						<th>
							<a href="@savedCardUrl" class="d-block text-start text-decoration-none">
								<span class="fs-8">@Translate("Card Name")</span>
							</a>
						</th>
						<td>
							<a href="@savedCardUrl" class="d-block text-end text-decoration-none" tabindex="-1">@cardName</a>
						</td>
					</tr>
					<tr>
						<th>
							<a href="@savedCardUrl" class="d-block text-start text-decoration-none" tabindex="-1">
								<span class="fs-8">@Translate("Card no")</span>
							</a>
						</th>
						<td>
							<a href="@savedCardUrl" class="d-block text-end text-decoration-none" tabindex="-1">
								@cardNumber
							</a>
						</td>
					</tr>
					<tr>
						<th>
							<a href="@savedCardUrl" class="d-block text-start text-decoration-none" tabindex="-1">
								<span class="fs-8">@Translate("Card Type")</span>
							</a>
						</th>
						<td>
							<a href="@savedCardUrl" class="d-block text-end text-decoration-none" tabindex="-1">
								@{
									string iconPath = "/Files/Images/Icons/";
									string icon = ReadFile(iconPath + cardType + ".svg");

									if (string.IsNullOrEmpty(icon))
									{
										<span>@cardType</span>
									}
									else
									{
										<span class="icon-5">
											@icon
										</span>
									}
								}
							</a>
						</td>
					</tr>
					<tr>
						<td colspan="2">
							<a href="@savedCardUrl" class="d-block text-decoration-none" tabindex="-1">
								<div class="d-grid">
									<span class="btn btn-secondary" data-dw-button="secondary">@Translate("View Card details")</span>
								</div>
							</a>
						</td>
					</tr>
					<tr>
						<td colspan="2">
							<a href="@deleteCardUrl" class="d-block text-decoration-none" tabindex="-1">
								<div class="d-grid">
									<span class="btn btn-secondary" data-dw-button="secondary">@Translate("Delete")</span>
								</div>
							</a>
						</td>
					</tr>
				</tbody>
			}
		</table>

		if (GetBoolean("Ecom:CustomerCenter.RMA.Paging.Show"))
		{
			<div class="p-3 mt-3">
				<ul class="pagination m-0">
					@for (int page = 1; page <= GetInteger("Ecom:CustomerCenter.Paging.NumPages"); page++)
					{
						string pageCssClass = (page == GetInteger("Ecom:CustomerCenter.Paging.CurrentPage")) ? "page-item active" : "page-item";
						string pageLink = $"<a class=\"page-link\" href=\"javascript:goToPage({page});\">{page}</a>";

						<li class="@pageCssClass">@pageLink</li>
					}
				</ul>
			</div>
		}
	}
	else
	{
		<div class="alert alert-info text-center mt-3" role="alert">
			@Translate("No saved cards found")
		</div>
	}

	<script>
    	function goToPage(page) {
    		let url = new URL(document.location.href);
    		url.searchParams.set('PageNum', page);
    		url.searchParams.set('CCPage' + @GetString("ParagraphID"), page);
    		document.location.href = url;
    	}
	</script>
</div>
