<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale-1">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>My Account</title>
    <link rel="stylesheet" href="/css/account-style.css">

<body>
    <div class="container">
        <div class="Account form">
            <header>MY ACCOUNT</header>
            <form name="update_form" action="/api/update" method="post">

                <label for="fname">First Name</label>
                <input type="text" required name="fname" value=<%=fname %>>

                <label for="lname">Last Name</label>
                <input type="text" required name="lname" value=<%=lname %> >

                <label for="username">Username</label>
                <input type="text" required name="username" value=<%=username %> >

                <input type="submit" value="Update Info" class="button">
                <p class="error error--hidden"></p>
            </form>

            <form name="update_password" action="/api/update_password" method="post">
                <h2>Update your password</h2>

                <label for="password">Current Password</label>
                <input type="password" name="password" placeholder="Enter current password" required>

                <label for="password">New Password</label>
                <input type="password" name="new_password" placeholder="Enter new password" required>

                <label for="password">Confirm new password</label>
                <input type="password" name="confirm_password" placeholder="Re-enter new password" required>

                <input type="submit" value="Change Password" class="button">
            </form>

            <form name="delete-account" action="/api/delete_account" method="post">
                <h2>Delete Account</h2>
                <input type="password" name="password" placeholder="Confirm Password for Deletion" required>
            
                <input type="submit" value="Delete" class="button">
            </form>

            <form>
                <input type="button" value="Back to Products" class="button" onclick="window.location.href='/api/products'">
            </form>
        </div>
    </div>

</body>