<div id="signup_error" value="{{Data}}">
	<div class="session-wrapper mb-0">
		<div class="row h-100 mb-0">
			<div class="col s3 testimonial-sec">
				<div class="session-left">
					<div class="session-slider">
						{{#each data.testimonials}}
						<div class="slider-content">
							<img src="{{avatar}}" class="rounded-circle img-responsive" alt="avatar" width="170" height="170">
							<div class="slider-meta mb-3">
								<span class="d-block client-name fw-bold"><i>{{name}}</i></span>
								<span class="d-block client-digg">{{designation}}</span>
							</div>
							<p class="px-4">{{body}}</p>
						</div>
						{{/each}}
					</div>
				</div>
			</div>
			<div class="col s9 flex-center login-sec">
				<div class="session-right text-xs-center">
					<div class="session-table-cell">
						<div class="session-content">
							<div class="session-head text-center">
								<img src="/images/session-logo.png" class="img-responsive mb-3" alt="session logo" width="100" height="100">
								<h2 class="mb-3">Sign Up</h2>
								<div id="login_error" data-value="{{Data}}"></div>
								<p class="text-md">Having an account? <a href="/session/login">Log In</a></p>
							</div>
							<form method="post" action="/session/signup">
								<div class="input-field">
									<input name="email" autocomplete="off" id="signup_email" type="email" class="validate" required="">
									<label for="email">Email</label>
								</div>
								<div class="input-field">
									<input name="password" autocomplete="off" id="signup_password" type="password" class="validate" required="">
									<label for="password">Password</label>
								</div>
								<button class="btn btn-block btn-register waves-effect waves-light mb-2" onclick="sessionSignup()">
                           Sign Up
                        </button>
								<div class="text-center">
									<p>By signing up you agree to Vuely</p>
									<a href="">Terms and condtions</a>
								</div>
							</form>
							<div class="session-social-links d-block text-center">
								<ul class="list-inline social-list">
									<li>
										<span class="blue session-icon">
                                 <a href="javascript:;">
                                    <i class="ti-facebook"></i>
                                 </a>
                              </span>
									</li>
									<li>
										<span class="red session-icon">
                                 <a href="javascript:;"><i class="ti-google"></i></a>
                              </span>
									</li>
									<li><span class="error session-icon"><i class="ti-twitter-alt"></i></span></li>
									<li><span class="green session-icon"><i class="ti-github"></i></span></li>
								</ul>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>
{{#extend 'scripts'}}
<script type="text/javascript">
	$('input#user_name').characterCounter();
	var error = $('#signup_error').attr('data-value');
	if (error) {
		M.toast({
			html: error
		});
	}

</script> {{/extend}}
