<style>

	* {box-sizing: border-box}

	/* Full-width input fields */
    input[type=text],
    input[type=email],
    input[type=password] {
	  width: 100%;
	  padding: 10px 15px;
	  margin: 0px 0 8px 0;
	  display: inline-block;
	  border: 1px solid #ADB4C2;
	  background: none;
	  border-radius:4px;
	}

	input[type=text]:focus,
	input[type=email]:focus,
    input[type=password]:focus {
	  background-color: #ddd;
	  outline: none;
	}

	hr {
	  border: 1px solid #f1f1f1;
	  margin-bottom: 25px;
	}

	/* Set a style for all buttons */
	button {
	  border-radius:4px;
	  background-color: #4CAF50;
	  color: white;
	  padding: 14px 20px;
	  margin: 8px 0;
	  border: none;
	  cursor: pointer;
	  width: 100%;
	  opacity: 0.9;
	}

	button:hover {
	  opacity:1;
	}

	/* Extra styles for the cancel button */
	.googlebtn {
	  padding: 14px 10px;
	  background-color: #ffffff;
	  color:#ADB4C2;
	box-shadow:0px 0px 10px;
	}

	/* Float cancel and signup buttons and add an equal width */
	.googlebtn {
	  float: left;
	  width: 100%;
	}
	.signinbtn {
	  float: left;
	  width: 100%;
	}
	.orspan {
	  float: left;
		text-align: center;
		width: 100%;
		font-weight: bold;
		line-height:40px;
	}

	/* Add padding to container elements */
	.container {
	  padding: 16px;
	}

	/* Clear floats */
	.clearfix::after {
	  content: "";
	  clear: both;
	  display: table;
	}

	/* Change styles for cancel button and signup button on extra small screens */
	@media screen and (max-width: 300px) {
	  .googlebtn, .signinbtn, .orspan {
		width: 100%;
	  }
	}
</style>

<div class="col-md-6" style="margin:0px auto;"> 
<form action="<?php echo HTTP_SITE_URL.'/users/resetpass/'.$resetPassToken;?>" style="border:1px solid #ccc;background:#FFFFFF;" method="POST" autocomplete="off">
  <div style="padding:15px;">
    <h5>Set New Password</h5>
      <?php echo $this->Session->read('system.message'); ?>
    <br>

      <label for="psw" class="label"><b>New Password*</b></label>
      <input type="password" placeholder="Enter New Password" name="password" autocomplete="off" required>

      <label for="psw" class="label"><b>Confirm Password*</b></label>
      <input type="password" placeholder="Enter Confirm Password" name="confirm_password" autocomplete="off" required>
      <label class="confirmPassMsg" style="color:red;font-weight: bold;"></label>
    <div class="clearfix">
      <button type="submit" class="signinbtn" name="resetpassbtn">Submit</button>
	</div>
  </div>
</form>
</div>

<script type="text/javascript">
    $(document).ready(function () {
        $(document).on('keyup','input[name=confirm_password]',function () {
            $pass = $('input[name=password]').val();
            $confirm_pass = $('input[name=confirm_password]').val();
            if($pass != $confirm_pass){
                $('.confirmPassMsg').text("Password doesn't match");
            } else {
                $('.confirmPassMsg').text('');
            }
        });

    });
</script>
