{% extends 'base.html' %}
{% load static %}

{% block title %}
    <title>Login</title>
{% endblock %}

{% block css %}
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
    <link rel="stylesheet" href="{% static 'assets/vendors/mdi/css/materialdesignicons.min.css' %}">
    <link rel="stylesheet" href="{% static 'assets/vendors/css/vendor.bundle.base.css' %}">
    <link rel="stylesheet" href="{% static 'assets/css/style.css' %}">
    <link rel="shortcut icon" href="{% static 'assets/images/favicon.png' %}" />

<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
    <script>
      var baseredirectlink = '{{redirectlink}}';
      var redirectlink = '{{redirectlink}}';
    </script>
{% endblock %}


{% block content %}
  <div class="container-scroller login-1">
      <div class="container-fluid page-body-wrapper full-page-wrapper">
        <div class="content-wrapper d-flex align-items-center auth">
          <div class="row flex-grow">
            <div class="col-lg-4 mx-auto">
              <div class="auth-form-light text-left p-3">
                <div class="brand-logo">
                  <img src="{% static 'images/logo1.png' %}">
                </div>
                <h4 class="hello-text">Hello! let's get started</h4>
                <h6 class="sign-text">Sign in to continue.</h6>
                <!-- <form class="pt-3"> -->
                  {% csrf_token %}

                   <h3 class="sign-text"> Login as : </h3> 
                  <div class="form-group text-center-all">
                     
                    <input type="radio" id="customer" name="userrole" value="customer" checked>
                    <label for="customer">Customer</label>
                    <input type="radio" id="company" name="userrole" value="company">
                    <label for="company">Company</label>
                    <input type="radio" id="driver" name="userrole" value="driver">
                    <label for="driver">Driver</label>
                    <span class="text-danger" id="userrole_txt"></span>
                  </div>
                  <div class="form-group">
                    <!-- <input type="email" class="form-control form-control-lg" id="exampleInputEmail1" placeholder="Username"> -->
                    <!-- <label for="email" >Email:</label> -->
          <input id="email" class="form-control form-control-lg" placeholder="Email Address">
          <span class="text-danger" id="email_txt"></span>
                  </div>
                  <div class="form-group">
                    <input type="password" class="form-control form-control-lg" id="password" placeholder="Password">
                    <span toggle="#password" class="mdi fa-eye fa  menu-icon icon-eye-1-2 field-icon toggle-password"></span>
          <span class="text-danger" id="password_txt"></span>
                  </div>
                  <div class="mt-3">
                    <button class="btn btn-block btn-gradient-primary btn-lg font-weight-medium auth-form-btn" id="login-btn" >SIGN IN</button>
                  </div>
                  <div class="my-2 d-flex justify-content-center align-items-center">
                    <!-- <div class="form-check">
                      <label class="form-check-label text-muted">
                        <input type="checkbox" class="form-check-input"> Keep me signed in </label>
                    </div> -->
                    <a href="/forgotpassword/" class="auth-link text-black text-center">Forgot password?</a>
                  </div>
                  <!-- <div class="mb-2">
                    <button type="button" class="btn btn-block btn-facebook auth-form-btn">
                      <i class="mdi mdi-facebook mr-2"></i>Connect using facebook </button>
                  </div> -->
                  <div class="text-center mt-4 font-weight-light"> Don't have an account? <a href="/register" class="text-primary bold">Create</a>
                  </div>
                <!-- </form> -->
              </div>
            </div>
          </div>
        </div>
        <!-- content-wrapper ends -->
      </div>
      <!-- page-body-wrapper ends -->
    </div>


    <div class="modal fade error-popup" id="ErrorMessageModal" role="dialog" >
     <div class="modal-dialog">
       <div class="modal-content">
         <div class="modal-header border-0">
           <!-- <button type="button" class="close" data-dismiss="modal">&times;</button> -->
         </div>
         <div class="modal-body">
           <h3 id="error-msg"></h3>
           <button type="button"  id="close-btn">Ok</button>
         </div>          
       </div>
     </div>
    </div>

    
{% endblock %}

{% block js %}
    <script src="{% static 'assets/vendors/js/vendor.bundle.base.js' %}"></script>
    <script src="{% static 'assets/js/off-canvas.js' %}"></script>
    <script src="{% static 'assets/js/hoverable-collapse.js' %}"></script>
    <script src="{% static 'assets/js/misc.js' %}"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
  <script src="{% static 'js/login.js' %}"></script>
{% endblock %}