<turbo-stream action="update" target="show_modal">
    <template>
        <div
            aria-label="modal"
            data-controller="modal"
            data-modal-count-value="0" 
            data-modal-name-value="request-information"
            data-modal-show-on-init-value="true"
            id="request-information-modal-0"
            tabindex="-1"
            class="fixed opacity-0 left-0 right-0 top-0 z-50 h-[calc(100%)] max-h-full w-full overflow-y-auto overflow-x-hidden py-10 px-4 md:inset-0 bg-[#00000050]">
            <div id="request-information-modal-container-0" class="relative max-h-full w-full max-w-2xl m-auto">
                <div class="relative rounded-xl bg-white shadow-sm">
                    

<script src="https://www.google.com/recaptcha/enterprise.js?onload=onRecaptchaLoaded&render=explicit" async defer></script>

<form data-controller="requestInformationForm"
    data-requestInformationForm-sitekey-value="6Ldmb8IrAAAAAILY3HEOaZ8uVxrzAE1iLKiznzB3"
    data-action="submit->requestInformationForm#submit"
    data-turbo="false" 
    action="/fellowshipscas-info-request/" 
    novalidate method="post">
    <input type="hidden" name="csrfmiddlewaretoken" value="acS3I4FWEowhMQhAzVtlm0LuyC7g34vlF9DTcDRTJc9dqII6x5beHvx3nJSYNBGA">
    <input type="hidden" name="g-recaptcha-response" data-requestInformationForm-target="token">

    <div class="g-recaptcha"
        data-requestInformationForm-target="recaptcha"
        data-size="invisible">
    </div>
    
                    <div class="px-10 py-4 w-full flex justify-between items-center border-b-1 border-[#CAD2E1]">
                        <h2 class="text-1xl font-bold text-dark">Request Information</h2>
                        <div tabindex="0" class="text-[#717179] cursor-pointer request-information-modal-hide-0">
                            <svg width="12" height="11" viewBox="0 0 12 11" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
    <path fill-rule="evenodd" clip-rule="evenodd" d="M1.05033 0.550253C1.35407 0.246512 1.84653 0.246512 2.15028 0.550253L10.9498 9.3498C11.2536 9.65354 11.2536 10.146 10.9498 10.4497C10.6461 10.7535 10.1536 10.7535 9.84988 10.4497L1.05033 1.6502C0.746591 1.34646 0.746591 0.853994 1.05033 0.550253Z"/>
    <path fill-rule="evenodd" clip-rule="evenodd" d="M1.05033 10.4497C0.746591 10.146 0.746591 9.65354 1.05033 9.3498L9.84988 0.550253C10.1536 0.246513 10.6461 0.246512 10.9498 0.550253C11.2536 0.853994 11.2536 1.34646 10.9498 1.6502L2.15028 10.4497C1.84653 10.7535 1.35407 10.7535 1.05033 10.4497Z"/>
    <path fill-rule="evenodd" clip-rule="evenodd" d="M1.05033 0.550253C1.35407 0.246512 1.84653 0.246512 2.15028 0.550253L10.9498 9.3498C11.2536 9.65354 11.2536 10.146 10.9498 10.4497C10.6461 10.7535 10.1536 10.7535 9.84988 10.4497L1.05033 1.6502C0.746591 1.34646 0.746591 0.853994 1.05033 0.550253Z"/>
    <path fill-rule="evenodd" clip-rule="evenodd" d="M1.05033 10.4497C0.746591 10.146 0.746591 9.65354 1.05033 9.3498L9.84988 0.550253C10.1536 0.246513 10.6461 0.246512 10.9498 0.550253C11.2536 0.853994 11.2536 1.34646 10.9498 1.6502L2.15028 10.4497C1.84653 10.7535 1.35407 10.7535 1.05033 10.4497Z"/>
</svg>
    
                        </div>
                    </div>
                    <div class="px-10 py-8 bg-light w-full">
                        
<div class="sm:grid sm:grid-cols-[0.75fr_2fr_2fr] sm:gap-4">
    <label class="flex flex-col mb-4" data-controller="selectDropdown" data-selectDropdown-name-value="title">
    <span class="flex items-center gap-1">
        
            Title
        
        
    </span>
    <div class="relative flex items-center">
        <input readonly data-selectDropdown-target="input" placeholder="None" class="cursor-pointer bg-white rounded-lg border border-[#8E9AAB] px-2 py-1 w-full" type="text">
        <span class="absolute right-[0.75rem] text-dark"><svg width="10" height="7" viewBox="0 0 10 7" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
    <path fill-rule="evenodd" clip-rule="evenodd" d="M0.532527 0.810995C0.774981 0.598847 1.14351 0.623415 1.35566 0.86587L4.99999 5.03082L8.64432 0.86587C8.85647 0.623415 9.22499 0.598847 9.46745 0.810995C9.7099 1.02314 9.73447 1.39167 9.52232 1.63413L5.43899 6.30079C5.32822 6.42738 5.1682 6.5 4.99999 6.5C4.83178 6.5 4.67175 6.42738 4.56099 6.30079L0.477651 1.63413C0.265503 1.39167 0.290072 1.02314 0.532527 0.810995Z" />
</svg></span>
    </div>
    <span class="mt-1 text-xs text-[#D32F2F]">
        
    </span>
    <div data-selectDropdown-target="dropdown" class="relative hidden opacity-0">
        <ul class="w-full absolute bg-white py-2 mt-1 rounded-lg shadow border border-[#8E9AAB] z-10">
        
            <li data-index="1">
                <label class="cursor-pointer px-4 py-2 w-full block focus-within:bg-light hover:bg-light">
                    <input data-selectDropdown-target="radio" class="opacity-0 w-0" value="Mr." name="title"  type="radio" >
                    Mr.
                </label>
            </li>
        
            <li data-index="2">
                <label class="cursor-pointer px-4 py-2 w-full block focus-within:bg-light hover:bg-light">
                    <input data-selectDropdown-target="radio" class="opacity-0 w-0" value="Ms." name="title"  type="radio" >
                    Ms.
                </label>
            </li>
        
            <li data-index="3">
                <label class="cursor-pointer px-4 py-2 w-full block focus-within:bg-light hover:bg-light">
                    <input data-selectDropdown-target="radio" class="opacity-0 w-0" value="Mrs." name="title"  type="radio" >
                    Mrs.
                </label>
            </li>
        
            <li data-index="4">
                <label class="cursor-pointer px-4 py-2 w-full block focus-within:bg-light hover:bg-light">
                    <input data-selectDropdown-target="radio" class="opacity-0 w-0" value="Mx." name="title"  type="radio" >
                    Mx.
                </label>
            </li>
        
            <li data-index="5">
                <label class="cursor-pointer px-4 py-2 w-full block focus-within:bg-light hover:bg-light">
                    <input data-selectDropdown-target="radio" class="opacity-0 w-0" value="Dr." name="title"  type="radio" >
                    Dr.
                </label>
            </li>
        
            <li data-index="6">
                <label class="cursor-pointer px-4 py-2 w-full block focus-within:bg-light hover:bg-light">
                    <input data-selectDropdown-target="radio" class="opacity-0 w-0" value="Prof." name="title"  type="radio" >
                    Prof.
                </label>
            </li>
        
        </ul>
    </div>
</label>
    <label class="flex flex-col mb-4">
    <span class="flex items-center gap-1">
        First Name
        
        <span class="mb-[3px]"><svg width="9" height="9" viewBox="0 0 9 9" fill="none" xmlns="http://www.w3.org/2000/svg">
    <path d="M5.23438 0.84375L4.92188 3.82812L7.92188 2.97656L8.15625 4.64062L5.35156 4.89062L7.17188 7.32031L5.65625 8.14062L4.33594 5.52344L3.15625 8.13281L1.57812 7.32031L3.38281 4.89062L0.59375 4.63281L0.859375 2.97656L3.80469 3.82812L3.49219 0.84375H5.23438Z" fill="#D32F2F"/>
</svg>
    </span>
        
    </span>
    <input placeholder="John" class="bg-white rounded-lg border border-[#8E9AAB] px-2 py-1" name="first_name"  required type="">
    <span class="mt-1 text-xs text-[#D32F2F]">
        
    </span>
</label>
    <label class="flex flex-col mb-4">
    <span class="flex items-center gap-1">
        Last Name
        
        <span class="mb-[3px]"><svg width="9" height="9" viewBox="0 0 9 9" fill="none" xmlns="http://www.w3.org/2000/svg">
    <path d="M5.23438 0.84375L4.92188 3.82812L7.92188 2.97656L8.15625 4.64062L5.35156 4.89062L7.17188 7.32031L5.65625 8.14062L4.33594 5.52344L3.15625 8.13281L1.57812 7.32031L3.38281 4.89062L0.59375 4.63281L0.859375 2.97656L3.80469 3.82812L3.49219 0.84375H5.23438Z" fill="#D32F2F"/>
</svg>
    </span>
        
    </span>
    <input placeholder="Smith" class="bg-white rounded-lg border border-[#8E9AAB] px-2 py-1" name="last_name"  required type="">
    <span class="mt-1 text-xs text-[#D32F2F]">
        
    </span>
</label>
</div>
<label class="flex flex-col mb-4">
    <span class="flex items-center gap-1">
        Email
        
        <span class="mb-[3px]"><svg width="9" height="9" viewBox="0 0 9 9" fill="none" xmlns="http://www.w3.org/2000/svg">
    <path d="M5.23438 0.84375L4.92188 3.82812L7.92188 2.97656L8.15625 4.64062L5.35156 4.89062L7.17188 7.32031L5.65625 8.14062L4.33594 5.52344L3.15625 8.13281L1.57812 7.32031L3.38281 4.89062L0.59375 4.63281L0.859375 2.97656L3.80469 3.82812L3.49219 0.84375H5.23438Z" fill="#D32F2F"/>
</svg>
    </span>
        
    </span>
    <input placeholder="john@mail.com" class="bg-white rounded-lg border border-[#8E9AAB] px-2 py-1" name="email"  required type="">
    <span class="mt-1 text-xs text-[#D32F2F]">
        
    </span>
</label>
<label class="flex flex-col mb-4">
    <span class="flex items-center gap-1">
        Phone Number
        
    </span>
    <input placeholder="516-123-4567" class="bg-white rounded-lg border border-[#8E9AAB] px-2 py-1" name="phone_number"   type="">
    <span class="mt-1 text-xs text-[#D32F2F]">
        
    </span>
</label>
<label class="flex flex-col mb-4" data-controller="selectDropdown" data-selectDropdown-name-value="role">
    <span class="flex items-center gap-1">
        
            Role / Title
        
        
        <span class="mb-[3px]"><svg width="9" height="9" viewBox="0 0 9 9" fill="none" xmlns="http://www.w3.org/2000/svg">
    <path d="M5.23438 0.84375L4.92188 3.82812L7.92188 2.97656L8.15625 4.64062L5.35156 4.89062L7.17188 7.32031L5.65625 8.14062L4.33594 5.52344L3.15625 8.13281L1.57812 7.32031L3.38281 4.89062L0.59375 4.63281L0.859375 2.97656L3.80469 3.82812L3.49219 0.84375H5.23438Z" fill="#D32F2F"/>
</svg>
    </span>
        
    </span>
    <div class="relative flex items-center">
        <input readonly data-selectDropdown-target="input" placeholder="Select Role" class="cursor-pointer bg-white rounded-lg border border-[#8E9AAB] px-2 py-1 w-full" type="text">
        <span class="absolute right-[0.75rem] text-dark"><svg width="10" height="7" viewBox="0 0 10 7" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
    <path fill-rule="evenodd" clip-rule="evenodd" d="M0.532527 0.810995C0.774981 0.598847 1.14351 0.623415 1.35566 0.86587L4.99999 5.03082L8.64432 0.86587C8.85647 0.623415 9.22499 0.598847 9.46745 0.810995C9.7099 1.02314 9.73447 1.39167 9.52232 1.63413L5.43899 6.30079C5.32822 6.42738 5.1682 6.5 4.99999 6.5C4.83178 6.5 4.67175 6.42738 4.56099 6.30079L0.477651 1.63413C0.265503 1.39167 0.290072 1.02314 0.532527 0.810995Z" />
</svg></span>
    </div>
    <span class="mt-1 text-xs text-[#D32F2F]">
        
    </span>
    <div data-selectDropdown-target="dropdown" class="relative hidden opacity-0">
        <ul class="w-full absolute bg-white py-2 mt-1 rounded-lg shadow border border-[#8E9AAB] z-10">
        
            <li data-index="1">
                <label class="cursor-pointer px-4 py-2 w-full block focus-within:bg-light hover:bg-light">
                    <input data-selectDropdown-target="radio" class="opacity-0 w-0" value="ASSOCIATION_STAFF" name="role"  type="radio" required>
                    Association Staff
                </label>
            </li>
        
            <li data-index="2">
                <label class="cursor-pointer px-4 py-2 w-full block focus-within:bg-light hover:bg-light">
                    <input data-selectDropdown-target="radio" class="opacity-0 w-0" value="PROGRAM_STAFF" name="role"  type="radio" required>
                    Program Staff (Director, Manager, Coordinator)
                </label>
            </li>
        
            <li data-index="3">
                <label class="cursor-pointer px-4 py-2 w-full block focus-within:bg-light hover:bg-light">
                    <input data-selectDropdown-target="radio" class="opacity-0 w-0" value="PROSPECTIVE_FELLOW" name="role"  type="radio" required>
                    Prospective Fellow
                </label>
            </li>
        
            <li data-index="4">
                <label class="cursor-pointer px-4 py-2 w-full block focus-within:bg-light hover:bg-light">
                    <input data-selectDropdown-target="radio" class="opacity-0 w-0" value="FELLOWSHIP_SITE_STAFF" name="role"  type="radio" required>
                    Fellowship Site Staff (DIO, GME Coordinator)
                </label>
            </li>
        
            <li data-index="5">
                <label class="cursor-pointer px-4 py-2 w-full block focus-within:bg-light hover:bg-light">
                    <input data-selectDropdown-target="radio" class="opacity-0 w-0" value="OTHER" name="role"  type="radio" required>
                    Other
                </label>
            </li>
        
        </ul>
    </div>
</label>
<div data-requestInformationForm-target="medicalSchoolNameContainer" class="hidden">
    <label class="flex flex-col mb-4">
    <span class="flex items-center gap-1">
        Medical School Name
        
        <span class="mb-[3px]"><svg width="9" height="9" viewBox="0 0 9 9" fill="none" xmlns="http://www.w3.org/2000/svg">
    <path d="M5.23438 0.84375L4.92188 3.82812L7.92188 2.97656L8.15625 4.64062L5.35156 4.89062L7.17188 7.32031L5.65625 8.14062L4.33594 5.52344L3.15625 8.13281L1.57812 7.32031L3.38281 4.89062L0.59375 4.63281L0.859375 2.97656L3.80469 3.82812L3.49219 0.84375H5.23438Z" fill="#D32F2F"/>
</svg>
    </span>
        
    </span>
    <input placeholder="Medical School Name Goes Here" class="bg-white rounded-lg border border-[#8E9AAB] px-2 py-1" name="medical_school_name"   type="">
    <span class="mt-1 text-xs text-[#D32F2F]">
        
    </span>
</label>
</div>
<div data-requestInformationForm-target="specialtyContainer" class="hidden">
    <label class="flex flex-col mb-4">
    <span class="flex items-center gap-1">
        Specialty
        
        <span class="mb-[3px]"><svg width="9" height="9" viewBox="0 0 9 9" fill="none" xmlns="http://www.w3.org/2000/svg">
    <path d="M5.23438 0.84375L4.92188 3.82812L7.92188 2.97656L8.15625 4.64062L5.35156 4.89062L7.17188 7.32031L5.65625 8.14062L4.33594 5.52344L3.15625 8.13281L1.57812 7.32031L3.38281 4.89062L0.59375 4.63281L0.859375 2.97656L3.80469 3.82812L3.49219 0.84375H5.23438Z" fill="#D32F2F"/>
</svg>
    </span>
        
    </span>
    <input placeholder="Specialty Name Goes Here" class="bg-white rounded-lg border border-[#8E9AAB] px-2 py-1" name="specialty"   type="">
    <span class="mt-1 text-xs text-[#D32F2F]">
        
    </span>
</label>
</div>
<div data-requestInformationForm-target="programSiteContainer" class="hidden">
    <label class="flex flex-col mb-4">
    <span class="flex items-center gap-1">
        Program Site
        
        <span class="mb-[3px]"><svg width="9" height="9" viewBox="0 0 9 9" fill="none" xmlns="http://www.w3.org/2000/svg">
    <path d="M5.23438 0.84375L4.92188 3.82812L7.92188 2.97656L8.15625 4.64062L5.35156 4.89062L7.17188 7.32031L5.65625 8.14062L4.33594 5.52344L3.15625 8.13281L1.57812 7.32031L3.38281 4.89062L0.59375 4.63281L0.859375 2.97656L3.80469 3.82812L3.49219 0.84375H5.23438Z" fill="#D32F2F"/>
</svg>
    </span>
        
    </span>
    <input placeholder="Program Site Name Goes Here" class="bg-white rounded-lg border border-[#8E9AAB] px-2 py-1" name="program_site"   type="">
    <span class="mt-1 text-xs text-[#D32F2F]">
        
    </span>
</label>
</div>
<div data-requestInformationForm-target="associationNameContainer" class="hidden">
    <label class="flex flex-col mb-4">
    <span class="flex items-center gap-1">
        Association Name
        
        <span class="mb-[3px]"><svg width="9" height="9" viewBox="0 0 9 9" fill="none" xmlns="http://www.w3.org/2000/svg">
    <path d="M5.23438 0.84375L4.92188 3.82812L7.92188 2.97656L8.15625 4.64062L5.35156 4.89062L7.17188 7.32031L5.65625 8.14062L4.33594 5.52344L3.15625 8.13281L1.57812 7.32031L3.38281 4.89062L0.59375 4.63281L0.859375 2.97656L3.80469 3.82812L3.49219 0.84375H5.23438Z" fill="#D32F2F"/>
</svg>
    </span>
        
    </span>
    <input placeholder="Association Name Goes Here" class="bg-white rounded-lg border border-[#8E9AAB] px-2 py-1" name="association_name"   type="">
    <span class="mt-1 text-xs text-[#D32F2F]">
        
    </span>
</label>
</div>
<label data-controller="textareaCounter" data-textareaCounter-character-limit-value="240" 
    class="flex flex-col mb-4">
    <span class="flex items-center gap-1">
        
            Questions / Requests
        
        
    </span>
    <textarea rows="3" class="bg-white rounded-lg border border-[#8E9AAB] px-2 py-1" maxlength="240" placeholder="Any questions or requests go here." name="additional_questions"></textarea>
    
    <span class="mt-1 flex justify-between text-xs text-[#717179]">
        <span><span class="character-counter">240</span> Characters Remaining</span>
        <span><span class="word-counter">0</span> Words</span>
    </span>
    
    <span class="mt-1 text-xs text-[#D32F2F]">
        
    </span>
</label>

<div class="mt-3 md:mt-20 flex items-center gap-2 text-[12px]">
    <span class="mb-[3px]"><svg width="9" height="9" viewBox="0 0 9 9" fill="none" xmlns="http://www.w3.org/2000/svg">
    <path d="M5.23438 0.84375L4.92188 3.82812L7.92188 2.97656L8.15625 4.64062L5.35156 4.89062L7.17188 7.32031L5.65625 8.14062L4.33594 5.52344L3.15625 8.13281L1.57812 7.32031L3.38281 4.89062L0.59375 4.63281L0.859375 2.97656L3.80469 3.82812L3.49219 0.84375H5.23438Z" fill="#D32F2F"/>
</svg>
    </span> Indicates required fields.

</div>

                    </div>
                    <div class="px-10 py-3 w-full border-t-1 border-[#CAD2E1]">
                        
<div class="w-full flex !flex-row-reverse justify-between items-center">
    <input class="cursor-pointer uppercase bg-[#CDDC39] text-xs text-base font-bold px-4 py-2 rounded-md" type="submit" value="Submit">
    <button class="cursor-pointer uppercase text-xs text-base font-bold py-2 request-information-modal-hide-0" type="button">Cancel</button>
</div>

                    </div>
                    
</form>

                </div>
            </div>
        </div>
    </template>
</turbo-stream>