<!DOCTYPE html>
<html lang="es">
  <head>
    <%- include('../partials/head.ejs') %>
  </head>

  <body>
    <%- include('../partials/header.ejs') %>

    <main class="container mx-auto main">
      <div class="my-5">
        <h1 class="d-flex justify-content-center">CREA TU FORMULARIO</h1>
        <h2 class="modificar-h2 d-flex justify-content-center">
          Arrastra y Suelta... así de fácil
        </h2>
      </div>

      <div class="row">
        <div class="col-sm-6">
          <h2
            class="modificar-h2 d-flex justify-content-center"
            contentEditable="true"
            id="formTitle"
          >
            NOMBRE FORMULARIO
          </h2>
        </div>

        <div class="col-sm-6">
          <h2 class="modificar-h2 d-flex justify-content-center">CAMPOS</h2>
        </div>
      </div>

      <div class="row">
        <div class="col-sm-6">
          <div class="card h-100 color-fondo-drop">
            <div id="drop-on-me-babe" class="card-body w-75"></div>
          </div>
        </div>

        <div class="col-sm-6">
          <div class="card h-100 color-fondo-drag">
            <div id="drag-from-me-babe" class="card-body w-75">
              <div class="my-3" id="clonar">
                <div class="mt-2">
                  <label
                    contentEditable="true"
                    class="fw-bold form-label text-muted"
                    >Campo personalizado</label
                  >
                  <input
                    type="text"
                    class="form-control sombreado-campos"
                    style="cursor: pointer"
                    readonly
                  />
                </div>
              </div>

              <div class="my-3">
                <input
                  type="text"
                  class="form-control sombreado-campos"
                  placeholder="Nombre"
                  style="cursor: pointer"
                  readonly
                />
              </div>

              <div class="my-3">
                <input
                  type="tel"
                  class="form-control sombreado-campos"
                  placeholder="Teléfono"
                  style="cursor: pointer"
                  readonly
                />
              </div>

              <div class="my-3">
                <input
                  type="email"
                  class="form-control sombreado-campos"
                  placeholder="Email"
                  style="cursor: pointer"
                  readonly
                />
              </div>

              <div class="my-3">
                <textarea
                  class="form-control sombreado-campos"
                  placeholder="Experiencia Laboral"
                  style="cursor: pointer"
                  readonly
                ></textarea>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div class="my-3">
        <div class="mt-3">
          <div
            id="html-form-code"
            class="form-control my-3 border border-1 border-primary rounded overflow-auto"
            style="height: 350px; display: none"
          ></div>
        </div>

        <div id="alert-placeholder"></div>

        <div class="d-flex justify-content-center">
          <button id="boton-form" class="btn btn-primary disabled">
            Crear Formulario
          </button>
        </div>
      </div>
    </main>

    <%- include('../partials/footer.ejs') %>

    <script src="https://cdn.jsdelivr.net/npm/sortablejs@latest/Sortable.min.js"></script>
    <script src="/script.js"></script>
  </body>
</html>
