<div class="max-w-7xl mx-auto p-8 bg-cyan-950 opacity-95 rounded-md my-5 shadow-xl outline outline-1 text-white">
  <h2 class="text-2xl font-bold mb-6">Crear perfil fuzzer</h2>
  <form action="/profile/save" method="post">

    <div class="flex flex-row content-around">
      <div class="mb-4 columns-2xl me-2">
        <label for="name" class="flex text-md font-semibold mb-2 justify-between"
          >
          <span class="inline-block align-middle">Nombre del perfil <span class="text-red-500">(Obligatorio)</span></span> 
          <span id="info-name" class="inline-block align-middle text-white create-form-info"><%- include('../svg/info.ejs') %></span>
        </label>
        <input
          type="text"
          id="name"
          name="name"
          value="<%=selectedProfile !== undefined && selectedProfile.name !== undefined ? selectedProfile.name : ""%>"
          required
          class="w-full px-3 py-2 border rounded-md focus:outline-none focus:border-blue-500 text-black"
        />
      </div>
      <div class="mb-4 columns-2xl ms-2">
        <label for="dirErrs" class="flex text-md font-semibold mb-2 justify-between"
          >
          <span class="inline-block align-middle">Tiempo de ejecución <span class="text-red-500">(Obligatorio)</span></span> 
          <span id="info-time" class="inline-block align-middle text-white create-form-info"><%- include('../svg/info.ejs') %></span></label
        >
        <input
          type="number"
          id="time"
          name="time"
          required
          class="w-full px-3 py-2 border rounded-md focus:outline-none focus:border-blue-500 text-black"
        />
      </div>
    </div>
    <div class="flex flex-row content-around">
      <div class="mb-4 columns-7xl">
        <label for="confComp" class="flex text-md font-semibold mb-2 justify-between"
          >
            <span class="inline-block align-middle">Configuración de la herramienta de compilaje <span class="text-red-500">(Obligatorio)</span></span> 
            <span>
              <dialog class="hidden focus-within:relative text-sm relative align-middle text-black rounded-full bg-blue-200 outline outline-1 outline-black px-4 py-2 w-3 text-pretty text-center max-w-xs">Comandos de la configuración con los que se pretende a compilar la aplicación bajo pruebas.</dialog>
              <span id="info-confcomp" class="inline-block align-middle text-white create-form-info"><%- include('../svg/info.ejs') %></span>
            </span>
          </label>
        <input
          type="text"
          id="confComp"
          name="confComp"
          required
          value="<%=selectedProfile !== undefined && selectedProfile.config_compilator !== undefined ? selectedProfile.config_compilator : ""%>"
          class="w-full px-3 py-2 border rounded-md focus:outline-none focus:border-blue-500 text-black"
        />
      </div>
    </div>
    <div class="flex flex-row content-around">
      <div class="mb-4 columns-7xl">
        <label for="confFuzz" class="flex text-md font-semibold mb-2 justify-between"
          ><span class="inline-block align-middle">Configuración del fuzzing <span class="text-red-500">(Obligatorio)</span></span> 
          <span id="info-conffuzz" class="inline-block align-middle text-white create-form-info"><%- include('../svg/info.ejs') %></span></label
        ></label
        >
        <input
          type="text"
          id="confFuzz"
          name="confFuzz"
          value="<%=selectedProfile !== undefined && selectedProfile.config_fuzzing !== undefined ? selectedProfile.config_fuzzing : ""%>"
          required
          class="w-full px-3 py-2 border rounded-md focus:outline-none focus:border-blue-500 text-black"
        />
      </div>
    </div>
    <div class="flex flex-row content-around">
      <div class="mb-4 columns-2xl me-2">
        <label for="pathSim" class="flex text-md font-semibold mb-2 justify-between"
          ><span class="inline-block align-middle">Directorio raíz del simulador o fichero <span class="text-red-500">(Obligatorio)</span></span> 
          <span id="info-pathsim" class="inline-block align-middle text-white create-form-info"><%- include('../svg/info.ejs') %></span></label
        ></label
        >
        <input
          type="text"
          id="pathSim"
          name="pathSim"
          value="<%=selectedProfile !== undefined && selectedProfile.path_simulator !== undefined ? selectedProfile.path_simulator : ""%>"
          required
          class="w-full px-3 py-2 border rounded-md focus:outline-none focus:border-blue-500 text-black"
        />
      </div>
      <div class="mb-4 columns-2xl ms-2">
        <label for="dirErrs" class="flex text-md font-semibold mb-2 justify-between"
          >
          <span class="inline-block align-middle">Directorio de los errores <span class="text-red-500">(Obligatorio)</span></span> 
          <span id="info-direrrs" class="inline-block align-middle text-white create-form-info"><%- include('../svg/info.ejs') %></span></label
        >
        <input
          type="text"
          id="dirErrs"
          name="dirErrs"
          value="<%=selectedProfile !== undefined && selectedProfile.errors_directory !== undefined ? selectedProfile.errors_directory : ""%>"
          required
          class="w-full px-3 py-2 border rounded-md focus:outline-none focus:border-blue-500 text-black"
        />
      </div>
    </div>
    <div class="mb-4">
      <label for="data" class="flex text-md font-semibold mb-2 justify-between"
        ><span class="inline-block align-middle">Fuente de datos predeterminada</span> 
        <span id="info-sourcedata" class="inline-block align-middle text-white create-form-info"><%- include('../svg/info.ejs') %></span></label
      ></label
      >
      <input id="obd" type="radio" name="data" value="OBD-II" />
      <label for="css">OBD-II</label> <br />
      <input id="can" type="radio" name="data" value="CAN Bus" />
      <label for="css">CAN Bus</label> <br />
      <input id="no" type="radio" name="data" value="No predeterminado" checked />
      <label for="no">No predeterminado</label>
    </div>
    <div class="mb-6">
      <label for="description" class="flex text-md font-semibold mb-2 justify-between"
        ><span class="inline-block align-middle">Descripción de la prueba</span> 
        <span id="info-descrip" class="inline-block align-middle text-white create-form-info"><%- include('../svg/info.ejs') %></span></label
      ></label
      >
      <textarea
        id="description"
        name="description"
        rows="4"
        class="w-full px-3 py-2 border rounded-md focus:outline-none focus:border-blue-500 text-black"
      ><%=selectedProfile !== undefined && selectedProfile.description !== undefined ? selectedProfile.description : "" %></textarea>
    </div>
    <button
      type="submit"
      class="mx-auto justify-center my-2 font-semibold py-2 px-8 text-xl bg-cyan-500 hover:bg-cyan-400 text-white border-b-4 border-cyan-700 hover:border-cyan-500 rounded"
    >
      Crear
    </button>
  </form>
</div>
<link rel="stylesheet" href="https://unpkg.com/tippy.js@6/dist/tippy.css">
<script src="https://unpkg.com/@popperjs/core@2"></script>
<script src="https://unpkg.com/tippy.js@6"></script>
<script src="/javascripts/tooltip.js" type="module"></script>
