<template>
  <v-dialog
    v-model="dialog"
    @click:outside="dialog = false"
    max-width="600px"
    overlay-opacity="0"
  >
    <template v-slot:activator="{ on, attrs }">
      <v-btn color="accent"
             class="ml-1"
             :style="styles"
             x-small
             icon
             v-bind="attrs"
             v-on="on"
      >
        <v-icon>mdi-information-outline</v-icon>
      </v-btn>
    </template>
    <v-card class="pa-5">
      <v-card-text class="text-center pt-10 pb-0">
        <v-icon size="75" color="accent">mdi-information-outline</v-icon>
      </v-card-text>
      <v-card-title class="text-h4 justify-center">
        <slot name="title"></slot>
      </v-card-title>
      <v-card-text class="text-center pb-10 text--primary">
        <slot name="text"></slot>
      </v-card-text>
      <v-card-actions>
        <v-spacer></v-spacer>
        <v-btn
          color="primary"
          depressed
          min-width="150"
          @click="dialog = false"
        >
          Ok
        </v-btn>
        <v-spacer></v-spacer>
      </v-card-actions>
    </v-card>
  </v-dialog>
</template>

<script>
export default {
  name: "DialogInfo",
  props: ['styles'],
  data: () => ({
    dialog: false,
  }),
}
</script>

<style scoped>

</style>