---
import Button from "./ui/Button.astro";
import { Icon } from "astro-icon/components";
const { id, title } = Astro.props;
---

<!-- Open the modal using ID.showModal() method -->
<button class="btn rounded-none p-7 bg-[#22523F] text-[#EBE6D2] border-0 hover:bg-[#EBE6D2]/90 hover:text-tertiary uppercase text-lg" onclick="my_modal_5.showModal()">Registrate</button>
<dialog id="my_modal_5" class="modal modal-bottom sm:modal-middle p-8">
  <div class="modal-box bg-[#EBE6D2] text-[#22523F] rounded-none p-8">
    <form method="dialog">
            <button class="btn btn-sm btn-circle btn-ghost absolute right-2 top-2"><Icon name="ph:x" class="text-2xl" /></button>
    </form>
    <h3 class="text-lg font-bold lg:text-2xl font-secondary text-center">Formulario de Registro</h3>
    <div class="form py-4 mt-6 ">

        <form id="voluteenFrom"
            action="/api/emailPostulacion/send"
            method="post"
            class="flex flex-col gap-2 place-items-center">

            <label class="input rounded-none bg-white">
                <span>Nombres <span class="text-error">*</span></span>
                <input name="nombres" type="text" placeholder="Nombres"
                    class="w-full max-w-xs rounded-none invalid:border-error focus:invalid:border-error"
                    required />
            </label>

            <label class="input rounded-none bg-white">
                <span>Apellidos <span class="text-error">*</span></span>
                <input name="apellidos" type="text" placeholder="Apellidos"
                    class="w-full max-w-xs rounded-none invalid:border-error focus:invalid:border-error"
                    required />
            </label>

            <label class="input rounded-none bg-white">
                <span>País</span>
                <input name="pais" type="text" placeholder="Pais"
                    class="w-full max-w-xs rounded-none" />
            </label>

            <label class="input rounded-none bg-white">
                <span>Lugar</span>
                <input name="lugar" type="text" placeholder="Lugar"
                    class="w-full max-w-xs rounded-none" />
            </label>

            <label class="input rounded-none bg-white">
                <span>Dirección</span>
                <input name="direccion" type="text" placeholder="Dirección"
                    class="w-full max-w-xs rounded-none" />
            </label>

            <label class="input rounded-none bg-white">
                <span>Teléfono <span class="text-error">*</span></span>
                <input name="telefono" type="text" placeholder="Teléfono"
                    class="w-full max-w-xs rounded-none invalid:border-error focus:invalid:border-error"
                    required />
            </label>

            <label class="input validator rounded-none bg-white">
                <span>Email <span class="text-error">*</span></span>
                <input name="email" type="email"
                    placeholder="Ingresa Correo Electrónico"
                    class="w-full max-w-xs rounded-none invalid:border-error focus:invalid:border-error"
                    required />
            </label>

            <button type="submit"
                class="btn mt-4 bg-[#22523F] text-[#EBE6D2] border-0 hover:bg-[#EBE6D2]/90 hover:text-tertiary uppercase rounded-none">
                Enviar
            </button>

        </form>


    </div>
  </div>
</dialog>

<script>
    


</script>