Backend-Api/ServiceHost/Areas/Client/Pages/Company/RollCall/CameraAccounts.cshtml

@page
@model ServiceHost.Areas.Client.Pages.Company.RollCall.CameraAccountsModel

@{
	string clientVersion = _0_Framework.Application.Version.StyleVersion;
	ViewData["Title"] = " - " + "تنظیمات حساب کاربری دوربین";
	int index = 1;
	int i = 0;
}

@section Styles {
	<link href="~/assetsclient/css/table-style.css?ver=@clientVersion" rel="stylesheet" />
	<link href="~/assetsclient/css/table-responsive.css?ver=@clientVersion" rel="stylesheet" />
	<link href="~/assetsclient/css/rollcall-list-table.css?ver=clientVersion" rel="stylesheet" />
	<link href="~/assetsclient/css/operation-button.css?ver=@clientVersion" rel="stylesheet" />
	<link href="~/AssetsClient/css/dropdown.css?ver=123" rel="stylesheet" />
	<link href="~/AssetsClient/css/select2.css?ver=@clientVersion" rel="stylesheet" />
	<link href="~/AssetsClient/css/filter-search.css?ver=@clientVersion" rel="stylesheet" />
	<link href="~/AssetsClient/css/datetimepicker.css?ver=@clientVersion" rel="stylesheet" />
	<link href="~/AdminTheme/assets/sweet-alert/sweet-alert.min.css" rel="stylesheet">
	<link href="~/assetsclient/pages/rollcall/css/cameraAccounts.css?ver=@clientVersion" rel="stylesheet" />
	<link href="~/assetsclient/pages/rollcall/css/cameraaccounts.css" rel="stylesheet" />

	<style>
		.stickyMain {
			position: sticky;
			top: 5px;
			z-index: 10;
		}

		.sticky {
			position: sticky;
			top: 43px;
			z-index: 10;
		}

		.is-sticky {
			position: -webkit-sticky;
			position: sticky;
			top: 43px;
			z-index: 999;
		}

		.errored {
			animation: shake 300ms;
			color: #eb3434 !important;
			background-color: #fef2f2 !important;
			border: 1px solid #eb3434 !important;
			border-radius: 7px;
		}

		.goToTop {
			display: none;
			position: fixed;
			bottom: -10px;
			margin-right: 100px;
			z-index: 100;
			color: #fff;
			background-color: #25acacd6;
		}

		.goToTop:hover {
			color: #fff;
			background-color: #2ca4a4;
		}

		.textListTitle {
			color: #1A1A1A;
			font-size: 16px;
			font-weight: 500;
		}

		.sweet-alert button {
			font-family: 'IRANYekanX' !important;
		}

		@@media screen and (max-width: 767px) {
			.table-rollcall .width2 {
				width: 35% !important;
				overflow: hidden;
			}

			.sticky {
				top: 48px !important;
			}

			.goToTop {
				position: fixed;
				bottom: 54px;
				margin-right: 39%;
				z-index: 100;
				color: #fff;
				background-color: #25acac70;
			}

			.textListTitle {
				font-size: 14px;
			}
		}

		@@media (max-width: 576px) {
			.form-control {
				margin: 0px 0;
			}
		}
	</style>

}


<div class="content-container">

	<div class="container-fluid">
		<div class="row p-2">
			<div class="col p-0 m-0 d-flex align-items-center justify-content-between">
				<div class="col d-flex align-items-center justify-content-start">
					<img src="~/AssetsClient/images/icons/account-camera.png" alt="" class="img-fluid mx-1" width="45px" />
					<div>
						<h4 class="title d-flex align-items-center">تنظیمات حساب کاربری دوربین</h4>
						<div class="title d-flex align-items-center">@Model.WorkshopFullName</div>
					</div>
				</div>
				<div>
					<a asp-page="/Index" class="back-btn" type="button">
						<span>بازگشت</span>
					</a>
				</div>
			</div>
		</div>
	</div>

	<button class="btn btn-rounded mb-5 goToTop">
		<div class="d-flex align-items-center">
			<span>برو بالا</span>
			<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" width="20px" class="ms-1">
				<path stroke-linecap="round" stroke-linejoin="round" d="m4.5 18.75 7.5-7.5 7.5 7.5" />
				<path stroke-linecap="round" stroke-linejoin="round" d="m4.5 12.75 7.5-7.5 7.5 7.5" />
			</svg>
		</div>
	</button>

	<!-- List Items -->
	<div class="container-fluid" id="containerHeight">
		<div class="row p-lg-2">

			<div class="card" style="margin: 0 0 60px 0;">
					<!-- Advance Search Box -->
					<div class="search-box bg-white d-block d-md-none p-1">
						<button class="btn-search w-100" type="button" data-bs-toggle="modal" data-bs-target="#searchModal">
							<span>جستجو پیشرفته</span>
							<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
								<circle cx="11" cy="11" r="6" stroke="white" />
								<path d="M20 20L17 17" stroke="white" stroke-linecap="round" />
							</svg>
						</button>
					</div>
					<!-- End Advance Search Box -->
					<div class="px-lg-2 p-auto">
						<div class="wrapper bg-white my-1 list-box table-rollcall-account">

							<div class="Rtable Rtable--collapse">
								<div class="Rtable-row Rtable-row--head d-flex align-items-center sticky">
									<div class="Rtable-cell column-heading width1">ردیف</div>
									<div class="Rtable-cell column-heading width2">نام کارگاه</div>
									<div class="Rtable-cell column-heading width3 d-none d-sm-block">نام کاربری</div>
									<div class="Rtable-cell column-heading width5 d-none d-md-block text-center">وضعیت</div>
									<div class="Rtable-cell column-heading width6 text-end">عملیات</div>
								</div>

								<div id="loadingSkeletonCameraAccount" style="display: contents;">
									@for (int j = 0; j < 8; j++)
									{
										<div class="skeleton-loader" style="margin: 4px 0 !important;"></div>
									}
								</div>

								<div class="Rtable Rtable--collapse w-100" id="ajaxCameraAccountDataLoad">
								</div>
							</div>

						</div>
					</div>

			</div>

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


<div id="MainModal" class="modal fade" aria-labelledby="myModalLabel" aria-hidden="true" tabindex="-1" data-bs-backdrop="static" style="display: none;">
	<div class="modal-dialog modal-md modal-dialog-centered">
		<div class="modal-content" id="ModalContent">
		</div>
	</div>
</div>

@section Script {
	<script src="~/assetsclient/js/site.js"></script>
	<script src="~/assetsadminnew/libs/sweetalert2/sweetalert2.all.min.js"></script>
	<script src="~/AssetsClient/js/dropdown.js?ver=@clientVersion"></script>
	<script>
		var antiForgeryToken = $('@Html.AntiForgeryToken()').val();
		var loadCameraAccountsAjax = `@Url.Page("CameraAccounts", "CameraAccounts")`;
		var changeCameraAccountStatusAjax = `@Url.Page("./CameraAccounts", "CameraAccountChangeStatus")`;

		// check and show modal Camera Account And Workshop Setting
		var statusCameraAccountAndWorkshopSettingUrl = `@Url.Page("./Index", "StatusCameraAccountAndWorkshopSetting")`;
		var saveCameraAccountUrl = `@Url.Page("./Index", "SaveCameraAccountAndWorkshopSetting")`;
	</script>
	<script src="~/assetsclient/pages/RollCall/js/CameraAccounts.js?ver=@clientVersion"></script>
}