{% extends 'base.html' %}

{% load static i18n %}

{% block title %}{% trans "Set New Password" %} - Agdar{% endblock %}

{% block outter_content %}
	<!-- BEGIN password-reset-confirm -->
	<div class="login login-v1">
		<!-- BEGIN login-container -->
		<div class="login-container">
			<!-- BEGIN login-header -->
			<div class="login-header">
				<div class="brand">
					<div class="d-flex align-items-center">
						<img src="{% static 'img/logo/Agdar-Logo.png' %}" alt="" class="me-2" style="height: 128px; ">
					</div>
					<small>{% trans "Behavioral Clinic Management System" %}</small>
				</div>
				<div class="icon">
					<i class="fa fa-lock"></i>
				</div>
			</div>
			<!-- END login-header -->
			
			<!-- BEGIN login-body -->
			<div class="login-body">
				<!-- BEGIN login-content -->
				<div class="login-content fs-13px">
					{% if validlink %}
						<h4 class="mb-3">{% trans "Enter New Password" %}</h4>
						<p class="text-muted mb-4">
							{% trans "Please enter your new password twice so we can verify you typed it in correctly." %}
						</p>

						{% if messages %}
							{% for message in messages %}
							<div class="alert alert-{{ message.tags }} alert-dismissible fade show" role="alert">
								{{ message }}
								<button type="button" class="btn-close" data-bs-dismiss="alert"></button>
							</div>
							{% endfor %}
						{% endif %}

						{% 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 action="" method="POST">
							{% csrf_token %}
							
							<div class="form-floating mb-20px">
								<input type="password" 
								       name="new_password1" 
								       class="form-control fs-13px h-45px {% if form.new_password1.errors %}is-invalid{% endif %}" 
								       id="new_password1" 
								       placeholder="{% trans 'New Password' %}"
								       required
								       autofocus />
								<label for="new_password1" class="d-flex align-items-center">{% trans "New Password" %}</label>
								{% 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="form-floating mb-20px">
								<input type="password" 
								       name="new_password2" 
								       class="form-control fs-13px h-45px {% if form.new_password2.errors %}is-invalid{% endif %}" 
								       id="new_password2" 
								       placeholder="{% trans 'Confirm New Password' %}"
								       required />
								<label for="new_password2" class="d-flex align-items-center">{% trans "Confirm New Password" %}</label>
								{% 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="login-buttons">
								<button type="submit" class="btn btn-theme h-45px d-block w-100 btn-lg">
									{% trans "Change Password" %}
								</button>
							</div>
						</form>
					{% else %}
						<div class="text-center mb-4">
							<div class="mb-3">
								<i class="fa fa-exclamation-triangle text-warning" style="font-size: 64px;"></i>
							</div>
							<h4 class="mb-3">{% trans "Invalid Reset Link" %}</h4>
							<p class="text-muted">
								{% trans "The password reset link was invalid, possibly because it has already been used or has expired." %}
							</p>
						</div>

						<div class="alert alert-warning" role="alert">
							<i class="fa fa-info-circle me-2"></i>
							{% trans "Password reset links expire after 24 hours for security reasons." %}
						</div>

						<div class="login-buttons mt-4">
							<a href="{% url 'password_reset' %}" class="btn btn-theme h-45px d-block w-100 btn-lg">
								{% trans "Request New Reset Link" %}
							</a>
						</div>

						<div class="text-center mt-3">
							<small>
								<a href="{% url 'login' %}" class="text-theme">
									<i class="fa fa-arrow-left me-1"></i>
									{% trans "Back to Login" %}
								</a>
							</small>
						</div>
					{% endif %}
				</div>
				<!-- END login-content -->
			</div>
			<!-- END login-body -->
		</div>
		<!-- END login-container -->
	</div>
	<!-- END password-reset-confirm -->
{% endblock %}