{% extends "password_base.html" %}
{% load crispy_forms_tags %}

{% block title %}Set New Password{% endblock %}

{% block header %}
<h4>Set New Password</h4>
<p>Enter your new password below.</p>
{% endblock %}

{% block content %}
<form method="POST">
    {% csrf_token %}
    
    <div class="col-md-12 position-relative mb-3">
        {{ form.new_password1|as_crispy_field }}
        <span class="eye" onclick="togglePasswordVisibility('id_new_password1', 'toggleIcon1')" style="top: 45px;">
            <i class="bi bi-eye-slash" id="toggleIcon1"></i>
        </span>
    </div>

    <div class="col-md-12 position-relative mb-3">
        {{ form.new_password2|as_crispy_field }}
        <span class="eye" onclick="togglePasswordVisibility('id_new_password2', 'toggleIcon2')" style="top: 45px;">
            <i class="bi bi-eye-slash" id="toggleIcon2"></i>
        </span>
    </div>

    <button type="submit" class="cusbtn2 w-100 mt-3">Reset Password</button>
</form>

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.1/font/bootstrap-icons.css">

<script>
    function togglePasswordVisibility(fieldId, iconId) {
        const passwordInput = document.getElementById(fieldId);
        const icon = document.getElementById(iconId);

        if (passwordInput.type === "password") {
            passwordInput.type = "text";
            icon.classList.remove("bi-eye-slash");
            icon.classList.add("bi-eye");
        } else {
            passwordInput.type = "password";
            icon.classList.remove("bi-eye");
            icon.classList.add("bi-eye-slash");
        }
    }
</script>
{% endblock %}