<template>
  <v-dialog :modelValue="showLogoutPopup" class="ma-0 pa-0" :width="$vuetify.display.smAndUp ? '688px' : '95%'"
    @click:outside="$emit('onOutsideLogoutPopupClicked')">
    <div class="dialog-content text-center">
      <h2 class="dialog-title">{{ $t("logout.confirm_text") }}</h2>
      <v-container fluid>
        <v-row cols="12">
          <v-col cols="6">
            <v-btn variant="flat" block class="text-button" @click.stop="$emit('onCancelLogoutClicked')">{{
              $t("menu.cancel") }}</v-btn>
          </v-col>
          <v-col cols="6" align="center">
            <v-btn color="red" variant="flat" block class="filled-button" @click.stop="logout">{{ $t("menu.logout")
            }}</v-btn>
          </v-col>
        </v-row>
      </v-container>
    </div>
  </v-dialog>
</template>
<script>
import profileInfoMixin from "./profileInfoMixin";

export default {
  name: "LogoutRoomDialog",
  mixins: [profileInfoMixin],
  props: {
    showLogoutPopup: {
      type: Boolean,
      default: false,
    },
  },
};
</script>
