<template>
  <q-dialog ref="dialogRef" persistent @hide="onDialogHide">
    <q-card class="missing-bank-dialog bg-white text-text">
      <q-card-section class="q-pb-sm">
        <div class="font18 fontbold q-mb-sm">{{ $t('profile.bank_data.missing_alert_title') }}</div>
        <div class="font12 text-grey-7 missing-bank-dialog__message">
          {{ $t('profile.bank_data.missing_alert_message') }}
        </div>
      </q-card-section>

      <q-card-actions align="right" class="q-px-md q-pb-md q-pt-sm">
        <q-btn
          flat
          no-caps
          rounded
          color="grey-7"
          :label="$t('profile.bank_data.missing_alert_later')"
          @click="onDialogCancel"
        />
        <q-btn
          unelevated
          no-caps
          rounded
          color="primary"
          :label="$t('profile.bank_data.missing_alert_action')"
          @click="onDialogOK"
        />
      </q-card-actions>
    </q-card>
  </q-dialog>
</template>

<script setup>
import { useDialogPluginComponent } from 'quasar';

defineEmits([...useDialogPluginComponent.emits]);

const { dialogRef, onDialogHide, onDialogOK, onDialogCancel } = useDialogPluginComponent();
</script>

<style scoped>
.missing-bank-dialog {
  width: min(92vw, 420px);
  border-radius: 8px;
}

.missing-bank-dialog__message {
  line-height: 1.5;
}
</style>
