<div class="modal-header">
	<h4 class="modal-title" id="password-modal-label">Change password</h4>
	<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>

<div class="modal-body">
	<form>
		<div class="mb-4">
			<label class="form-label" for="password-current">Current password</label>
			{% include "ui/form/input-group.html" type="password" id="password-current" placeholder="Enter your current password" append-button="eye:Show password" flat=true %}
		</div>

		<div class="mb-4">
			<label class="form-label" for="password-new">New password</label>
			{% include "ui/form/input-group.html" type="password" id="password-new" placeholder="Enter new password" append-button="eye:Show password" flat=true %}
			<small class="form-hint">
				Your password must be 8-20 characters long, contain letters and numbers, and must not contain
				spaces, special characters, or emoji.
			</small>
			<div class="mt-2">
				<div class="progress" style="height: 4px;">
					<div class="progress-bar" id="password-strength" role="progressbar" style="width: 0%"></div>
				</div>
				<div class="text-secondary text-xs mt-1" id="password-strength-text"></div>
			</div>
		</div>

		<div class="mb-4">
			<label class="form-label" for="password-confirm">Confirm new password</label>
			{% include "ui/form/input-group.html" type="password" id="password-confirm" placeholder="Confirm your new password" append-button="eye:Show password" flat=true %}
			<div class="invalid-feedback d-none" id="password-match-error">
				Passwords do not match.
			</div>
		</div>

		{% include "ui/button.html" type="submit" text="Update password" color="primary" block=true class="mt-4" %}
	</form>
</div>

{% capture_script %}
<script>
document.addEventListener("DOMContentLoaded", function () {
	function setupPasswordToggle(inputId) {
		const input = document.getElementById(inputId);
		if (!input) return;
		
		const inputGroup = input.closest('.input-group');
		if (!inputGroup) return;
		
		const toggleLink = inputGroup.querySelector('a.link-secondary');
		if (!toggleLink) return;
		
		toggleLink.addEventListener('click', function(e) {
			e.preventDefault();
			const isPassword = input.type === 'password';
			input.type = isPassword ? 'text' : 'password';
			
			// Update tooltip text
			const tooltipText = isPassword ? 'Hide password' : 'Show password';
			this.setAttribute('title', tooltipText);
			this.setAttribute('data-bs-original-title', tooltipText);
			
			// Update icon (simple approach - toggle classes if needed)
			const svg = this.querySelector('svg');
			if (svg) {
				const use = svg.querySelector('use');
				if (use) {
					use.setAttribute('href', isPassword ? '#icon-eye-off' : '#icon-eye');
				}
			}
		});
	}

	setupPasswordToggle('password-current');
	setupPasswordToggle('password-new');
	setupPasswordToggle('password-confirm');

	const newPasswordInput = document.getElementById('password-new');
	const strengthBar = document.getElementById('password-strength');
	const strengthText = document.getElementById('password-strength-text');

	if (newPasswordInput && strengthBar && strengthText) {
		newPasswordInput.addEventListener('input', function() {
			const password = this.value;
			let strength = 0;
			let strengthLabel = '';

			if (password.length >= 8) strength++;
			if (password.length >= 12) strength++;
			if (/[a-z]/.test(password) && /[A-Z]/.test(password)) strength++;
			if (/\d/.test(password)) strength++;
			if (/[^a-zA-Z0-9]/.test(password)) strength++;

			const percentage = (strength / 5) * 100;
			strengthBar.style.width = percentage + '%';

			if (strength <= 2) {
				strengthBar.className = 'progress-bar bg-danger';
				strengthLabel = 'Weak';
			} else if (strength <= 3) {
				strengthBar.className = 'progress-bar bg-warning';
				strengthLabel = 'Fair';
			} else if (strength <= 4) {
				strengthBar.className = 'progress-bar bg-info';
				strengthLabel = 'Good';
			} else {
				strengthBar.className = 'progress-bar bg-success';
				strengthLabel = 'Strong';
			}

			strengthText.textContent = password ? strengthLabel : '';
		});
	}

	const confirmPasswordInput = document.getElementById('password-confirm');
	const matchError = document.getElementById('password-match-error');

	if (newPasswordInput && confirmPasswordInput && matchError) {
		function validateMatch() {
			const newPassword = newPasswordInput.value;
			const confirmPassword = confirmPasswordInput.value;

			if (confirmPassword && newPassword !== confirmPassword) {
				confirmPasswordInput.classList.add('is-invalid');
				matchError.classList.remove('d-none');
			} else {
				confirmPasswordInput.classList.remove('is-invalid');
				matchError.classList.add('d-none');
			}
		}

		newPasswordInput.addEventListener('input', validateMatch);
		confirmPasswordInput.addEventListener('input', validateMatch);
	}
});
</script>
{% endcapture_script %}

