<!-- Попап подтверждения необратимого действия: текст в слоте, отмена + красная кнопка действия -->
<template>
  <transition mode="out-in">
    <LazyUiPopup
      v-if="modelValue"
      :model-value="modelValue"
      :transparent-backdrop="transparentBackdrop"
      class="ui-confirm"
      sheet
      @update:model-value="emit('update:modelValue', $event)"
    >
      <template #title>{{ title }}</template>

      <div class="ui-confirm__body">
        <slot/>
      </div>

      <template #footer>
        <div class="ui-confirm__buttons">
          <UiBtn
            :disabled="loading"
            wide
            size="l"
            theme="secondary"
            @click="emit('update:modelValue', false)"
          >{{ $t('cancel') }}
          </UiBtn>
          <UiBtn
            :disabled="loading"
            wide
            size="l"
            theme="warning"
            @click="emit('confirm')"
          >{{ confirmText }}
          </UiBtn>
        </div>
      </template>
    </LazyUiPopup>
  </transition>
</template>

<script setup lang="ts">
defineProps<{
  modelValue: boolean
  title: string
  confirmText: string
  loading?: boolean
  transparentBackdrop?: boolean
}>();

const emit = defineEmits<{
  (eventName: 'update:modelValue', value: boolean): void
  (eventName: 'confirm'): void
}>();
</script>

<style lang="scss">
/* Паддинг на своей обёртке, а не на .ui-popup__content: у sheet-варианта он обнулён
   селектором из четырёх классов, перебивать который дороже, чем задать отступ самому. */
.ui-confirm .ui-popup__content {
  padding: 0;
}

.ui-confirm__body {
  padding: 24px;
}

.ui-confirm__buttons {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
</style>
