<template>
  <v-container>
    <v-row class="justify-space-around">
      <v-col cols="12" md="6">
        <v-dialog
          transition="dialog-bottom-transition"
          width="auto"
        >
          <template v-slot:activator="{ props: activatorProps }">
            <v-btn
              v-bind="activatorProps"
              text="Transition from Bottom"
              block
            ></v-btn>
          </template>

          <template v-slot:default="{ isActive }">
            <v-card>
              <v-toolbar title="Opening from the Bottom"></v-toolbar>

              <v-card-text class="text-display-large pa-12">
                Hello world!
              </v-card-text>

              <v-card-actions class="justify-end">
                <v-btn
                  text="Close"
                  @click="isActive.value = false"
                ></v-btn>
              </v-card-actions>
            </v-card>
          </template>
        </v-dialog>
      </v-col>

      <v-col cols="12" md="6">
        <v-dialog
          transition="dialog-top-transition"
          width="auto"
        >
          <template v-slot:activator="{ props: activatorProps }">
            <v-btn
              v-bind="activatorProps"
              text="Transition from Top"
              block
            ></v-btn>
          </template>
          <template v-slot:default="{ isActive }">
            <v-card>
              <v-toolbar title="Opening from the Top"></v-toolbar>

              <v-card-text class="text-display-large pa-12">
                Hello world!
              </v-card-text>

              <v-card-actions class="justify-end">
                <v-btn
                  text="Close"
                  @click="isActive.value = false"
                ></v-btn>
              </v-card-actions>
            </v-card>
          </template>
        </v-dialog>
      </v-col>
    </v-row>
  </v-container>
</template>
