<!DOCTYPE html>
<html>
  <title> Update Password </title>
<!-- CSS  -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">

<body>
  <style>
      
    .h1{
      margin: 50px 50px 50px 250px;
      
    }
     body{
        background: url(https://images.unsplash.com/photo-1486286701208-1d58e9338013?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=750&q=80);
        background-size: cover;
        background-position: center;
    } 
    /* .card{
      margin: 25px 250px;
    }
    .form{
        margin: 25px 75px 50px 250px;
        padding: 6px 0;
        
      } */
      p{
		background-color: tomato;
	}
    .fa-plus{
      font-size: 30px;
    }
    body{
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    }
    .dropdown{
margin: 10px;
}

</style>

<title>Timetable</title>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
  
    <div class="container">
      
      <a class="navbar-brand" href="{% url 'resources' %}">Sports Resources</a>
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
      </button>


        <div class="collapse navbar-collapse" id="navbarSupportedContent">
          
          <ul class="navbar-nav mr-auto">
            <!-- <li class="nav-item active">
            <a class="nav-link" href="#">Home </a>
            </li> -->
            <li class="nav-item">
              <a class="nav-link" href="{% url 'about' %}">About</a>
            </li>
    
            <li class="nav-item">
              <a class="nav-link" href="{% url 'bookingHistory' %}">Booking History</a>
            </li>
    
            <li class="nav-item">
              <a class="nav-link" href="{% url 'bookingRequests' %}">Booking Requests</a>
            </li>
    
            <li class="nav-item">
              <a class="nav-link" href="{% url 'blockedUsers' %}">Blocked Users</a>
            </li>
            <li class="nav-item active">
                <a class="nav-link" href="{% url 'timetable' %}">Timetable</a>
              </li>
          </ul>
  
          <ul class="nav navbar-nav navbar-right">
            
            <li class="nav-item"><a class="nav-link" href ="{% url 'logout' %}">Logout</a></li>
            <!-- <li class="nav-item"><a class="nav-link"href ="#">Login <i class="fa fa-user-plus" aria-hidden="true"></i></a></li> -->
          
           </ul>

        </div>

    </div> 

  </nav>

<!--<form method="POST" action="{% url 'cPassword' %}">
    {% csrf_token %}
    <center>
      <p>{{data}}</p>
  <label for="password">Enter Id:</label><br>
  <input type="text"  name="id1" placeholder="Id"><br>
  <label for="password">Old Password:</label><br>
  <input type="password" id="password" name="old_password" placeholder="Enter new password"><br>
  <label for="password">New Password:</label><br>
  <input type="password" id="password" name="password" placeholder="Enter new password"><br>
  <label for="confirm_password">Confirm Password</label><br>
  <input type="password" id="confirm_password" name="confirm_password" placeholder="Confirm Password"><br><br>
  <input type="submit" value="Submit">
  </center>
</form> 

</body>
</html>-->
<div class="container pt-5">
	<div class="row mt-5 pt-5">
	<div class="col-5" style="border-radius: 10px;">
	</div>
	<div class="col-6 my-4 p-4">
	<center><h1 class="text-white mb-4">Change Password</h1></center>
	<form method="POST" action="{%url 'cPassword'%}">
		{% csrf_token %}
		<p>{{data}}</p>
		<div class="form-group">
		<!-- <label for="id" style="color:white">Id</label> -->
		<input type="text" name="id1" placeholder="Id" required class="form-control my-2">
		<!-- <label for="name"  style="color:white">Username</label> -->
		<!-- <label for="password" style="color:white">Password</label> -->
    <input type="password" name="old_password" placeholder=" Enter Old Password" required class="form-control my-2">
    <input type="password" name="password" placeholder="Enter New Password" required class="form-control my-2">
    <input type="password" name="confirm_password" placeholder="Confirm Password" required class="form-control my-2">
		</div>
		<!--<a href="{% url 'resources' %}">-->
		<center><input class="btn col-6 text-black font-weight-bold" type="submit" value="Submit" style="background-color:  #b3462b; font-size: 18px;"></center>
		<!-- </a> -->
	</form>
	</div>
	</div>
</div>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>

<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>

<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
</body>
</html>