<turbo-stream action="replace" target="dynamic-frame"><template><div id="dynamic-frame" class="fixed bg-slate-700/90 top-0 right-0 bottom-0 left-0 z-50">
    <div class="fixed top-2 right-2 bottom-2 left-2 md:left-auto bg-white/90 rounded shadow border p-4 z-50 w-auto md:max-w-[380px] overflow-scroll">
        <h1 class="text-center">Add Diver to Queue</h1>
        <form action="/load_partial" accept-charset="UTF-8" method="post"><input type="hidden" name="authenticity_token" value="Wc4jVI-2efXK6qTTvCWcZl9raJL5yw4X3LRAgEbjObpGqgQWbYI4i7FbSCH8rLXRRZLYuIWM2_Yt8SiKm-GZ0g" autocomplete="off" />
            <div class="my-6">
                <div class="mb-3">
                    <label class="">Diver</label>
                </div>
                <select name="person[city_id]" id="person_city_id"><option value="Graham, Matthew">Graham, Matthew</option>
<option value="Pfeifer, Eric">Pfeifer, Eric</option>
<option value="Wuebben, William">Wuebben, William</option></select>
            </div>
            
            <div class="grid grid-cols-1 md:grid-cols-2 gap-4 items-center">
                    
                
                <div>
                    <label class="label" for="start_time">Start Time</label>
                    <input class="w-full" type="time" name="start_time" id="start_time" />
                </div>
                <div>
                    <label class="label" for="query">End Time</label>
                    <input class="w-full" type="time" name="query" id="query" />
                </div>
                
            </div>

            <div class="my-3">
                <div class="grid grid-cols-1 md:grid-cols-2 gap-4 items-center max-w-screen-sm">    
                    <div class="w-full md:w-auto">
                        <label class="label" for="query">Water Temp</label>
                        <div class="relative">
                            <input class="w-full" type="text" name="query" id="query" />
                            <div class="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-3">
                                <span class="text-gray-500 sm:text-sm" id="price-currency">°F</span>
                            </div>
                        </div>  
                    </div>
                    <div class="w-full md:w-auto">
                        <label class="label" for="query">Air Temp</label>
                        <div class="relative">
                            <input class="w-full" type="text" name="query" id="query" />
                            <div class="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-3">
                                <span class="text-gray-500 sm:text-sm" id="price-currency">°F</span>
                            </div>
                        </div>  
                    </div>
                </div>

                
            </div>
            <div class="my-6">
                <div class="grid grid-cols-1 md:grid-cols-2 gap-4 items-center max-w-screen-sm">    
                    <div class="w-full md:w-auto">
                        <label class="label" for="query">Air In</label>
                        <div class="relative">
                            <input class="w-full" type="text" name="query" id="query" />
                            <div class="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-3">
                                <span class="text-gray-500 sm:text-sm" id="price-currency">PSI</span>
                            </div>
                        </div>  
                    </div>
                    <div class="w-full md:w-auto">
                        <label class="label" for="query">Air Out</label>
                        <div class="relative">
                            <input class="w-full" type="text" name="query" id="query" />
                            <div class="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-3">
                                <span class="text-gray-500 sm:text-sm" id="price-currency">PSI</span>
                            </div>
                        </div>  
                    </div>
                </div>
            </div>

            <div class="my-6">
                <div class="grid grid-cols-1 md:grid-cols-2 gap-4 items-center max-w-screen-sm">    
                    <div class="w-full md:w-auto">
                        <label class="label" for="query">Visibility</label>
                        <div class="relative">
                            <input class="w-full" type="text" name="query" id="query" />
                            <div class="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-3">
                                <span class="text-gray-500 sm:text-sm" id="price-currency">FT</span>
                            </div>
                        </div>  
                    </div>
                    <div class="w-full md:w-auto">
                        <label class="label" for="query">Max Depth</label>
                        <div class="relative">
                            <input class="w-full" type="text" name="query" id="query" />
                            <div class="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-3">
                                <span class="text-gray-500 sm:text-sm" id="price-currency">FT</span>
                            </div>
                        </div>  
                    </div>
                </div>
            </div>

            <div class="my-6">    
                <div class="grid grid-cols-1 md:grid-cols-2 gap-4 items-center max-w-screen-sm">    
                    <div class="w-full md:w-auto">
                        <label class="label" for="query">Weight</label>
                        <div class="relative">
                            <input class="w-full" type="text" name="query" id="query" />
                            <div class="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-3">
                                <span class="text-gray-500 sm:text-sm" id="price-currency">LBS</span>
                            </div>
                        </div>  
                    </div>
                </div>
            </div>

            <div class="my-6">
                <div class="mb-3">
                    <label class="">Exposure Suit</label>
                    <!-- <p class="text-sm text-gray-500">How do you prefer to receive notifications?</p> -->
                </div>
                <select name="person[city_id]" id="person_city_id"><option value="Wetsuit">Wetsuit</option>
<option value="Drysuit">Drysuit</option>
<option value="Hot Water Suit">Hot Water Suit</option>
<option value="No Suit">No Suit</option>
<option value="Unknown">Unknown</option></select>
            </div>    

            <div class="my-3">
                <label class="label" for="query">Additional Details</label>
                <fieldset class="my-6">
                    <legend class="sr-only">Notifications</legend>
                    <div class="space-y-5">
                    <div class="relative flex items-start">
                        <div class="flex h-6 items-center">
                            <input id="hardhat" aria-describedby="hardhat-description" name="hardhat" type="checkbox" class="h-4 w-4 rounded border-gray-300 text-blue-600 focus:ring-blue-500">
                        </div>
                        <div class="ml-3 text-sm">
                            <label for="hardhat" class="font-semibold text-gray-900 mt-0.5 mb-0 cursor-pointer">Hard Hat Dive</label>
                            <p id="hardhat-description" class="m-0 text-gray-500">Get notified when a candidate applies for a job.</p>
                        </div>
                        </div>
                    <div class="relative flex items-start">
                        <div class="flex h-6 items-center">
                        <input id="comments" aria-describedby="comments-description" name="comments" type="checkbox" class="h-4 w-4 rounded border-gray-300 text-blue-600 focus:ring-blue-500">
                        </div>
                        <div class="ml-3 text-sm">
                        <label for="comments" class="font-semibold text-gray-900 mt-0.5 mb-0 cursor-pointer">Ice Dive</label>
                        <p id="comments-description" class="m-0 text-gray-500">Dive where cutting/breaking through the ice is necessary to complete operation.</p>
                        </div>
                    </div>
                    <div class="relative flex items-start">
                        <div class="flex h-6 items-center">
                        <input id="driftdive" aria-describedby="driftdive-description" name="driftdive" type="checkbox" class="h-4 w-4 rounded border-gray-300 text-blue-600 focus:ring-blue-500">
                        </div>
                        <div class="ml-3 text-sm">
                        <label for="driftdive" class="font-semibold text-gray-900 mt-0.5 mb-0 cursor-pointer">Drift Dive</label>
                        <p id="driftdive-description" class="m-0 text-gray-500">Get notified when a candidate applies for a job.</p>
                        </div>
                    </div>
                    <div class="relative flex items-start">
                        <div class="flex h-6 items-center">
                        <input id="offers" aria-describedby="offers-description" name="offers" type="checkbox" class="h-4 w-4 rounded border-gray-300 text-blue-600 focus:ring-blue-500">
                        </div>
                        <div class="ml-3 text-sm">
                        <label for="offers" class="font-semibold text-gray-900 mt-0.5 mb-0 cursor-pointer">Sled Dive</label>
                        <p id="offers-description" class="m-0 text-gray-500">Get notified when a candidate accepts or rejects an offer.</p>
                        </div>
                    </div>
                    </div>
                </fieldset>
            </div>

            <div class="my-3">  ... </div>

            <div class="my-3">
                <button class="bg-blue-500 text-white rounded py-1.5 px-3 hover:bg-blue-400 transition ease">Add Date</button>
            </div>
</form>    </div>
</div></template></turbo-stream>