<template>
  <v-container class="py-0 my-0">
    <v-dialog
      v-model="confirmationDialog"
      origin="left top"
      hide-overlay
      persistent
      max-width="1100px"
      flat
    >
      <v-card tile>
        <v-card-title>
          <v-row no-gutters>
            <v-col cols="11">
              <p
                class="body mt-7 mb-0 fontcolor-black-light"
              >{{confirmationDetails.confirmationMessage}}</p>
            </v-col>
            <v-col cols="1" class="text-right">
              <router-link to class="text-decoration-none black--text fontcolor-black-light">
                <div @click="onAction(false)">X</div>
              </router-link>
            </v-col>
          </v-row>
        </v-card-title>
        <v-card-actions class="px-4">
          <v-row no-gutters>
            <v-col cols="12">
              <v-hover v-slot:default="{ hover }">
                <v-btn
                  class="text-uppercase body-font ma-2 button-background"
                  tile
                  large
                  depressed
                  :outlined="hover"
                  :color="hover?'white':'primary'"
                  :class="hover?'primary--text':'white--text'"
                  @click="onAction(false)"
                >CANCEL</v-btn>
              </v-hover>
              <v-hover v-slot:default="{ hover }">
                <v-btn
                  class="text-uppercase body-font ma-2 button-background"
                  :outlined="hover"
                  :color="hover?'white':'error'"
                  :class="hover?'error--text':'white--text'"
                  tile
                  large
                  depressed
                  @click="onAction(true)"
                >OK</v-btn>
              </v-hover>
            </v-col>
          </v-row>
        </v-card-actions>
      </v-card>
    </v-dialog>
  </v-container>
</template>
<script>
export default {
  name: "ConfirmationDialog",
  props: ["confirmationDialog", "confirmationDetails"],
  data: () => ({
    //confirmationDialog:false
  }),
  components: {},
  computed: {},
  methods: {
    onAction: function(action) {
      this.$emit("actionRemove", { submit: action });
    }
  },
  created() {}
};
</script>
