<script setup lang="ts">
const props = defineProps<{ showModal: boolean }>();
const endModal = useTemplateRef('endModal');

const emit = defineEmits(['hideEndModal', 'endExam']);

watchEffect(() => {
  if (props.showModal && endModal.value?.open == false) {
    endModal.value?.showModal();
    emit('hideEndModal');
  }
});
</script>

<template>
  <dialog
    ref="endModal"
    class="flex justify-center items-center backdrop-blur-sm modal"
  >
    <div class="flex flex-col p-3 bg-base rounded-md gap-3 modal-box min-w-fit">
      <h1 class="text-[1.5rem]">{{ $t('examEnd') }}</h1>
      <div class="*:inline">{{ $t('doYouReallyWantToEndExam') }}</div>
      <div class="flex flex-row gap-2 justify-around">
        <div class="btn btn-lg btn-success" @click="emit('endExam')">
          {{ $t('yes') }}
        </div>
        <div class="btn btn-lg btn-error" @click="endModal?.close()">
          {{ $t('no') }}
        </div>
      </div>
    </div>
  </dialog>
</template>
