<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css" integrity="sha512-xh6O/CkQoPOWDdYTDqeRdPCVd1SpvCA9XXcUnZS2FmJNp1coAFzvtCN9BmamE+4aHK8yyUHUSCcJHgXloTyT2A==" crossorigin="anonymous" referrerpolicy="no-referrer" />
    <link rel="stylesheet" href="/public/style.css">
    <title><%= title %></title>
    <style>
        @import url('https://fonts.googleapis.com/css2?family=Anton&family=DynaPuff&family=Nunito&family=Nunito+Sans&family=Poppins&family=Prompt&family=Roboto&family=Roboto+Mono&family=Rubik+Dirt&display=swap');
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
.body{
    background-image: linear-gradient(90deg, #396afc 0%, #2948ff 100%);
    background-size: cover;
    text-align: center;
    font-family: Nunito;
    color: aliceblue;
}
#main-head{
    font-size: 7rem;
    padding-top: 5rem;
}
#usage{
    font-size: 2rem;
    padding: 2rem;
}
#tech-stack{
    font-size: 2rem;   
}
.button{
    padding: .5rem;
    /* float: right; */
    margin-top: 5rem;
    background-color: #1938e8;
    color: aliceblue;
    font-size: 2rem;
    border: 0;
    border-radius: 5px;
    transition: 0.5s ease-out;
}
.button:hover{
    background-color: aliceblue;
    color: #1938e8;
}
.full-form{
    font-size: 3rem;
    padding-top: 5rem;
}
body{
    font-family: Poppins;
}
#title{
    float: left;
    color:rgb(255, 255, 255);
    font-size: 1.7rem;
    padding: 1rem;
}
.nav{
    background-color: #1938e8;
    overflow: hidden;
}
nav{
    font-size: 1.5rem;
    padding: 1rem;
    background-color:  #1938e8;
    float:right;
}
nav a{
    text-decoration: none;
    color: white;
    margin: 0.5rem;
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
    /* border-radius: 15px; */
}
nav a:hover{
    /* border-radius: 5px; */
    transition: 0.5s;
    color:  #1938e8;
    background-color: white;
}
.form{
    position: absolute;
    top: 50%; 
    left: 50%; 
    transform: translate(-50%, -50%);
    border: 2px solid black;
    padding: 2rem;
    border-radius: 5px;
}
.form input{
    padding: 0.5rem;
    margin: 1rem;
}
.submit{
    margin: 1rem;
    padding: 0.5rem;
    background-color: #1938e8;
    color: aliceblue;
    width: 7rem;
    border-radius: 5px;
    border: 0;
    font-family: Poppins;
    font-size: 1rem;
}
.submit:hover{
    color: #1938e8;
    background-color: aliceblue;
    transition: 0.5s ease-out;
}
img{
    width: 25%;
}
label{
    /* padding: 1rem; */
    padding-top: 1rem;
}
#form-head{
    text-align: center;
    padding: 1rem;
}
tr,td{
    color: black;
}
    </style>
</head>
<body>
<%- include ('./partials/nav.ejs') %> 
<div class="form">
    <h2 id="form-head">Update the details</h2><hr>
    <form action="/update/<%= user._id%>" method="post" enctype="multipart/form-data">
        
        <label for="Name">Name:</label>
        <input type="text" name="Name" value="<%= user.Name  %> " required> <br>
        <label for="Email">E-mail:</label>
        <input type="email" name="Email" value="<%= user.Email  %> " required><br>
        <label for="Phone">Contact:</label>
        <input type="number" name="Phone" value=<%= user.Phone  %>  required><br>
        <img src="/<%= user.Image %>">
        <input type="hidden"value="/<%= user.Image %>" name="old_image"><br>
        <label for="image" required>Change Image:</label>
        <input type="file" name="image"><br>
        <button type="submit" class="submit">Update</button>
    </form>
</div>
</body>
</html>