<%- include('includes/head.ejs') %>
    <section>
      <style>
        section{
          margin: 1em;
        }
        h1{
          font-size: 46px;
        }
        #mensaje{
          color: red;
        }
      </style>

        <h1>Crea una cuenta</h1>

        <br><br>

        <form action="/usuarios/signup" method="POST">
          <input type="hidden" name="_csrf" value="<%= csrfToken %>">
          <div class="row g-2">

            <div class="col-md">
              <div class="form-floating">
                <input type="text" class="form-control" id="userName" name="userName" placeholder="Bernardo Gómez" required>
                <label for="floatingInputGrid">Nombre Completo</label>
              </div>
            </div>

            <div class="col-md">
              <div class="form-floating" id="userSkill" name="userSkill">
                <select class="form-select" id="floatingSelectGrid" required>
                  <option value="1">One</option>
                  <option value="2">Two</option>
                  <option value="3">Three</option>
                </select>
                <label for="floatingSelectGrid">Skill</label>
              </div>
            </div>

          </div>
          
          <br><br><br>

          <div class="row g-2">

            <div class="col-md">
              <div class="form-floating">
                <input type="email" class="form-control" id="userMail" name="userMail" placeholder="name@example.com" required>
                <label for="floatingInputGrid">Correo Electrónico</label>
              </div>
            </div>

            <div class="col-md">
              <div class="form-floating">
                <input type="password" class="form-control" id="userPass" name="userPass" placeholder="A1234567890" required>
                <label for="floatingInputGrid">Contraseña</label>
              </form>
            </div>

          </div>

          <br><br><br>

          <div class="row g-2">

            <div class="col-md">
              <div class="form-floating">
                <input type="tel" class="form-control" id="userCel" name="userCel" placeholder="4421234567" required>
                <label for="floatingInputGrid">Teléfono</label>
              </div>
            </div>

            <div class="col-md">
              <div class="form-floating">
                <input type="password" class="form-control" id="userConfPass" name="userConfPass" placeholder="A1234567890" required>
                <label for="floatingInputGrid">Confirmar Contraseña</label>
              </form>
            </div>

          </div>

          <br>
          <% if (mensaje !='' ) { %>
            <div id="mensaje">
              <%= mensaje %>
            </div>
          <% } %>
          <br>
          <button class="btn btn-primary" type="submit">Crear</button>
          
        </form> 
 
    </section>

<%- include('includes/foot.ejs') %>