{{-- Exit Assessment Modal --}}
 <div 
 x-data="{exitQuizModal : @entangle('exitQuizModal').defer}" 
 x-init="$watch('exitQuizModal', value => modalShow = exitQuizModal)" 
 x-show="exitQuizModal"
 style="display:none"
 class=" modal  fixed left-0 top-0 w-full h-full outline-none overflow-x-hidden overflow-y-auto" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true" role="dialog">
    <div class="modal-dialog modal-dialog-centered relative w-auto pointer-events-none max-w-[94vw] lg:max-w-[618px] mx-auto">
        <div class="modal-content border-none shadow-lg relative flex flex-col w-full pointer-events-auto bg-white bg-clip-padding rounded-md outline-none text-current">
            <!-- <a href="#" class="absolute right-5 top-5 z-10" data-bs-dismiss="modal" aria-label="Close"><img src="http://ltf-crm-frontend.test/build/assets/icon-close-rounded-c64fca21.svg" alt=""></a> -->
            <div class="modal-body relative p-10">
                
                <div class="flex  justify-center">                    
                    <div>
                        <div class="flex justify-center">
                            <svg xmlns="http://www.w3.org/2000/svg" width="55" height="54" viewBox="0 0 55 54" fill="none">
                                <path d="M51.575 39.3751L33.35 7.87506C31.55 4.72506 27.275 3.60006 24.125 5.40006C23 6.07506 22.1 6.97506 21.65 7.87506L3.42496 39.3751C1.62496 42.5251 2.74996 46.8001 5.89996 48.6001C7.02496 49.2751 8.14996 49.5001 9.27496 49.5001H45.5C49.325 49.5001 52.25 46.3501 52.25 42.7501C52.475 41.4001 52.025 40.2751 51.575 39.3751ZM27.5 40.5001C26.15 40.5001 25.25 39.6001 25.25 38.2501C25.25 36.9001 26.15 36.0001 27.5 36.0001C28.85 36.0001 29.75 36.9001 29.75 38.2501C29.75 39.6001 28.85 40.5001 27.5 40.5001ZM29.75 29.2501C29.75 30.6001 28.85 31.5001 27.5 31.5001C26.15 31.5001 25.25 30.6001 25.25 29.2501V20.2501C25.25 18.9001 26.15 18.0001 27.5 18.0001C28.85 18.0001 29.75 18.9001 29.75 20.2501V29.2501Z" fill="#3B82F6"/>
                            </svg>
                        </div>
                        <p class="text-neutral-800 font-bold text-lg my-2 text-center">Are you sure you wish exit assessment? </p>
                        <p class="text-gray-500 text-[15px] text-center">Short exit sentence here.</p>
                        <div class="flex flex-row items-center justify-center mx-1 sm:-mx-[6px] mb-1 sm:mb-0 mt-6">
                            <div class="px-1 sm:px-[6px]">
                                <a href="#" x-on:click="exitQuizModal=false" class="inline-block group text-center border border-blue-500 rounded-md h-[34px] sm:h-[40px]  p-2 px-5 sm:px-[33px] text-blue-500 bg-white text-sm sm:text-base leading-tight hover:bg-blue-500 hover:border-blue-500 hover:text-white transition ease-in-out duration-200">                       
                                    Back
                                </a>
                            </div>
                            <div class="px-1 sm:px-[6px]">
                                <a href="{{route('teacher_training_list')}}" class="inline-block group text-center border border-blue-500 rounded-md h-[34px] sm:h-[40px]  p-2 px-5 sm:px-[33px] text-white bg-blue-500 text-sm sm:text-base leading-tight hover:bg-blue-400 hover:border-blue-400 transition ease-in-out duration-200">                       
                                    Exit
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>   
        </div>
    </div>
</div>