{% extends 'base.html' %}

{% load static i18n %}

{% block title %}{% trans "Change Password" %} - Agdar{% endblock %}

{% block content %}
<div class="container-fluid">
	<!-- BEGIN breadcrumb -->
	<ol class="breadcrumb float-xl-end">
		<li class="breadcrumb-item"><a href="{% url 'core:dashboard' %}">{% trans "Home" %}</a></li>
		<li class="breadcrumb-item"><a href="{% url 'core:user_profile' %}">{% trans "Profile" %}</a></li>
		<li class="breadcrumb-item active">{% trans "Change Password" %}</li>
	</ol>
	<!-- END breadcrumb -->
	
	<!-- BEGIN page-header -->
	<h1 class="page-header">
		{% trans "Change Password" %}
		<small>{% trans "Update your account password" %}</small>
	</h1>
	<!-- END page-header -->

	<div class="row">
		<div class="col-xl-8 col-lg-10">
			<div class="card">
				<div class="card-body">
					<div class="mb-4">
						<p class="text-muted">
							{% trans "Use this form to change your password. For security reasons, you must enter your current password." %}
						</p>
					</div>
					{% if form.non_field_errors %}
					<div class="alert alert-danger alert-dismissible fade show" role="alert">
						{{ form.non_field_errors }}
						<button type="button" class="btn-close" data-bs-dismiss="alert"></button>
					</div>
					{% endif %}

					<form method="POST" action="">
						{% csrf_token %}
						
						<div class="mb-3">
							<label for="id_old_password" class="form-label">
								{% trans "Current Password" %}
								<span class="text-danger">*</span>
							</label>
							<input type="password" 
							       name="old_password" 
							       class="form-control {% if form.old_password.errors %}is-invalid{% endif %}" 
							       id="id_old_password" 
							       required
							       autofocus />
							{% if form.old_password.errors %}
							<div class="invalid-feedback">
								{{ form.old_password.errors }}
							</div>
							{% endif %}
							<small class="form-text text-muted">
								{% trans "Enter your current password for verification." %}
							</small>
						</div>

						<hr class="my-4">

						<div class="mb-3">
							<label for="id_new_password1" class="form-label">
								{% trans "New Password" %}
								<span class="text-danger">*</span>
							</label>
							<input type="password" 
							       name="new_password1" 
							       class="form-control {% if form.new_password1.errors %}is-invalid{% endif %}" 
							       id="id_new_password1" 
							       required />
							{% if form.new_password1.errors %}
							<div class="invalid-feedback">
								{{ form.new_password1.errors }}
							</div>
							{% endif %}
							<small class="form-text text-muted">
								<ul class="mb-0 ps-3">
									<li>{% trans "Your password can't be too similar to your other personal information." %}</li>
									<li>{% trans "Your password must contain at least 8 characters." %}</li>
									<li>{% trans "Your password can't be a commonly used password." %}</li>
									<li>{% trans "Your password can't be entirely numeric." %}</li>
								</ul>
							</small>
						</div>

						<div class="mb-4">
							<label for="id_new_password2" class="form-label">
								{% trans "Confirm New Password" %}
								<span class="text-danger">*</span>
							</label>
							<input type="password" 
							       name="new_password2" 
							       class="form-control {% if form.new_password2.errors %}is-invalid{% endif %}" 
							       id="id_new_password2" 
							       required />
							{% if form.new_password2.errors %}
							<div class="invalid-feedback">
								{{ form.new_password2.errors }}
							</div>
							{% endif %}
							<small class="form-text text-muted">
								{% trans "Enter the same password as before, for verification." %}
							</small>
						</div>

						<div class="d-flex justify-content-between align-items-center">
							<a href="{% url 'core:user_profile' %}" class="btn btn-default">
								<i class="fa fa-arrow-left me-1"></i>
								{% trans "Cancel" %}
							</a>
							<button type="submit" class="btn btn-primary">
								<i class="fa fa-save me-1"></i>
								{% trans "Change Password" %}
							</button>
						</div>
					</form>
				</div>
			</div>

			<!-- Security Tips -->
			<div class="card mt-3">
				<div class="card-header">
					<h5 class="card-title mb-0">
						<i class="fa fa-shield-alt me-2"></i>
						{% trans "Password Security Tips" %}
					</h5>
				</div>
				<div class="card-body">
					<ul class="mb-0">
						<li>{% trans "Use a unique password that you don't use for other websites" %}</li>
						<li>{% trans "Use a combination of uppercase and lowercase letters, numbers, and symbols" %}</li>
						<li>{% trans "Avoid using personal information like your name, birthday, or common words" %}</li>
						<li>{% trans "Consider using a password manager to generate and store strong passwords" %}</li>
						<li>{% trans "Change your password regularly, especially if you suspect it may have been compromised" %}</li>
					</ul>
				</div>
			</div>
		</div>
	</div>
</div>
{% endblock %}