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

{% block title %}
    <title>Forgot Password</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' %}" />

    
{% endblock %}


{% block content %}
  <div class="container-scroller login-1 forgot-tt">
      <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> -->

              <h4 class="hello-text">Forgot Password</h4>


               
                <!-- <h6 class="sign-text">Fill the details below:</h6> -->
                <!-- <form class="pt-3"> -->
                  {% csrf_token %}

                   <h3 class="sign-text"> Role : </h3> 
                  <div class="form-group  rad-btn">
                     
                  <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="mt-3">
                    <button class="btn btn-block btn-gradient-primary btn-lg font-weight-medium auth-form-btn" id="forgotpassword-btn" >FORGOT PASSWORD</button>
                  </div>
                  <div class="my-2 d-flex justify-content-center align-items-center">
                    <a href="/login/" class="auth-link text-black text-center">Login</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/forgotpassword.js' %}"></script>
{% endblock %}