<!DOCTYPE html>
<html lang="en">
    <head> 
		<meta name="viewport" content="width=device-width, initial-scale=1">

		<!-- Website CSS style -->
		<link href="/static/css/bootstrap.min.css" rel="stylesheet">

		<!-- Website Font style -->
	    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css">
		<link rel="stylesheet" href="/static/css/style.css">
		<!-- Google Fonts -->
		<link href='https://fonts.googleapis.com/css?family=Passion+One' rel='stylesheet' type='text/css'>
		<link href='https://fonts.googleapis.com/css?family=Oxygen' rel='stylesheet' type='text/css'>
		<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
		<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
		<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
		<title>Subscription Based</title>
	</head>
	<body>
	{% if user.is_authenticate %}
	redirect ("")

	{% else %}
		<div class="container">
			<div class="row main">
				<div class="main-login main-center">
				<h5>Sign in once and get free subscription</h5>
					<form class="" id="signup">
						<div id="output" class="text-center text-primary font-weight-medium alert"></div>

						<div class="form-group">
							<label for="email" class="cols-sm-2 control-label">Your Email</label>
							<div class="cols-sm-10">
								<div class="input-group">
									<span class="input-group-addon"><i class="fa fa-envelope fa" aria-hidden="true"></i></span>
									<input type="text" class="form-control" id="email"  placeholder="Enter your Email" autocomplete="off" />
								</div>
							</div>
							<div id="emailMessage"></div>
						</div>

						<div class="form-group">
							<label for="password" class="cols-sm-2 control-label">Password</label>
							<div class="cols-sm-10">
								<div class="input-group">
									<span class="input-group-addon"><i class="fa fa-lock fa-lg" aria-hidden="true"></i></span>
									<input type="password" class="form-control" id="password"  placeholder="Enter your Password"/>
								</div>
							</div>
						</div>

						<div class="form-group ">
							<button type="submit" id="submit" class="btn btn-primary btn-lg btn-block login-button">Login</button>
						</div>
						
					</form>
					wants to register? Click here to <a href="/">Register</a>
					{% comment %} <p>Don't have an account <a href="{% url "register" %}">register here</a></p> {% endcomment %}
				</div>
			</div>
		</div>
		{% endif %}

		 <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <!-- <script src="/static/js/bootstrap.min.js"></script> -->
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>


    <script type="text/javascript" src="/static/js/passwordChecker.js"></script>
<script type="text/javascript">
    // Get Form and Sumbit
    $('#signup').on('submit', function(e){

        e.preventDefault();

          $.ajax({
               type : "POST",
               url: "{% url 'login_ajax' %}", /* django ajax posting url  */
               data: {
                email : $('#email').val(),
                password : $('#password').val(),
                csrfmiddlewaretoken: '{{ csrf_token }}',
                dataType: "json",

               },
               
               success: function(data){
                console.log(data);
                if (data.error){
                    $('#signup').find('.alert').removeClass('alert-success');
                    $('#signup').find('.alert').removeClass('none');
                    $('#signup').find('.alert').addClass('alert-warning');
                    $('#output').html(data.error) /* response message */
                }
                else{
                    $('#signup').find('.alert').removeClass('alert-warning');
                    $('#signup').find('.alert').removeClass('none');
                    $('#signup').find('.alert').addClass('alert-success');
                    $('#output').html(data.success) /* response message */
                    window.setTimeout(function(){
                        $('#signup').find('input[type=text], textarea').val('');
                    }, 700);
                    setTimeout(redirect, 2000);
                    function redirect(){
                       window.location.href = "{% url 'home' %}";
                    }
                }
                
               },

               failure: function() {
          //       console.log(typeof(data.msg));
                // $('.alert').html(data.msg+"hello")
                   
               }


       });
    });
</script>
	</body>
</html>