<form action="index.php?Page=%%PAGE%%&Action=%%GLOBAL_SubmitAction%%" method="post" name="frmLogin" id="frmLogin" autocomplete="off">
	<div id="box" class="loginBox">
		<table><tr><td class="border-2 border-solid border-[#DDD] p-5 bg-white w-[300px]">
		<table>
			<tr>
			<td class="Heading1">
				<img src="%%WHITELABEL_ApplicationLogoImage%%" alt="{$lang.SendingSystem}" />
			</td>
			</tr>
			<tr>
			<td class="pb-2 !text-xs">%%GLOBAL_Message%%</td>
			</tr>
			<tr>
			<td>
				<table>
				<tr>
					<td>&nbsp;</td>
					<td> 
						 <a href="index.php?Page=Page=Login&Action=resendotp&userid=%%GLOBAL_USERID%%" name="SubmitButton"  class="FormButton" style="display:%%GLOBAL_OTP_Status%%">Resend OTP</a>
					</td>
					</tr>

					<tr><td class="Gap"></td></tr>
				</table>
			</td>
			</tr>
		</table>
		</td></tr>

		<tr>
			<td>

				<div class="PageFooter py-[10px] mb-5 text-center">
					%%LNG_Copyright%%
				</div>
			</td>
		</tr>

		</table>

	</div>

	</form>

	<script>

		$('#frmLogin').submit(function() {
			var f = document.frmLogin;

			if(f.otp.value == '')
			{
				alpineAlert('Please enter your OTP.');
				f.otp.focus();
				
				return false;
			}

			 

			// Everything is OK
			f.action = 'index.php?Page=Login&Action=%%GLOBAL_SubmitAction%%';
			return true;
		});

		function sizeBox() {
			var w = $(window).width();
			var h = $(window).height();
			$('#box').css('position', 'absolute');
			$('#box').css('top', h/2-($('#box').height()/2)-50);
			$('#box').css('left', w/2-($('#box').width()/2));
		}

		$(document).ready(function() {
			sizeBox();
			$('#username').focus();
		});

		$(window).resize(function() {
			sizeBox();
		});
		createCookie("screenWidth", screen.availWidth, 1);

	</script>