{% extends 'base.html' %}

{% load static i18n %}

{% block title %}{% trans "Password Changed" %} - 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 "Password Changed" %}</li>
	</ol>
	<!-- END breadcrumb -->
	
	<!-- BEGIN page-header -->
	<h1 class="page-header">
		{% trans "Password Changed Successfully" %}
	</h1>
	<!-- END page-header -->

	<div class="row">
		<div class="col-xl-8 col-lg-10">
			<div class="card">
				<div class="card-body text-center py-5">
					<div class="mb-4">
						<i class="fa fa-check-circle text-success" style="font-size: 80px;"></i>
					</div>
					
					<h3 class="mb-3">{% trans "Your Password Has Been Changed" %}</h3>
					
					<p class="text-muted mb-4">
						{% trans "Your password has been successfully updated. You can now use your new password to log in." %}
					</p>

					<div class="alert alert-success d-inline-block" role="alert">
						<i class="fa fa-info-circle me-2"></i>
						{% trans "For security reasons, please keep your password safe and don't share it with anyone." %}
					</div>

					<div class="mt-4">
						<a href="{% url 'core:user_profile' %}" class="btn btn-primary btn-lg me-2">
							<i class="fa fa-user me-2"></i>
							{% trans "Back to Profile" %}
						</a>
						<a href="{% url 'core:dashboard' %}" class="btn btn-default btn-lg">
							<i class="fa fa-home me-2"></i>
							{% trans "Go to Dashboard" %}
						</a>
					</div>
				</div>
			</div>

			<!-- Security Notice -->
			<div class="card mt-3">
				<div class="card-header bg-light">
					<h5 class="card-title mb-0">
						<i class="fa fa-shield-alt me-2"></i>
						{% trans "Security Notice" %}
					</h5>
				</div>
				<div class="card-body">
					<p class="mb-2">
						<strong>{% trans "What happens next?" %}</strong>
					</p>
					<ul class="mb-0">
						<li>{% trans "You will remain logged in on this device" %}</li>
						<li>{% trans "You may need to log in again on other devices using your new password" %}</li>
						<li>{% trans "If you didn't make this change, please contact support immediately" %}</li>
					</ul>
				</div>
			</div>
		</div>
	</div>
</div>
{% endblock %}