<?xml version="1.0" encoding="utf-8"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">

<xsl:variable name="Space"><xsl:text>&amp;nbsp;</xsl:text></xsl:variable>
<xsl:output method="html"/>

<xsl:template match="/">
	<html>
		<head>
			<link rel="STYLESHEET" href="css/main.css" type="text/css"/>
			<script type="text/javascript">
				function checkInputs(event) 
				{
				  // Get the input values
				  var value1 = document.getElementById("password").value;
				  var value2 = document.getElementById("password_repeat").value;

				  // Compare them
				  if (value1 !== value2) 
				  {
					// ❌ Stop form submission
					event.preventDefault();

					// clear the fields
					document.getElementById("password").value = "";
					document.getElementById("password_repeat").value = "";

					// Show alert popup
					alert("The passwords do not match, please correct");
					return false;
				  }
				  // ✅ Allow submission if they match
				  return true;
				}

			</script>
		</head>
		<body>
			<xsl:apply-templates select="*[starts-with(name(), '_')]"/>	
		</body>
	</html>
        
        
</xsl:template>


<!-- ======================================================================= -->
	<xsl:template match="_reset_page">
		<div class="page_header">Reset Password</div>
		<form name="reset_form" method="POST" action="{@reset_form_url}">
			<table class="login">
				<tr>
					<td></td>
					<td>Enter your registered email address to receive a password reset link</td>
				</tr>
				<tr>
					<td class="input_label">Username</td>
					<td><input type="text" name="email" id="email"  required="Y"/></td>
				</tr>
				<tr>
					<td></td>
					<td>
						<button type="submit" name="action" value="save">Reset</button>
					</td>
				</tr>
			</table>
		</form>
		<p/>
	</xsl:template>


	<xsl:template match="_reset_message">
		<div class="page_header">Reset Requested</div>
		<p>If your email address is registered on our system, a reset link will be sent, please follow the instructions to reset your password.</p>
		<a href="{@login_url}"><button>Back to login page</button></a>
	</xsl:template>

	<xsl:template match="_new_pwd_request">
		<div class="page_header">Set New Password</div>
		<form name="reset_form" method="POST" action="{@new_pwd_form_url}" onsubmit="return checkInputs(event)">
			<table class="login">
				<tr>
					<td class="input_label">Password</td>
					<td><input type="password" name="password" id="password" required="Y"/></td>
				</tr>
				<tr>
					<td class="input_label">Repeat Password</td>
					<td><input type="password" name="password_repeat" id="password_repeat" required="Y"/></td>
				</tr>
				<tr>
					<td><input type="hidden" name="uid" value="{@pwd_uid}"/></td>
					<td>
						<button type="submit" name="action" value="save">Reset</button>
					</td>
				</tr>
			</table>
		</form>
	</xsl:template>


</xsl:stylesheet>