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

<head>
  <%- include("template/head.ejs")%>
  
  <link rel="stylesheet" type="text/css" href="/css/style.css">
  <script src="/js/edit_delete_user.js"></script>
</head>

<body>
  <header class="container-fluid border-bottom border-dark border-1">
    <div class="row d-flex flex-wrap align-items-center">
      <div class="col-lg-2 d-none d-lg-block float-start align-items-center text-center px-0 py-0 "><img class="bd-placeholder-img bd-placeholder-img-lg featurette image
        img-fluid mx-auto;" src="/img/ProyectoAlbaRemove.png"></div>
      <div class="col-md-3 col-sm-3 col-4 d-lg-none float-start align-items-center text-center px-0 py-0 "><img class="bd-placeholder-img bd-placeholder-img-lg featurette image
        img-fluid mx-auto;" src="/img/guest.png"><a id="botonusuario" href="/perfil" class="nombreperfil fw-bold text-dark text-decoration-none m-lg-4 m-xl-4 fs-4" ><%=usuarioEditar.nombre%></a></div>
      <div class="col-8 text-center align-self-center float-none ">
        <h1>Proyecto Alba</h1>
        <h4>Learning Environment</h4>
      </div>
      <div class="col-2 d-none d-md-none d-lg-block float-start text-center p-0"><img class="bd-placeholder-img bd-placeholder-img-lg featurette image
        img-fluid mx-auto pt-lg-1;" src="/img/guest.png"><a id="botonusuario2" href="/perfil" class="nombreperfil fw-bold text-dark text-decoration-none m-lg-4 m-xl-4 fs-4" ><%=usuarioEditar.nombre%></a></div>
    </div>
  </header>
  <main class="container-fluid p-0 mb-0">

    <%- include("template/navleft.ejs")%>


    <div class="float-start ms-0 row justify-content-center col-8 col-lg-8 col-md-9 col-sm-9 text-center">

      <div class="h-100 m-3 col-11 float-none col-center border border-dark border-2 overflow-hidden"
        style=" background-color:#eee8cd;max-height: 1800px;">
        <div class=" row border border-dark border-end-0 border-top-0 border-start-0">
          <div class="col-center pt-4 pb-md-3 pb-sm-3 pb-3 pb-lg-3">
            <span class="fs-5 fw-bold">Modificar Perfil de Usuario</span>
          </div>

        </div>
        <div class="col-12 mt-3" style="max-height: 1700px;">
<!--Se edita las diferentes caracteristicas del perfil-->
          <form id="editar" class="mb-3 list-unstyled" data-id="<%=usuarioEditar._id%>"> 

            <div class="row col-12 m-0 py-3">
              <label class="form-label col-lg-3 col-md-4 col-sm-12 col-12 text-decoration-underline fw-bold align-self-center" for="nombreproyecto" class="form-label">Correo del Usuario</label>
              <input type="text" class="col-12 col-sm-12 col-md-8 col-lg-9 btn btn-secondary my-2" id="correo" placeholder="Nombre..." name="correo"
                  value="<%=usuarioEditar.correo%>">
            </div>
            <div class="row col-12 m-0 py-3">
              <label class="form-label col-lg-3 col-md-4 col-sm-12 col-12 text-decoration-underline fw-bold align-self-center" for="nombreproyecto" class="form-label">Nombre del usuario</label>
              <input type="text" class="col-12 col-sm-12 col-md-8 col-lg-9 btn btn-secondary my-2" id="nombre" placeholder="Nombre..." name="nombre"
                  value="<%=usuarioEditar.nombre%>">
            </div>
            <div class="row col-12 m-0 py-3">
              <label class="form-label col-lg-3 col-md-4 col-sm-12 col-12 text-decoration-underline fw-bold align-self-center" for="nombreproyecto" class="form-label">Apellidos</label>
              <input type="text" class="col-12 col-sm-12 col-md-8 col-lg-9 btn btn-secondary my-2" id="apellidos" placeholder="Nombre..." name="apellidos"
                  value="<%=usuarioEditar.apellidos%>">
            </div>
            
            <div class="row col-12 m-0 py-3">
              <label class="form-label col-lg-3 col-md-4 col-sm-12 col-12 text-decoration-underline fw-bold align-self-center" for="nombreproyecto" class="form-label">Ciudad</label>
              <input type="text" class="col-12 col-sm-12 col-md-8 col-lg-9 btn btn-secondary my-2" id="ciudad" placeholder="ciudad..." name="ciudad"
                  value="<%=usuarioEditar.ciudad%>">
            </div>
            <div class="row col-12 m-0 py-3">
              <label class="form-label col-lg-3 col-md-4 col-sm-12 col-12 text-decoration-underline fw-bold align-self-center" for="nombreproyecto" class="form-label">Telefono</label>
              <input type="text" class="col-12 col-sm-12 col-md-8 col-lg-9 btn btn-secondary my-2" id="telefono" placeholder="telefono..." name="telefono"
                  value="<%=usuarioEditar.telefono%>">
            </div>
            
            <div class="row col-12 m-0 py-3">
              <label class="form-label col-lg-3 col-md-4 col-sm-12 col-12 text-decoration-underline fw-bold align-self-center" for="nombreproyecto" class="form-label">Rol</label>
              <input type="text" class="col-12 col-sm-12 col-md-8 col-lg-9 btn btn-secondary my-2" id="rol" placeholder="rol..." name="rol" readonly
                  value="<%=usuarioEditar.rol%>">
            </div>
            <div class="row col-12 m-0 py-3">
              <label class="form-label col-lg-3 col-md-4 col-sm-12 col-12 text-decoration-underline fw-bold align-self-center" for="nombreproyecto" class="form-label">Plan de Formación</label>
              <select id="plan" class="col-12 col-sm-12 col-md-8 col-lg-9 btn btn-secondary my-2 " name="grupoPago">
                <option value="Mensual" selected>Mensual</option>
                <option value="Trimestral">Trimestral</option>
                <option value="Anual">Anual</option>
              </select>
            </div>
            
            <div class="row col-12 m-0 py-3">
              <label class="form-label col-lg-3 col-md-4 col-sm-12 col-12 text-decoration-underline fw-bold align-self-center" for="nombreproyecto" class="form-label">Metodología de Pago</label>
              
              <select id="pago" class="col-12 col-sm-12 col-md-8 col-lg-9 btn btn-secondary my-2"name="metodoPago">
                <option id="optionpago">Efectivo</option>
                <option id="optionpago">PayPal</option>
                <option id="optionpago">Bizzum</option>
              </select>
            </div>
            
            <div class="row form-inline my-2 my-lg-0 justify-content-around">
              <a class="col-12 col-sm-12 col-md-12 col-lg-4 btn btn-success my-2" href="/">Cancelar</a>
              <button id="edit" class="col-12 col-sm-12 col-md-12 col-lg-4 btn btn-success my-2 px-1 my-2" type="submit" >Confirmar</button>
            </div>
          </form>
        </div>
      </div>
      

    </div>




    <%- include("template/navright.ejs")%>




  </main>
  
<!--Permite borrar o editar los perfiles-->
  <%- include("template/footer.ejs")%>
  <script src="/js/edit_delete_user.js"></script>
</body>


</html>