<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: 45%;
	}
	.signupbtn {
	  float: left;
	  width: 40%;
	}
	.orspan {
	  float: left;
		text-align: center;
		width: 15%;
		font-weight: bold;
	}

	/* 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: 991px) {
	  .googlebtn, .signupbtn, .orspan {
		width: 100%;
	  }
	  .orspan {
		margin-top: 0px !important;
	  }
	}
	@media screen and (min-width: 991px) and (max-width: 1200px) {
	  .googlebtn{
		width: 60%;
	  }
	  .signupbtn{
		width: 30%;
	  }
	  .orspan {
		width: 10%;
	  }
	}
</style>


<!--<link href='https://fonts.googleapis.com/css?family=Lato:300,400,500' rel='stylesheet' type='text/css'>-->


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

    <label for="name" class="label"><b>Name* </b></label>
    <input type="text" placeholder="Enter a Name" id="Name" name="name" autocomplete="off" required />
	
    <label for="email" class="label"><b>Email Address* </b></label>
    <input type="email" placeholder="Enter your Email Address" id="Email" name="email" autocomplete="off" required />

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

      <label><strong>Enter Captcha*:</strong></label><br />
      <input type="text" name="captcha" autocomplete="off" required />
      <p><img src="<?php echo HTTP_SITE_URL.'/captcha.php?rand='.rand(); ?>" id='captcha_image'>
<!--      <p><img src="--><?php //echo HTTP_SITE_URL.'/users/captcha/'.rand(); ?><!--" id='captcha_image'>-->
      Can't read the image? <a href='javascript: refreshCaptcha();'>click here</a> to refresh</p>

    <div class="clearfix">
      <button type="submit" class="signupbtn btn-primary" name="singupbtn">Sign Up</button>
	  <!--span class="orspan mt-4"> OR </span>
      <button type="button" class="googlebtn"><img style="display:inline-block;height:25px;" src="<?=HTTP_SITE_URL.'/images/g.png'?>" /><span style="mt-1"> Sign in with Google</span></button-->
    </div>
	<br><p>By signing up you agree to the <a href="<?php echo HTTP_SITE_URL;?>/pages/termscondition" style="color:dodgerblue">Terms of Service</a> and <a href="<?php echo HTTP_SITE_URL;?>/pages/privacypolicy" style="color:dodgerblue">Privacy Policy</a>.</p>
  </div>
</form>
</div>

<script>
    //Refresh Captcha
    function refreshCaptcha(){
        var img = document.images['captcha_image'];

        img.src = img.src.substring(
            0,img.src.lastIndexOf("?")
        )+"?rand="+Math.random()*1000;

        // img.src = img.src.substring(
        //     0,img.src.lastIndexOf("/")
        // )+"/"+Math.random()*1000;
    }
    // refreshCaptcha();
</script>