[% # INCLUDE dumper.tt dump = settings %]
<section id="login">
  <div class="container">
  	<div class="row">
      <div class="col-xs-12">
   	    <div class="form-wrap">
          <h1>Log in with your email account</h1>
          <form role="form" action="javascript:;" method="post"
              id="login-form" autocomplete="[% settings.environment.match('development')
                ? 'on' : 'off' %]">
            <div class="form-group">
              <label for="email" class="sr-only">Email</label>
              <input type="email" name="username" id="email" class="form-control"
                  placeholder="somebody@example.com">
            </div>
            <div class="form-group">
              <label for="key" class="sr-only">Password</label>
              <input type="password" name="key" id="key" class="form-control"
                    placeholder="your password [user{x} for demo]">
            </div>
            <div class="checkbox">
              <span class="character-checkbox" onclick="showPassword()"></span>
              <span class="label">Show password</span>
            </div>
            <input type="submit" id="btn-login" value="Log in"
                  class="btn btn-custom btn-lg btn-block">
          </form>
          <a href="javascript:;" class="forget" data-toggle="modal"
                data-target=".forget-modal">Forgot your password?</a>
   	    </div><!-- /.form-wrap -->
    	</div> <!-- /.col-xs-12 -->
    </div> <!-- /.row -->
  </div> <!-- /.container -->
</section>

<div class="modal fade forget-modal" tabindex="-1" role="dialog" aria-hidden="true"
    aria-labelledby="myForgetModalLabel">
	<div class="modal-dialog modal-sm">
		<div class="modal-content">
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal">
					<span aria-hidden="true">×</span>
					<span class="sr-only">Close</span>
				</button>
				<h4 class="modal-title">Recovery password</h4>
			</div>
			<div class="modal-body">
				<p>Type your email account</p>
				<input type="email" name="recovery-email" id="recovery-email"
            class="form-control" autocomplete="off">
			</div>
			<div class="modal-footer">
				<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
				<button type="button" class="btn btn-custom">Recovery</button>
			</div>
		</div> <!-- /.modal-content -->
	</div> <!-- /.modal-dialog -->
</div> <!-- /.modal -->