Camp Health Form

You will need to fill out this health form in order to finish your camp form.
Since our health forms are only active from May to May even if you have finished the health form previously, you need to do so again in order to be eligible for camp. Keep in mind this is not due until you get to camp. If you need to wait to fill it out you may do so, but you won't be able to attend camp until it's complete.
    <h3 class="basis-full">2025-2026 Health Form</h3>
    <div class="basis-full flex flex-wrap my-4">
        <label for="first-name" class="basis-full">What is your first and last name? <span id="validate-name" class='inline-block text-[#f39] text-sm'>required</span></label>
        <br/>
        <input type="text" id="first-name" name="first-name" 
               hx-post="/api/validate/health-form"
               hx-trigger="keyup delay:300ms, input delay:300ms, load"
               hx-swap="none"
               placeholder="First Name" class="flex-1 form-input bg-gray-300 text-gray-900 dark:bg-gray-500 dark:text-gray-50 placeholder-gray-900 dark:placeholder-gray-300 focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 focus:ring-offset-transparent m-2 p-3 rounded-lg hover:bg-gray-400 dark:hover:bg-gray-600 checked:text-gray-900 dark:checked:text-gray-500">
        <input type="text" id="last-name" name="last-name" 
               hx-post="/api/validate/health-form"
               hx-trigger="keyup delay:300ms, input delay:300ms, load"
               hx-swap="none"
               placeholder="Last Name" class="flex-1 form-input bg-gray-300 text-gray-900 dark:bg-gray-500 dark:text-gray-50 placeholder-gray-900 dark:placeholder-gray-300 focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 focus:ring-offset-transparent m-2 p-3 rounded-lg hover:bg-gray-400 dark:hover:bg-gray-600 checked:text-gray-900 dark:checked:text-gray-500">
    </div>
    <div class="basis-full flex flex-wrap my-4">
        <label for="parent-first-name" class="basis-full">What is your parent's first and last name? <span id="validate-parent" class='inline-block text-[#f39] text-sm'>required</span></label>
        <input type="text" id="parent-first-name" name="parent-first-name"
               hx-post="/api/validate/health-form"
               hx-trigger="keyup delay:300ms, input delay:300ms, load"
               hx-swap="none"
               class="flex-1 form-input bg-gray-300 text-gray-900 dark:bg-gray-500 dark:text-gray-50 placeholder-gray-900 dark:placeholder-gray-300 focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 focus:ring-offset-transparent m-2 p-3 rounded-lg hover:bg-gray-400 dark:hover:bg-gray-600 checked:text-gray-900 dark:checked:text-gray-500"
               placeholder="First Name" >
        <input type="text" id="parent-last-name" name="parent-last-name"
               hx-post="/api/validate/health-form"
               hx-trigger="keyup delay:300ms, input delay:300ms, load"
               hx-swap="none"
               class="flex-1 form-input bg-gray-300 text-gray-900 dark:bg-gray-500 dark:text-gray-50 placeholder-gray-900 dark:placeholder-gray-300 focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 focus:ring-offset-transparent m-2 p-3 rounded-lg hover:bg-gray-400 dark:hover:bg-gray-600 checked:text-gray-900 dark:checked:text-gray-500"
               placeholder="Last Name" >
    </div>
    <div class="basis-full my-8">
        <div class="flex flex-wrap">
            <label for="birth-date" class="basis-full">When were you born? <span id="validate-birthdate" class='inline-block text-[#f39] text-sm'>required</span></label>
            <input type="date" id="birth-date" name="birth-date"
                   hx-post="/api/validate/health-form"
                   hx-trigger="keyup delay:300ms, input delay:300ms, load"
                   hx-swap="none"
                   class="form-date flex-auto bg-gray-300 text-gray-900 dark:bg-gray-500 dark:text-gray-50 placeholder-gray-900 dark:placeholder-gray-300 focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 focus:ring-offset-transparent m-2 p-3 rounded-lg hover:bg-gray-400 dark:hover:bg-gray-600 checked:text-gray-900 dark:checked:text-gray-500" >
        </div>
    </div>
    <div class="basis-full flex flex-wrap my-4">
        <label for="street" class="basis-full">What is your address? <span id="validate-address" class='inline-block text-[#f39] text-sm'>required</span></label>
        <input type="text" id="street" name="street"
               hx-post="/api/validate/health-form"
               hx-trigger="keyup delay:300ms, input delay:300ms, load"
               hx-swap="none"
               class="basis-full form-input bg-gray-300 text-gray-900 dark:bg-gray-500 dark:text-gray-50 placeholder-gray-900 dark:placeholder-gray-300 focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 focus:ring-offset-transparent m-2 p-3 rounded-lg hover:bg-gray-400 dark:hover:bg-gray-600 checked:text-gray-900 dark:checked:text-gray-500"
               placeholder="Street Address">
        <input type="text" id="city" name="city"
               hx-post="/api/validate/health-form"
               hx-trigger="keyup delay:300ms, input delay:300ms, load"
               hx-swap="none"
               class="flex-auto form-input bg-gray-300 text-gray-900 dark:bg-gray-500 dark:text-gray-50 placeholder-gray-900 dark:placeholder-gray-300 focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 focus:ring-offset-transparent m-2 p-3 rounded-lg hover:bg-gray-400 dark:hover:bg-gray-600 checked:text-gray-900 dark:checked:text-gray-500"
               placeholder="City">
        <input type="text" id="state" name="state"
               hx-post="/api/validate/health-form"
               hx-trigger="keyup delay:300ms, input delay:300ms, load"
               hx-swap="none"
               class="flex-auto form-input bg-gray-300 text-gray-900 dark:bg-gray-500 dark:text-gray-50 placeholder-gray-900 dark:placeholder-gray-300 focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 focus:ring-offset-transparent m-2 p-3 rounded-lg hover:bg-gray-400 dark:hover:bg-gray-600 checked:text-gray-900 dark:checked:text-gray-500"
               placeholder="State">
        <input type="text" id="zip" name="zip"
               hx-post="/api/validate/health-form"
               hx-trigger="keyup delay:300ms, input delay:300ms, load"
               hx-swap="none"
               class="flex-auto form-input bg-gray-300 text-gray-900 dark:bg-gray-500 dark:text-gray-50 placeholder-gray-900 dark:placeholder-gray-300 focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 focus:ring-offset-transparent m-2 p-3 rounded-lg hover:bg-gray-400 dark:hover:bg-gray-600 checked:text-gray-900 dark:checked:text-gray-500"
               placeholder="Zip Code">
    </div>
    <div class="basis-full flex flex-wrap items-center my-8">
        <div class="flex-auto flex flex-wrap items-center">
            <label for="cell-phone" class="basis-full mr-4">
                Parent Cell phone
                <span id="validate-parent-phone" class='inline-block text-[#f39] text-sm'>required</span>
            </label>
            <input type="tel" id="cell-phone" name="cell-phone"
                   hx-post="/api/validate/health-form"
                   hx-trigger="keyup delay:300ms, input delay:300ms, load"
                   hx-swap="none"
                   class="flex-auto form-input bg-gray-300 text-gray-900 dark:bg-gray-500 dark:text-gray-50 placeholder-gray-900 dark:placeholder-gray-300 focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 focus:ring-offset-transparent m-2 p-3 rounded-lg hover:bg-gray-400 dark:hover:bg-gray-600 checked:text-gray-900 dark:checked:text-gray-500">
        </div>
        <div class="flex-auto flex flex-wrap items-center">
            <label for="home-phone" class="basis-full mr-4">Home phone</label>
            <input type="tel" id="home-phone" name="home-phone"
                   class="flex-auto form-input bg-gray-300 text-gray-900 dark:bg-gray-500 dark:text-gray-50 placeholder-gray-900 dark:placeholder-gray-300 focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 focus:ring-offset-transparent m-2 p-3 rounded-lg hover:bg-gray-400 dark:hover:bg-gray-600 checked:text-gray-900 dark:checked:text-gray-500">
        </div>
    </div>
    <div class="basis-full flex flex-wrap my-4">
        <label for="additional-emergency-contact" class="basis-full">Additional Emergency Contact</label>
        <input type="text" id="additional-emergency-contact"
               name="additional-emergency-contact"
               class="flex-auto form-input bg-gray-300 text-gray-900 dark:bg-gray-500 dark:text-gray-50 placeholder-gray-900 dark:placeholder-gray-300 focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 focus:ring-offset-transparent m-2 p-3 rounded-lg hover:bg-gray-400 dark:hover:bg-gray-600 checked:text-gray-900 dark:checked:text-gray-500"
               placeholder="Full Name">
        <input type="tel" id="additional-emergency-contact-phone"
               name="additional-emergency-contact-phone"
               class="flex-auto form-input bg-gray-300 text-gray-900 dark:bg-gray-500 dark:text-gray-50 placeholder-gray-900 dark:placeholder-gray-300 focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 focus:ring-offset-transparent m-2 p-3 rounded-lg hover:bg-gray-400 dark:hover:bg-gray-600 checked:text-gray-900 dark:checked:text-gray-500"
               placeholder="Phone Number">
    </div>
    <div class="basis-full flex flex-wrap my-4">
        <label for="doctor-name" class="basis-full">Doctor</label>
        <input type="text" id="doctor-name" name="doctor-name"
               class="flex-auto form-input bg-gray-300 text-gray-900 dark:bg-gray-500 dark:text-gray-50 placeholder-gray-900 dark:placeholder-gray-300 focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 focus:ring-offset-transparent m-2 p-3 rounded-lg hover:bg-gray-400 dark:hover:bg-gray-600 checked:text-gray-900 dark:checked:text-gray-500"
               placeholder="Doctor's Name">
        <input type="text" id="doctor-city" name="doctor-city"
               class="flex-auto form-input bg-gray-300 text-gray-900 dark:bg-gray-500 dark:text-gray-50 placeholder-gray-900 dark:placeholder-gray-300 focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 focus:ring-offset-transparent m-2 p-3 rounded-lg hover:bg-gray-400 dark:hover:bg-gray-600 checked:text-gray-900 dark:checked:text-gray-500"
               placeholder="Doctor's City">
        <input type="tel" id="doctor-phone"
               name="doctor-phone"
               class="flex-auto form-input bg-gray-300 text-gray-900 dark:bg-gray-500 dark:text-gray-50 placeholder-gray-900 dark:placeholder-gray-300 focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 focus:ring-offset-transparent m-2 p-3 rounded-lg hover:bg-gray-400 dark:hover:bg-gray-600 checked:text-gray-900 dark:checked:text-gray-500"
               placeholder="Phone Number">
    </div>
    <div class="basis-full my-4 flex flex-wrap items-center">
        <label for="medical-coverage" class="basis-full mt-8">Is this participant covered by medical insurance? <span class='inline-block text-[#f39] text-sm'>* required</span></label>
        <div class="basis-full flex flex-wrap items-center">
            <input type="radio" id="medical-coverage" name="medical-coverage"
                   onclick="process()" value="yes"
                   class="flex-none form-input bg-gray-300 text-gray-900 dark:bg-gray-500 dark:text-gray-50 placeholder-gray-900 dark:placeholder-gray-300 focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 focus:ring-offset-transparent m-2 p-3 rounded-lg hover:bg-gray-400 dark:hover:bg-gray-600 checked:text-gray-900 dark:checked:text-gray-500 checked">
            <label for="medical-coverage" class="flex-auto">Yes</label>
        </div>
        <div class="basis-full flex flex-wrap items-center">
            <input type="radio" id="medical-coverage" name="medical-coverage"
                   onclick="process()" value="no" checked
                   class="flex-none form-input bg-gray-300 text-gray-900 dark:bg-gray-500 dark:text-gray-50 placeholder-gray-900 dark:placeholder-gray-300 focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 focus:ring-offset-transparent m-2 p-3 rounded-lg hover:bg-gray-400 dark:hover:bg-gray-600 checked:text-gray-900 dark:checked:text-gray-500 ">
            <label for="medical-coverage" class="flex-auto">No</label>
        </div>
    </div>
    <div id="policy" class="basis-full flex flex-wrap my-4">
        <label for="insurance-name" class="basis-full">Insurance Name</label>
        <input type="text" id="insurance-name" name="insurance-name"
               class="flex-1 form-input bg-gray-300 text-gray-900 dark:bg-gray-500 dark:text-gray-50 placeholder-gray-900 dark:placeholder-gray-300 focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 focus:ring-offset-transparent m-2 p-3 rounded-lg hover:bg-gray-400 dark:hover:bg-gray-600 checked:text-gray-900 dark:checked:text-gray-500"
               placeholder="Insurance Name">
        <label for="policy-number" class="basis-full">Policy Number</label>
        <input type="text" id="policy-number" name="policy-number"
               class="flex-1 form-input bg-gray-300 text-gray-900 dark:bg-gray-500 dark:text-gray-50 placeholder-gray-900 dark:placeholder-gray-300 focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 focus:ring-offset-transparent m-2 p-3 rounded-lg hover:bg-gray-400 dark:hover:bg-gray-600 checked:text-gray-900 dark:checked:text-gray-500"
               placeholder="Policy Number">
    </div>
    <div class="basis-full my-4 mb-8 flex flex-wrap">
        <label for="image" class="basis-full">
            Please give us a scanned copy of your insurance card.
        </label>
        <input type="file" id="image" name="image"
               class="file:my-4 file:ml-2 file:py-2 file:px-4 file:rounded-lg file:border-0 file:text-sm file:font-semibold file:bg-neutral-500 file:text-neutral-100 hover:file:bg-primary-300 hover:file:ring-offset-2 hover:file:ring-2 hover:file:ring-offset-transparent hover:file:text-primary-500 hover:file:ring-primary-500">
    </div>

    <div class="basis-full flex flex-wrap items-center">
        <h3 class="basis-full">Please read and agree to the following</h3>
        <li>On this <span id="current_date"></span>, I/we the parent(s)/legal guardian(s) of the above-named child ("Participant") do hereby delegate to the TFC Connection Staff a "Power of Attorney" for the above-named child for the purpose of having custody of my/our child and my/our consent to any needed emergency/medical treatment and administration of prescribed medications of my/our child.</li>
        <br/>
        <li>In the event that I cannot be reached in an emergency during the dates specified on this form, I hereby give my permission to the physician or dentist selected by the TFC Connection Staff to hospitalize, to secure proper treatment, and/or order any injection, anesthesia, or surgery for my son or daughter as deemed necessary.</li>
        <br/>
        <li>I understand that every activity sponsored by TFC Connection is carefully planned and adequately supervised by mature adults. However, even with the best planning and precaution, unforeseen events can occur. By signing this form as parent/guardian, I/we agree to assume and accept all risks and hazards inherent in ministry-related activities and events. I/we acknowledge that participation in TFC Connection ministry activities and events involves risk to the participant (and to the participant's parents or guardians, if the participant is a minor), and may result in various types of injury including, but not limited to, the following: sickness, exposure to infectious/communicable disease, bodily injury, death, emotional injury, personal injury, property damage, and financial damage.</li>
        <br/>
        <li>In consideration for the opportunity to participate in TFC Connection activities and events, the participant (or parent/guardian if the participant is a minor) acknowledges and accepts the risks of injury associated with participation in and transportation to and from the activities or events. The participant (or parent/guardian) accepts personal financial responsibility for any injury or other loss sustained during the activity or event, or during transportation to and from the activity or event, as well as for any medical treatment rendered to the participant that is authorized by the sponsor or its agents, employees, volunteers, or any other representatives (collectively referred to as the "activity sponsor"). Further, the participant (or parent/guardian) releases and promises to indemnify, defend, and hold harmless the activity sponsor for any injury arising directly or indirectly out of ministry activities and events, or transportation to and from activities and events, whether such injury arises out of the negligence of the activity sponsor, the participant, or otherwise.</li>
        <br/>
        <li>I/we also agree not to hold TFC Connection, it's employees or volunteer assistants liable for damages, losses, or injuries to the participant or their personal property. As parent/guardian, I understand that I am signing for the minor named on this form and the signatures are to provide for the medical release and the liability release.</li>
        <br/>
        <li>Further, should it be necessary for the participant to return home due to medical reasons, disciplinary action, or otherwise, I/we hereby assume transportation costs for their return.</li>
        <br/>
        <li>Regarding sleeping arrangements teens will be identified by their biological sex/gender and will be housed with teens and adults with the same biological sex/gender.</li>
        <br/>
        <li>I give permission to TFC Connection to use my child's image in photos or videos taken at TFC sponsored activities and events in order to publicize or promote TFC activities, including promotional materials, the TFC website, and social media pages.</li>
    </div>

    <div class="basis-full my-4 flex flex-wrap items-center">
        <label for="agreement" class="basis-full mt-8">Do you agree with the above? <span class='inline-block text-[#f39] text-sm'>* required</span></label>
        <div class="basis-full flex flex-wrap items-center">
            <input type="radio" id="agreement" name="agreement"
                   onclick="process()" value="yes"
                   class="flex-none form-input bg-gray-300 text-gray-900 dark:bg-gray-500 dark:text-gray-50 placeholder-gray-900 dark:placeholder-gray-300 focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 focus:ring-offset-transparent m-2 p-3 rounded-lg hover:bg-gray-400 dark:hover:bg-gray-600 checked:text-gray-900 dark:checked:text-gray-500 checked">
            <label for="agreement" class="flex-auto">Yes</label>
        </div>
        <div class="basis-full flex flex-wrap items-center">
            <input type="radio" id="agreement" name="agreement"
                   onclick="process()" value="no"
                   class="flex-none form-input bg-gray-300 text-gray-900 dark:bg-gray-500 dark:text-gray-50 placeholder-gray-900 dark:placeholder-gray-300 focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 focus:ring-offset-transparent m-2 p-3 rounded-lg hover:bg-gray-400 dark:hover:bg-gray-600 checked:text-gray-900 dark:checked:text-gray-500 "
                   checked>
            <label for="agreement" class="flex-auto">No</label>
        </div>
    </div>

    <div class="basis-full my-4 flex flex-wrap items-center">
        <label for="allergies" class="basis-full mt-8">What allergies do we need to be aware of?</label>
        <div class="basis-full flex flex-wrap items-center">
            <input type="radio" id="allergies" name="allergies"
                   value="none" class="flex-none form-input bg-gray-300 text-gray-900 dark:bg-gray-500 dark:text-gray-50 placeholder-gray-900 dark:placeholder-gray-300 focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 focus:ring-offset-transparent m-2 p-3 rounded-lg hover:bg-gray-400 dark:hover:bg-gray-600 checked:text-gray-900 dark:checked:text-gray-500" checked>
            <label for="allergies" class="flex-auto">None</label>
        </div>
        <div class="basis-full flex flex-wrap items-center">
            <input type="radio" id="allergies" name="allergies"
                   value="insects" class="flex-none form-input bg-gray-300 text-gray-900 dark:bg-gray-500 dark:text-gray-50 placeholder-gray-900 dark:placeholder-gray-300 focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 focus:ring-offset-transparent m-2 p-3 rounded-lg hover:bg-gray-400 dark:hover:bg-gray-600 checked:text-gray-900 dark:checked:text-gray-500">
            <label for="allergies" class="flex-auto">Insects</label>
        </div>
        <div class="basis-full flex flex-wrap items-center">
            <input type="radio" id="allergies" name="allergies"
                   value="plants" class="flex-none form-input bg-gray-300 text-gray-900 dark:bg-gray-500 dark:text-gray-50 placeholder-gray-900 dark:placeholder-gray-300 focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 focus:ring-offset-transparent m-2 p-3 rounded-lg hover:bg-gray-400 dark:hover:bg-gray-600 checked:text-gray-900 dark:checked:text-gray-500">
            <label for="allergies" class="flex-auto">Plants or Weeds</label>
        </div>
        <div class="basis-full flex flex-wrap items-center">
            <input type="radio" id="allergies" name="allergies"
                   value="animals" class="flex-none form-input bg-gray-300 text-gray-900 dark:bg-gray-500 dark:text-gray-50 placeholder-gray-900 dark:placeholder-gray-300 focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 focus:ring-offset-transparent m-2 p-3 rounded-lg hover:bg-gray-400 dark:hover:bg-gray-600 checked:text-gray-900 dark:checked:text-gray-500">
            <label for="allergies" class="flex-auto">Animals</label>
        </div>
        <div class="basis-full flex flex-wrap items-center">
            <input type="radio" id="allergies" name="allergies"
                   value="medication" class="flex-none form-input bg-gray-300 text-gray-900 dark:bg-gray-500 dark:text-gray-50 placeholder-gray-900 dark:placeholder-gray-300 focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 focus:ring-offset-transparent m-2 p-3 rounded-lg hover:bg-gray-400 dark:hover:bg-gray-600 checked:text-gray-900 dark:checked:text-gray-500">
            <label for="allergies" class="flex-auto">Medication</label>
        </div>
        <div class="basis-full flex flex-wrap items-center">
            <input type="radio" id="allergies" name="allergies"
                   value="other" class="flex-none form-input bg-gray-300 text-gray-900 dark:bg-gray-500 dark:text-gray-50 placeholder-gray-900 dark:placeholder-gray-300 focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 focus:ring-offset-transparent m-2 p-3 rounded-lg hover:bg-gray-400 dark:hover:bg-gray-600 checked:text-gray-900 dark:checked:text-gray-500">
            <input type="text" id="allergies-other" name="allergies-other"
                   class="flex-auto form-input bg-gray-300 text-gray-900 dark:bg-gray-500 dark:text-gray-50 placeholder-gray-900 dark:placeholder-gray-300 focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 focus:ring-offset-transparent m-2 p-3 rounded-lg hover:bg-gray-400 dark:hover:bg-gray-600 checked:text-gray-900 dark:checked:text-gray-500" placeholder="Other">
        </div>
    </div>

    <div class="basis-full mt-10">
        <label for="specific-allergies" class="p-4">
            Please list specific allergies
        </label>
        <br/>
        <textarea id="specific-allergies" name="specific-allergies"
                  class="form-input w-full h-64 bg-gray-300 text-gray-900 dark:bg-gray-500 dark:text-gray-50 placeholder-gray-900 dark:placeholder-gray-300 focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 focus:ring-offset-transparent m-2 p-3 rounded-lg hover:bg-gray-400 dark:hover:bg-gray-600 checked:text-gray-900 dark:checked:text-gray-500"
                  placeholder=""></textarea>
    </div>
    <div class="basis-full mt-10">
        <label for="allergic-treatment" class="p-4">
            Treatment for those allergies
        </label>
        <br/>
        <textarea id="allergic-treatment" name="allergic-treatment"
                  class="form-input w-full h-64 bg-gray-300 text-gray-900 dark:bg-gray-500 dark:text-gray-50 placeholder-gray-900 dark:placeholder-gray-300 focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 focus:ring-offset-transparent m-2 p-3 rounded-lg hover:bg-gray-400 dark:hover:bg-gray-600 checked:text-gray-900 dark:checked:text-gray-500"
                  placeholder=""></textarea>
    </div>
    <div class="basis-full mt-10">
        <label for="conditions" class="p-4">
            Physical or mental conditions that we should be aware of
        </label>
        <br/>
        <textarea id="conditions" name="conditions"
                  class="form-input w-full h-64 bg-gray-300 text-gray-900 dark:bg-gray-500 dark:text-gray-50 placeholder-gray-900 dark:placeholder-gray-300 focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 focus:ring-offset-transparent m-2 p-3 rounded-lg hover:bg-gray-400 dark:hover:bg-gray-600 checked:text-gray-900 dark:checked:text-gray-500"
                  placeholder=""></textarea>
    </div>
    <div class="basis-full my-8">
        <label for="tetanus-shot" class="">When was your last tetanus shot?</label>
        <input type="date" id="tetanus-shot" name="tetanus-shot"
               class="form-date bg-gray-300 text-gray-900 dark:bg-gray-500 dark:text-gray-50 placeholder-gray-900 dark:placeholder-gray-300 focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 focus:ring-offset-transparent m-2 p-3 rounded-lg hover:bg-gray-400 dark:hover:bg-gray-600 checked:text-gray-900 dark:checked:text-gray-500">
    </div>
    <div class="basis-full my-4 flex flex-wrap items-center">
        <label for="swimming-ability" class="basis-full mt-8">Swimming ability</label>
        <div class="basis-full flex flex-wrap items-center">
            <input type="radio" id="swimming-ability" name="swimming-ability"
                   value="good" class="flex-none form-input bg-gray-300 text-gray-900 dark:bg-gray-500 dark:text-gray-50 placeholder-gray-900 dark:placeholder-gray-300 focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 focus:ring-offset-transparent m-2 p-3 rounded-lg hover:bg-gray-400 dark:hover:bg-gray-600 checked:text-gray-900 dark:checked:text-gray-500" checked>
            <label for="swimming-ability" class="flex-auto">Good</label>
        </div>
        <div class="basis-full flex flex-wrap items-center">
            <input type="radio" id="swimming-ability" name="swimming-ability"
                   value="fair" class="flex-none form-input bg-gray-300 text-gray-900 dark:bg-gray-500 dark:text-gray-50 placeholder-gray-900 dark:placeholder-gray-300 focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 focus:ring-offset-transparent m-2 p-3 rounded-lg hover:bg-gray-400 dark:hover:bg-gray-600 checked:text-gray-900 dark:checked:text-gray-500">
            <label for="swimming-ability" class="flex-auto">Fair</label>
            <div class="basis-full flex flex-wrap items-center">
                <input type="radio" id="swimming-ability" name="swimming-ability"
                       value="none" class="flex-none form-input bg-gray-300 text-gray-900 dark:bg-gray-500 dark:text-gray-50 placeholder-gray-900 dark:placeholder-gray-300 focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 focus:ring-offset-transparent m-2 p-3 rounded-lg hover:bg-gray-400 dark:hover:bg-gray-600 checked:text-gray-900 dark:checked:text-gray-500">
                <label for="swimming-ability" class="flex-auto">None</label>
            </div>
        </div>
        <div class="basis-full mt-10">
            <h3 class="pt-4 px-4">What medication schedule do you follow?</h3>
            <h4 class="px-4 pt-2 pb-4">Medication must be in it's original labeled container from the pharmacy</h3>
                <label for="medication-schedule" class="p-4">
                    Please write them out in this pattern and a new medication on each line.
                    <br>
                    <table>
                        <tr>
                            <th>Medication Name</th>
                            <th>Time Given</th>
                            <th>How Many</th>
                            <th>Purpose of Medication</th>
                        </tr>
                        <tr>
                            <td>(Sample) Tums,</td>
                            <td>After each meal,</td>
                            <td>1-2,</td>
                            <td>Stomach issues</td>
                        </tr>
                    </table> 
                </label>
                <textarea id="medication-schedule" name="medication-schedule"
                          class="form-input w-full h-64 bg-gray-300 text-gray-900 dark:bg-gray-500 dark:text-gray-50 placeholder-gray-900 dark:placeholder-gray-300 focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 focus:ring-offset-transparent m-2 p-3 rounded-lg hover:bg-gray-400 dark:hover:bg-gray-600 checked:text-gray-900 dark:checked:text-gray-500"
                          placeholder=""></textarea>
        </div>
        <div class="basis-full mt-10">
            <label for="other-notes" class="p-4">
                Is there anything you want the TFC staff to know that would help your child have a great experience?
            </label>
            <br/>
            <textarea id="other-notes" name="other-notes"
                      class="form-input w-full h-64 bg-gray-300 text-gray-900 dark:bg-gray-500 dark:text-gray-50 placeholder-gray-900 dark:placeholder-gray-300 focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 focus:ring-offset-transparent m-2 p-3 rounded-lg hover:bg-gray-400 dark:hover:bg-gray-600 checked:text-gray-900 dark:checked:text-gray-500"
                      placeholder=""></textarea>
        </div>

        <div class="basis-full mt-8">
            <button type="submit" class="content-right rounded-lg text-white bg-blue-800 px-4 py-2 text-neutral !no-underline hover:!bg-blue-500 dark:bg-blue-800 dark:hover:!bg-blue-700 float-right">Submit</button>
        </div>

        <!-- <div id="warning" class="invisible basis-full mt-10 flex px-4 py-3 rounded-lg bg-[#ef4444] dark:bg-[#ef4444]">
             <span class="text-[#fca5a5] ltr:pr-3 rtl:pl-3 content-right float-right">
             <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" d="M506.3 417l-213.3-364c-16.33-28-57.54-28-73.98 0l-213.2 364C-10.59 444.9 9.849 480 42.74 480h426.6C502.1 480 522.6 445 506.3 417zM232 168c0-13.25 10.75-24 24-24S280 154.8 280 168v128c0 13.25-10.75 24-23.1 24S232 309.3 232 296V168zM256 416c-17.36 0-31.44-14.08-31.44-31.44c0-17.36 14.07-31.44 31.44-31.44s31.44 14.08 31.44 31.44C287.4 401.9 273.4 416 256 416z"/></svg>

             You have not agreed to the liability release. Please have a guardian read and agree to it first.
             </span>
             </div>

             <div id="warning-insurance" class="invisible basis-full mt-10 flex px-4 py-3 rounded-lg bg-[#ef4444] dark:bg-[#ef4444]">
             <span class="text-[#fca5a5] ltr:pr-3 rtl:pl-3 content-right float-right">
             <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" d="M506.3 417l-213.3-364c-16.33-28-57.54-28-73.98 0l-213.2 364C-10.59 444.9 9.849 480 42.74 480h426.6C502.1 480 522.6 445 506.3 417zM232 168c0-13.25 10.75-24 24-24S280 154.8 280 168v128c0 13.25-10.75 24-23.1 24S232 309.3 232 296V168zM256 416c-17.36 0-31.44-14.08-31.44-31.44c0-17.36 14.07-31.44 31.44-31.44s31.44 14.08 31.44 31.44C287.4 401.9 273.4 416 256 416z"/></svg>

             You have not entered in your insurance name.
             </span>
             </div>

             <div id="warning-policy" class="invisible basis-full mt-10 flex px-4 py-3 rounded-lg bg-[#ef4444] dark:bg-[#ef4444]">
             <span class="text-[#fca5a5] ltr:pr-3 rtl:pl-3 content-right float-right">
             <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" d="M506.3 417l-213.3-364c-16.33-28-57.54-28-73.98 0l-213.2 364C-10.59 444.9 9.849 480 42.74 480h426.6C502.1 480 522.6 445 506.3 417zM232 168c0-13.25 10.75-24 24-24S280 154.8 280 168v128c0 13.25-10.75 24-23.1 24S232 309.3 232 296V168zM256 416c-17.36 0-31.44-14.08-31.44-31.44c0-17.36 14.07-31.44 31.44-31.44s31.44 14.08 31.44 31.44C287.4 401.9 273.4 416 256 416z"/></svg>

             You have not entered in a policy number.
             </span>
             </div>

             <div id="warning-image" class="invisible basis-full mt-10 flex px-4 py-3 rounded-lg bg-[#ef4444] dark:bg-[#ef4444]">
             <span class="text-[#fca5a5] ltr:pr-3 rtl:pl-3 content-right float-right">
             <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" d="M506.3 417l-213.3-364c-16.33-28-57.54-28-73.98 0l-213.2 364C-10.59 444.9 9.849 480 42.74 480h426.6C502.1 480 522.6 445 506.3 417zM232 168c0-13.25 10.75-24 24-24S280 154.8 280 168v128c0 13.25-10.75 24-23.1 24S232 309.3 232 296V168zM256 416c-17.36 0-31.44-14.08-31.44-31.44c0-17.36 14.07-31.44 31.44-31.44s31.44 14.08 31.44 31.44C287.4 401.9 273.4 416 256 416z"/></svg>

             You have not included a copy of your insurance card.
             </span>
             </div> -->
</form>