<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Update Profile</title>
    <link href="https://fonts.googleapis.com/css2?family=Courier+New&display=swap" rel="stylesheet">
    <style>
        body {
    margin: 0;
    padding: 0;
    font-family: 'Courier New', Courier, monospace;
    background-color: #000;
    color: #fff;
}

.container {
    width: 100%;
    position: relative; /* Adjust the width as needed */
    max-width: 800px; /* Adjust the maximum width as needed */
    margin: 100px auto;
    padding: 20px;
    background-color: #222;
    border-radius: 20px;
    box-shadow: 0 0 20px rgba(255, 255, 255, 0.4);
    transition: transform 0.8s ease-in-out, box-shadow 0.9s ease-in-out;
}

.container:hover {
    transform: scale(1.05);
    box-shadow: 0 0 30px rgba(255, 255, 255, 0.8);
}

.header {
    font-size: 24px;
    font-weight: bold;
    text-align: center;
    margin-bottom: 20px;
    transition: color 0.2s;
}

form {
    text-align: center;
}

table {
    margin: 0 auto;
}

td {
    padding: 10px;
    width: 50%;
}

input[type="text"],
input[type="password"],
input[type="submit"],
textarea {
    width: 100%;
    padding: 10px;
    margin-bottom: 10px;
    border-radius: 8px;
    border: none;
    background-color: #333;
    color: #fff;
    box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.5);
    transition: background-color 0.3s, box-shadow 0.3s; 
}

input[type="text"]:focus,
input[type="password"]:focus,
textarea:focus {
    background-color: #444;
}

input[type="submit"] {
    background-color: #007bff;
    cursor: pointer;
    transition: background-color 0.3s;
}

input[type="submit"]:hover {
    background-color: #0056b3;
}

/* .profile-pic img,
.header-pic img {
    width: 200px;
    height: 200px;
    margin-bottom: 10px;
} */

.header_pic img {
    width: 100%;
    height: 250px;
    margin-bottom: 10px;
    border-radius: 50px;
}

.profile_pic img{
    /* width: 30%; */
    border-radius: 50%;
    /* float: left; */
    margin-top: -90px;
    margin-left: -450px;
}

.profile-pic,
.header-pic {
    text-align: center;
    margin-bottom: 20px;
}

a {
    color: #fff;
    text-decoration: none;
    border-radius: 30px;
    border: 2px solid #fff;
    padding: 10px 20px; /* Adjust padding to increase width */
    outline: none;
    display: inline-block; /* Ensure inline-block display for padding to take effect */
}

a:hover {
    text-decoration: underline;
}




    </style>
</head>
<body>
    <div class="container">
        <div class="header">Update Profile</div>
           
        <form action="/edit_profile_submit" method="post" >
            <table align="center">
                <div class="profile">
                    <% for (var i=0;i<result.length;i++) { %>
                        <div class="header_pic">
                            <img src="/headeruploads/<%=result[i].headerpic%>" width="200" height="200" /> <a href="/views/edit_headerpic.ejs" style="margin-right: -700px;">Edit</a>
                        </div>
                        <div class="profile_pic">
                            <img src="/profileuploads/<%=result[i].profilepic%>" width="200" height="200" /><br> <a href="/views/edit_profilepic.ejs" style="margin-left: -600px;">Edit</a>
                        </div>

                        <% } %>
                </div>
                <br>
               <div class="form">
                <tr>
                    <td>Enter First Name</td>
                    <td><input type="text" name="fname" value="<%=result[0].fname%>"/></td>
                </tr>
                <tr>
                    <td>Enter middle Name</td>
                    <td><input type="text" name="mname" value="<%=result[0].mname%>"/></td>
                </tr>
                <tr>
                    <td>Enter last name</td>
                    <td><input type="text" name="lname" value="<%=result[0].lname%>"/></td>
                </tr>
                <tr>
                    <td>Enter About</td>
                    <td><textarea  name="about" rows="5"><%=result[0].about%></textarea></td>
                </tr>
                <tr>
                    <td style="text-align: center;" colspan="2"><input type="submit" name="Edit Profile" /></td>
                </tr>
            </div>
            </table>
        </form>
    </div>
</body>
</html>
