{% extends 'base.html' %}

{% load static %}




{% block content %}

<main class="content">
	<div class="container-fluid p-0">

		
		<div class="row">
			<div class="col-md-6">
				<div class="row">
					<div class="col-md-10 mb-3">
						<h1 class="h3 d-inline align-middle">Change Password - {{user_profile.user.first_name|upper}}
							{{user_profile.middle_name|upper}} ({{user_profile.user.username}})</h1>
							<br><i>All fields marked with an asterisk (<span style="color:red;">*</span>) are required</i>
					</div>

					<div class="col-md-2 mb-3 text-sm-end">
						<a href="{% url 'view-user' user_profile.user.id %}" class="btn btn-dark">Go Back</a>
					</div>
				</div>

			</div>
		</div>

		

		

		

			<form class="row" action="{% url 'change-password' %}" method="post">
				{% csrf_token %}

				

				<div class="col-12 col-xl-6">
					<input type="hidden" name="original_user_id" value="{{user_profile.user.id}}">

					{% include 'partials/_messages.html' %}

					<div class="card">
						<div class="card-header">
							<h5 class="card-title mb-0">Change Password</h5>
						</div>
						<div class="card-body">

							<div class="row mb-6">

								<div class="col-md-4">
									<div class="text-center">

										{% if user_profile.profile_picture_url %}
										<img alt="Charles Hall" id="userProfilePicture" src="{{user_profile.profile_picture_url}}"
											class="rounded-circle img-responsive mt-2" width="128" height="128" />
										{% else %}
										<img alt="Charles Hall" id="userProfilePicture" src="{% static 'img/avatars/default-user.png' %}"
											class="rounded-circle img-responsive mt-2" width="128" height="128" />

										{% endif %}
									</div>
								</div>

								<div class="col-md-8">

									<div class="mb-3 form-group required">
										<label class="form-label control-label" for="inputPassword">Password</label>
										<div class="input-group">
										  <input type="password" class="form-control" id="inputPassword" name="password"
												 placeholder="Password" value="{{old_input_field_values.password}}">
										  <button type="button" class="btn btn-outline-secondary toggle-password" data-target="#inputPassword">
											<i class="fa fa-eye"></i>
										  </button>
										</div>
									  </div>
									  
									  <div class="mb-3 form-group required">
										<label class="form-label control-label" for="inputRetypePassword">Re-type Password</label>
										<div class="input-group">
										  <input type="password" class="form-control" id="inputRetypePassword"
												 placeholder="Re-type Password" name="re_typed_password" value="{{old_input_field_values.re_typed_password}}">
										  <button type="button" class="btn btn-outline-secondary toggle-password" data-target="#inputRetypePassword">
											<i class="fa fa-eye"></i>
										  </button>
										</div>
									  </div>
									  

								</div>

							</div>

							<div class="row">


								

								<div class="col-12 text-sm-end">
									<button type="submit" class="btn btn-primary mb-3 mt-3">Save Changes</button>
								</div>

							</div>

						</div>
					</div>


				</div>

			</form>
		

	</div>
</main>

<script>
	document.querySelectorAll(".toggle-password").forEach(btn => {
	  btn.addEventListener("click", function() {
		const target = document.querySelector(this.dataset.target);
		const icon = this.querySelector("i");
  
		if (target.type === "password") {
		  target.type = "text";
		  icon.classList.remove("fa-eye");
		  icon.classList.add("fa-eye-slash");
		} else {
		  target.type = "password";
		  icon.classList.remove("fa-eye-slash");
		  icon.classList.add("fa-eye");
		}
	  });
	});
  </script>
  

{% endblock %}