<script setup lang="ts">
const { isShowCheckLauncher, isShowDownloadLauncher, downloadLauncher } =
  useCheckGameStart()
const { tm } = useI18n()
</script>

<template>
  <BlocksModalLayer
    v-model:is-open="isShowCheckLauncher"
    :is-show-dimmed="true"
    :is-outside-close="false"
    :modal-name="'launcher'"
    area-class="max-w-[480px] pt-[56px] px-[24px] pb-[24px] rounded-[8px]"
    close-class="absolute top-[16px] right-[24px]"
  >
    <span class="ico-loading"></span>
    <p class="text-check">{{ tm('Alert_Client_Running') }}</p>
    <Transition name="fade">
      <div v-if="isShowDownloadLauncher" class="client-area">
        <p
          v-dompurify-html="tm('Alert_Client_Not_Running')"
          class="text-info"
        ></p>

        <AtomsButtonModal class="max-w-[300px]" @click="downloadLauncher">
          {{ tm('Text_Download') }}
        </AtomsButtonModal>
        <p
          v-dompurify-html="tm('Alert_Client_Run_Normally')"
          class="text-tip"
        ></p>
      </div>
    </Transition>
  </BlocksModalLayer>
</template>

<style scoped>
.ico-loading {
  @apply block mx-auto mb-4 w-[80px] h-[80px] bg-[url('/images/common/stove_loading_light.png')] bg-contain bg-center bg-no-repeat;
}
.text-check {
  @apply mb-6 text-center text-[20px] font-bold leading-[30px] tracking-[-0.6px] text-[#333333];
}

.client-area {
  @apply pt-4 border-t border-[rgba(0,0,0,0.08)] text-center;
}
.text-info {
  @apply mb-3 text-[14px] font-medium leading-[24px] tracking-[-0.42px] text-[#333333];
}
.text-tip {
  @apply mt-4 text-[14px] leading-[20px] tracking-[-0.42px] text-[#999999];
}
</style>
