{{template "base" .}}

{{define "content"}}
<h2>Change Password</h2>
<div id="passwordMessage" style="color: red; margin-bottom: 1em;"></div>
<form id="passwordForm">
    <input type="password" name="current_password" placeholder="Current Password" required
        style="display: block; margin-bottom: 10px;">
    <input type="password" name="new_password" placeholder="New Password" required
        style="display: block; margin-bottom: 10px;">
    <input type="submit" value="Change Password">
</form>

<script>
    document.getElementById('passwordForm').addEventListener('submit', async function (e) {
        e.preventDefault();
        const formData = new FormData(this);
        const messageDiv = document.getElementById('passwordMessage');
        messageDiv.innerText = "";

        try {
            const response = await fetch('/auth/change-password', {
                method: 'POST',
                body: formData
            });

            const text = await response.text();
            if (response.ok) {
                messageDiv.style.color = "green";
                messageDiv.innerText = text;
                this.reset();
            } else {
                messageDiv.style.color = "red";
                messageDiv.innerText = "Update failed: " + text;
            }
        } catch (error) {
            messageDiv.innerText = "An error occurred: " + error;
        }
    });
</script>
{{end}}