<template>
  <v-card class="pa-5">
    <v-card-text class="text-center pt-10">
      <v-icon size="75" color="info">mdi-alert-outline</v-icon>
    </v-card-text>
    <v-card-title class="text-h5 justify-center" v-if="hasTitleSlot">
      <slot name="title"></slot>
    </v-card-title>
    <v-card-text class="text-center pb-10 text--primary body-2">
      <slot name="text"></slot>
    </v-card-text>
    <v-card-actions>
      <v-btn
        text
        @click="$emit('on-cancel')"
      >
        Cancel
      </v-btn>
      <v-spacer></v-spacer>
      <v-btn
        color="primary"
        depressed
        min-width="150"
        @click="$emit('on-continue')"
        :loading="loading"
      >
        Continue
      </v-btn>
    </v-card-actions>
  </v-card>
</template>

<script>
export default {
  name: "DialogAlert",
  props: ['loading'],
  computed: {
    hasTitleSlot() {
      return !!this.$slots.title
    }
  }
}
</script>

<style scoped>

</style>