<template>
  <v-dialog v-model="showDeletePostPopup" class="ma-0 pa-0" :width="$vuetify.display.smAndUp ? '688px' : '95%'" scroll-strategy="none">
    <div class="dialog-content text-center">
      <h2 class="dialog-title">{{ $t("delete_post.confirm_text") }}</h2>
      <div class="dialog-text">{{ $t("delete_post.confirm_text_desc") }}</div>
      <v-container fluid>
        <v-row cols="12">
          <v-col cols="6">
            <v-btn variant="flat" block class="text-button" @click.stop="showDeletePostPopup = false">{{
              $t("menu.cancel") }}</v-btn>
          </v-col>
          <v-col cols="6" align="center">
            <v-btn color="red" variant="flat" block class="filled-button" @click="$emit('deletePost')">{{ $t("menu.delete")
            }}</v-btn>
          </v-col>
        </v-row>
      </v-container>
    </div>
  </v-dialog>
</template>
<script setup>
const showDeletePostPopup = defineModel();
</script>
