<script>
  let nombre = "";
  let apellido = "";
  const enviar = () => {
    alert(`${nombre} ${apellido}`);
  };
</script>

<h1>Welcome to SvelteKit</h1>
<p>
  Visit <a href="https://kit.svelte.dev">kit.svelte.dev</a> to read the documentation
</p>
<a href="/about">About</a>

<div class="input-group mb-3 mt-3">
  <span class="input-group-text" id="basic-addon1">Nombre:</span>
  <input
    bind:value={nombre}
    type="text"
    class="form-control"
    placeholder="Introduzca su nombre"
    aria-label="Nombre"
    aria-describedby="basic-addon1"
  />
</div>
<div class="input-group mb-3 mt-3">
  <span class="input-group-text" id="basic-addon2">Apellido:</span>
  <input
    bind:value={apellido}
    type="text"
    class="form-control"
    placeholder="Introduzca su apellido"
    aria-label="Apellido"
    aria-describedby="basic-addon1"
  />
</div>
<div class="mb-3 mt-3">
  <button
    type="button"
    class="btn btn-outline-danger"
    on:click={enviar}
    disabled={nombre.length < 3 || apellido.length < 3 ? true : false}
    >Enviar</button
  >
</div>
