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

{% block content %}
<main class="content">
	<div class="container-fluid p-4">
		<div class="d-flex justify-content-between align-items-center mb-4">
			<div>
				<h1 class="h2 mb-1 fw-bold" style="color: #0e2e63;">
					<i class="fas fa-key me-2"></i>Change Password
				</h1>
				<p class="text-muted small">{{user_profile.user.first_name|upper}} {{user_profile.middle_name|upper}} ({{user_profile.user.username}})</p>
			</div>
			<a href="{% url 'view-user' user_profile.user.id %}" class="btn btn-light">
				<i class="fas fa-arrow-left me-1"></i> Back
			</a>
		</div>

		<div class="row">
			<div class="col-12 col-xl-6">
				{% include 'partials/_messages.html' %}

				<form action="{% url 'change-password' %}" method="post">
					{% csrf_token %}
					<input type="hidden" name="original_user_id" value="{{user_profile.user.id}}">

					<div class="card shadow-sm border-0" style="border-radius: 12px;">
						<div class="card-header bg-white border-0">
							<h5 class="fw-bold" style="color: #0e2e63;">
								<i class="fas fa-lock me-2"></i>Change Password
							</h5>
						</div>
						<div class="card-body">
							<div class="row">
								<div class="col-md-4">
									<div class="text-center">
										{% if user_profile.profile_picture_url %}
										<img alt="Profile Picture" id="userProfilePicture" src="{{user_profile.profile_picture_url}}"
											class="rounded-circle img-responsive mt-2" width="128" height="128" />
										{% else %}
										<img alt="Profile Picture" 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">
										<label class="form-label fw-semibold" style="color: #0e2e63;">New Password <span class="text-danger">*</span></label>
										<input type="password" class="form-control" id="inputPassword" name="password" style="border-radius: 8px; padding: 10px;" placeholder="Enter new password" value="{{old_input_field_values.password}}">
									</div>
									<div class="mb-3">
										<label class="form-label fw-semibold" style="color: #0e2e63;">Re-type Password <span class="text-danger">*</span></label>
										<input type="password" class="form-control" name="re_typed_password" id="inputRetypePassword" style="border-radius: 8px; padding: 10px;" placeholder="Re-type new password" value="{{old_input_field_values.re_typed_password}}">
									</div>
								</div>
							</div>
							<div class="text-sm-end mt-3">
								<button type="submit" class="btn" style="background: #0e2e63; color: #fff; padding: 10px 40px; border-radius: 8px;">
									<i class="fas fa-save me-2"></i> Change Password
								</button>
							</div>
						</div>
					</div>
				</form>
			</div>
		</div>
	</div>
</main>
{% endblock %}