{{-- Failed Assessment Modal --}}
     <div 
     x-data="{faildQuizModal : @entangle('faildQuizModal').defer}" 
     x-init="$watch('faildQuizModal', value => modalShow = faildQuizModal)" 
     x-show="faildQuizModal"
     style="display:none"
     class="modal fixed top-0 left-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 class="w-[408px]">
                         <div class="flex justify-center relative">
                             <div class=" sm:w-[200px] sm:h-[200px]">
                                 <img src="{{ Vite::asset('resources/images/dashboard/failed-assessment-background.svg')}}" class="object-cover h-full w-full object-center">
                                 <div class="font-bold text-center text-white absolute left-[50%] top-[50%] -translate-x-1/2 -translate-y-1/2">
                                     <p class="sm::mb-[11px] text-[20px] sm:text-[40px] sm:leading-[46px]">@if($assessment_answered)
                                        {{$assessment_answered->points}} @endif
                                        /100
                                    </p>
                                     <p class="text-lg sm:text-[20px]">Test Score</p>
                                 </div>
                             </div>
                         </div>

                         <p class="text-neutral-800 font-bold text-lg md:text-[20px] my-5 text-center">You failed the assessment!</p>
                         <p class="text-gray-500 text-center">You have successfully completed the course, but in order for the course to show on your profile you will have to pass the assessment.</p>
                         <div class="flex flex-col md:flex-row items-center justify-center mx-1 md:-mx-[6px] mb-1 sm:mb-0 mt-6">
                             <div class="w-full md:w-auto px-1 mb-1 md:mb-0 md:px-[6px]">
                                 <a href="{{route('candidate.profile')}}" class="w-full md:w-auto 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">                       
                                     Profile
                                 </a>
                             </div>
                             <div class="w-full md:w-auto px-1 md:px-[6px]">
                                 <a href="#"  x-on:click="Livewire.emitTo('dashboard.candidate.teacher-training.assessment.view', 'refreshAssessment'); faildQuizModal=false" class="w-full md:w-auto 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">                       
                                     Retake Assessment
                                 </a>
                             </div>
                         </div>
                     </div>
                 </div>
             </div>   
         </div>
     </div>
 </div>