
<script type="text/javascript" src="../static/style.js"></script>
<script type="text/javascript" src="../static/jsfile.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.5.4/dist/umd/popper.min.js" integrity="sha384-q2kxQ16AaE6UbzuKqyBE9/u/KzioAlnx2maXQHiDX9d4/zp8Ok3f+M7DPm+Ib6IU" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.min.js" integrity="sha384-pQQkAEnwaBkjpqZ8RU1fF1AKtTcHJwFl3pblpTlHXybJjHpMYo79HY3hIi4NKxyj" crossorigin="anonymous"></script>
<style>
   
.form{
   width:80%; 
    padding: 20px;
    overflow: hidden;
    overflow-y: scroll;
    height: 750px;
    

}
.emp{
    padding: 4px;
  margin: 5px

  
}
.addicon{
  color: rgb(84, 55, 138);
  padding: 7px;
}

.skill1{
  padding-right: 10px;
  margin-bottom: 3px;
}

.btn-secondary{
  margin-left: 90px;
  margin-top: 30px;
  background-color: rgb(81, 32, 187);

}

*{
  font-size: medium;
}
.card{
  text-align: unset;
  height: 20%;
}
        
.SuperMainDiv{
  display: flex;
  margin-top: 4%;
  
}
</style>

<body>
 
<div class="SuperMainDiv">  
      <div class="form">
        <form class="row g-3" method="POST" href="/templates/:id?">
            <div class="col-md-6">
              <label for="text" class="form-label">First Name</label>
              <input required type="text" class="form-control" id="FName" name="FName" onkeyup="changeFN()" value="<%= biodata.FName != 'undefined' ? biodata.FName : '' %>" placeholder="First Name">
            </div>
            <div class="col-md-6">
              <label for="text" class="form-label">Last Name</label>
              <input required type="text" class="form-control" id="LName" name="LName" onkeyup="changeLN()" value="<%= biodata.LName != 'undefined' ? biodata.LName : '' %>" placeholder="Last Name">
            </div>
            <div class="col-12">
              <label for="address" class="form-label">Address</label>
              <input type="text" name="address" class="form-control" onkeyup="changeAddress()" 
              value="<%= biodata.address != 'undefined' ? biodata.address : '' %>" id="address" placeholder="Enter Your Address">
            </div>
            <div class="col-md-6">
              <label for="inputEmail4" class="form-label">Email</label>
              <input type="email"  name="Email" class="form-control" id="ID" onkeyup="changeID()" value="<%=biodata.Email != 'undefined' ? biodata.Email : '' %>" placeholder="Enter Your Email">
            </div>
            <div class="col-md-6">
              <label for="text" class="form-label">Phone No.</label>
              <input type="text" class="form-control" id="phone" name="Phone" onkeyup="changeph()" 
              value="<%= biodata.Phone != 'undefined' ? biodata.Phone : '' %>" placeholder="Enter Your Phone Number">
                
            </div>
            <%if (template_number=='1'){%>
            <div class="col-12">
              <label for="text" class="form-label">Objective</label>
              <input type="text" id="obj" name="obj" onkeyup="changeobj()" 
                  value="<%= biodata.obj != 'undefined' ? biodata.obj : '' %>"  class="form-control"  placeholder="objective">   
            </div>
            <%}%>
            <div class="emp">
            <label for="text" class="form-label">Employement Details</label>
            <div class="input-group">
              <span class="input-group-text">
                <input type="text" id="where" name="where" onkeyup="changeWhere()" 
                value="<%= biodata.Where != 'undefined' ? biodata.Where : '' %>"  class="form-control" placeholder="Organization">
                <input type="text" id="when" name="when" onkeyup="changeWhen()" 
                value="<%= biodata.When != 'undefined' ? biodata.When : '' %>"  class="form-control"  placeholder="Timeline">
                <input type="text" id="Desig" name="Desig" onkeyup="changeDesig()" 
                value="<%= biodata.Desig != 'undefined' ? biodata.Desig : '' %>"  class="form-control" placeholder="Description">
            </div>
            <%if( biodata.Where2 != '' ){%>
            <div class="input-group"  id="emp2">
              <span class="input-group-text">
                <input type="text" name="where2" id="where2" onkeyup="changeWhere2()" 
                value="<%= biodata.Where2 != 'undefined' ? biodata.Where2 : '' %>"  class="form-control" placeholder="Organization">
                <input type="text" name="when2" id="when2" onkeyup="changeWhen2()" 
                value="<%= biodata.When2 != 'undefined' ? biodata.When2 : '' %>"  class="form-control"  placeholder="Timeline">
                <input type="text" name="Desig2" id="Desig2" onkeyup="changeDesig2()" 
                value="<%= biodata.Desig2 != 'undefined' ? biodata.Desig2 : '' %>"  class="form-control" placeholder="Description">
            </div>
            <div class="input-group"  id="emp3">
              <span class="input-group-text">
                <input type="text" name="where3" id="where3" onkeyup="changeWhere3()" 
                value="<%= biodata.Where3 != 'undefined' ? biodata.Where3 : '' %>"  class="form-control" placeholder="Organization">
                <input type="text" name="when3" id="when3" onkeyup="changeWhen3()" 
                value="<%= biodata.When3 != 'undefined' ? biodata.When3 : '' %>"  class="form-control"  placeholder="Timeline">
              <input type="text" name="Desig3" id="Desig3" onkeyup="changeDesig3()" 
              value="<%= biodata.Desig3 != 'undefined' ? biodata.Desig3 : '' %>"  class="form-control" placeholder="Description">
            </div>
            <%}else{%>
            
              <div class="input-group" style="display: none;" id="emp2">
                <span class="input-group-text">
                  <input type="text" name="where2" id="where2" onkeyup="changeWhere2()" 
                  value="<%= biodata.Where2 != 'undefined' ? biodata.Where2 : '' %>"  class="form-control" placeholder="Organization">
                  <input type="text" name="when2" id="when2" onkeyup="changeWhen2()" 
                  value="<%= biodata.When2 != 'undefined' ? biodata.When2 : '' %>"  class="form-control"  placeholder="Timeline">
                  <input type="text" name="Desig2" id="Desig2" onkeyup="changeDesig2()" 
                  value="<%= biodata.Desig2 != 'undefined' ? biodata.Desig2 : '' %>"  class="form-control" placeholder="Description">
              </div>
              <div class="input-group" style="display: none;" id="emp3">
                <span class="input-group-text">
                  <input type="text" name="where3" id="where3" onkeyup="changeWhere3()" 
                  value="<%= biodata.Where3 != 'undefined' ? biodata.Where3 : '' %>"  class="form-control" placeholder="Organization">
                  <input type="text" name="when3" id="when3" onkeyup="changeWhen3()" 
                  value="<%= biodata.When3 != 'undefined' ? biodata.When3 : '' %>"  class="form-control"  placeholder="Timeline">
                <input type="text" name="Desig3" id="Desig3" onkeyup="changeDesig3()" 
                value="<%= biodata.Desig3 != 'undefined' ? biodata.Desig3 : '' %>"  class="form-control" placeholder="Description">
              </div>
              <a type="button" onclick="addrow()" id="empbtn1"><i class="fa fa-plus-circle fa-1x addicon"></i></a>
              <a type="button" onclick="minrow()" id="edubtn1">
                <i class="fa fa-minus-circle fa-1x subicon " aria-hidden="true" ></i></a>  
           <%}%>
            </div>              
            <div class="emp">
            <label for="text" class="form-label">Educational Background</label>
                <div class="input-group">
                  <span class="input-group-text">
                  <input type="text"  name="edu" id="edu" onkeyup="changeedu()" 
                  value="<%= biodata.edu != 'undefined' ? biodata.edu : '' %>" class="form-control"  placeholder="Institution">
                  <input type="text"  name="degree" id="degree" onkeyup="changedegree()" 
                  value="<%= biodata.degree != 'undefined' ? biodata.degree : '' %>" class="form-control" placeholder="Degree">
                  <input type="text"  name="field" id="field" onkeyup="changefield()" 
                  value="<%= biodata.field != 'undefined' ? biodata.field : '' %>" class="form-control" placeholder="Field of study">
                </div>
                <%if(biodata.edu2 != ''){%>
                <div class="input-group" id="edu_head2" >
                  <span class="input-group-text">
                      <input type="text"  name="edu2" id="edu2" onkeyup="changeedu2()" 
                  value="<%= biodata.edu2 != 'undefined' ? biodata.edu2 : ''%>" class="form-control"  placeholder="Institution">
                      <input type="text" name="degree2" id="degree2" onkeyup="changedegree2()" 
                  value="<%= biodata.degree2 != 'undefined' ? biodata.degree2 : ''%>" class="form-control" placeholder="Degree">
                      <input type="text"  name="field2" id="field2" onkeyup="changefield2()" 
                  value="<%= biodata.field2 != 'undefined' ? biodata.field2 : ''%>" class="form-control" placeholder="Field of study">
                </div>
                <div class="input-group" id="edu_head3">
                  <span class="input-group-text">
                      <input type="text"  name="edu3" id="edu3" onkeyup="changeedu3()" 
                  value="<%= biodata.edu3 != 'undefined' ? biodata.edu3 : ''%>" class="form-control"  placeholder="Institution">
                      <input type="text" name="degree3" id="degree3" onkeyup="changedegree3()" 
                  value="<%= biodata.degree3 != 'undefined' ? biodata.degree3 : ''%>" class="form-control" placeholder="Degree">
                      <input type="text"  name="field3" id="field3" onkeyup="changefield3()" 
                  value="<%= biodata.field3 != 'undefined' ? biodata.field3 : ''%>" class="form-control" placeholder="Field of study">
             
                </div>
                <%}else{%>
                  <div class="input-group" id="edu_head2" style="display: none;">
                    <span class="input-group-text">
                        <input type="text"  name="edu2" id="edu2" onkeyup="changeedu2()" 
                    value="<%= biodata.edu2 != 'undefined' ? biodata.edu2 : ''%>" class="form-control"  placeholder="Institution">
                        <input type="text" name="degree2" id="degree2" onkeyup="changedegree2()" 
                    value="<%= biodata.degree2 != 'undefined' ? biodata.degree2 : ''%>" class="form-control" placeholder="Degree">
                        <input type="text"  name="field2" id="field2" onkeyup="changefield2()" 
                    value="<%= biodata.field2 != 'undefined' ? biodata.field2 : ''%>" class="form-control" placeholder="Field of study">
                  </div>
                  <div class="input-group" id="edu_head3" style="display: none;">
                    <span class="input-group-text">
                        <input type="text"  name="edu3" id="edu3" onkeyup="changeedu3()" 
                    value="<%= biodata.edu3 != 'undefined' ? biodata.edu3 : ''%>" class="form-control"  placeholder="Institution">
                        <input type="text" name="degree3" id="degree3" onkeyup="changedegree3()" 
                    value="<%= biodata.degree3 != 'undefined' ? biodata.degree3 : ''%>" class="form-control" placeholder="Degree">
                        <input type="text"  name="field3" id="field3" onkeyup="changefield3()" 
                    value="<%= biodata.field3 != 'undefined' ? biodata.field3 : ''%>" class="form-control" placeholder="Field of study">
               
                  </div>

                <a type="button" onclick="addrowedu()" id="edubtn1">
                  <i class="fa fa-plus-circle fa-1x addicon" aria-hidden="true" ></i></a> 
                  <a type="button" onclick="minrowedu()" id="edubtn1">
                    <i class="fa fa-minus-circle fa-1x subicon" aria-hidden="true" ></i></a>  
                  <%}%>
            </div>
             
              <div class="emp">
                <label for="text" class="form-label">Interest</label>
                  <div class="input-group">
                    <span class="input-group-text">
                    <input type="text"  class="form-control" id="int_1" name="int_1"
                    onkeyup="changeint1()" value="<%= biodata.int_1 != 'undefined' ? biodata.int_1 : ''%>" placeholder="Interest">
                    <input type="text"  class="form-control" id="int_2" name="int_2"
                    onkeyup="changeint2()" value="<%= biodata.int_2 != 'undefined' ? biodata.int_2 : ''%>" placeholder="Interest">
                    <input type="text"  class="form-control" id="int_3" name="int_3"
                    onkeyup="changeint3()" value="<%= biodata.int_3 != 'undefined' ? biodata.int_3 : ''%>" placeholder="Interest">
                  </div>
              </div>
              <p>
                <div class="col-md-5 add">
                  <div class="skill1">
                    <label for="input" class="form-label">Skills </label>
                  </div>
                  <div class="skill1" id='skill1'>
                    <input type="text" class="form-control" name="skill_1" id="skill_1" onkeyup="changeSkill_1()" value="<%= biodata.skill_1 != 'undefined' ? biodata.skill_1 : '' %>">
                    
                  </div>
                  <%if(biodata.skill_2  != ''){%>
                    <div class="skill1" id="skill2" >
                      <input type="text" class="form-control" name="skill_2" id="skill_2" onkeyup="changeSkill_2()" value="<%= biodata.skill_2 != 'undefined' ? biodata.skill_2 : '' %>">
                    </div>
                    <div class="skill1" id='skill3'>
                      <input type="text" class="form-control" name="skill_3" id="skill_3" onkeyup="changeSkill_3()"value="<%= biodata.skill_3 != 'undefined' ? biodata.skill_3 : '' %>">
                    </div>
                    <%}else{%>
                  <div class="skill1" id="skill2" style="display: none;">
                    <input type="text" class="form-control" name="skill_2" id="skill_2" onkeyup="changeSkill_2()" value="<%= biodata.skill_2 != 'undefined' ? biodata.skill_2 : '' %>">
                  </div>
                  <div class="skill1" id='skill3' style="display: none;">
                    <input type="text" class="form-control" name="skill_3" id="skill_3" onkeyup="changeSkill_3()"value="<%= biodata.skill_3 != 'undefined' ? biodata.skill_3 : '' %>">
                  </div>
                  <a type="button" onclick="addrowskill()" id="edubtn1">
                    <i class="fa fa-plus-circle fa-1x addicon" aria-hidden="true" ></i></a> 
                    <a type="button" onclick="minrowskill()" id="edubtn_1">
                      <i class="fa fa-minus-circle fa-1x subicon" aria-hidden="true" ></i></a> 
                    <%}%>
                </div>
              </p>
              <p class="container m-8">
                <div class="form-check p-4">
                  <input type="radio" class="form-check-input #1a4567" id="mycolor" name="myradio" onchange="colorchange(value);" value="#1a4567">
                  <label class="form-check-label" for="blue">Blue</label>
                </div>
                
                <!-- Material checked -->
                <div class="form-check p-4">
                  <input type="radio" class="form-check-input rgb(134, 17, 17)" id="mycolor" name="myradio" onchange="colorchange(value);" value="rgb(134, 17, 17)">
                  <label class="form-check-label" for="red">Red</label>
                </div>
                <div class="form-check p-4">
                  <input type="radio" class="form-check-input rgb(44, 83, 12)" id="mycolor" name="myradio" onchange="colorchange(value);" value="rgb(44, 83, 12)">
                  <label class="form-check-label" for="darkgreen">Darkgreen</label>
                </div>
                
              <!--  Material checked -->
                <div class="form-check p-4">
                  <input type="radio" class="form-check-input black" id="mycolor" name="myradio" onchange="colorchange(value);" value="black">
                  <label class="form-check-label" for="black">Black</label>
                </div>
              </p>
              <div class="button"> 
                <input type="submit" name="submit" class="btn btn-secondary" value="<%= biodata.obj != 'undefined' ? 'Save Template' : 'Update Template' %>"></input>
              </div>  
            </div>  
        </form>
    
  <div class="mycolumn">
  
    <% if(template_number=='1'){ %>
      <%- include('./template1.ejs')%>
    <%} else if (template_number=='2'){%>  
      <%- include('./template2.ejs')%>
    <%}%>
            
  </div> 
  </div>
</div> 

</body>
