<template>
  <q-dialog
    ref="dialogRef"
    @hide="onDialogHide"
  >
    <q-card class="dialog-card bg-white">

      <q-card-section class="text-center q-pt-xl">

        <q-icon
          name="check_circle"
          color="positive"
          size="64px"
        />

        <div class="text-h6 q-mt-md">
            {{ $t("provider.dashboard.proposal_accepted.title") }}
        </div>

        <div class="q-mt-sm text-grey-7">
            {{ $t("provider.dashboard.proposal_accepted.description") }}
        </div>

      </q-card-section>

      <q-card-actions class="justify-center q-pb-lg">
        <q-btn
          color="secondary"
          rounded
          unelevated
          no-caps
          :label="$t('provider.dashboard.proposal_accepted.button_ok')"
          @click="onDialogOK"
        />
      </q-card-actions>

    </q-card>
  </q-dialog>
</template>

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

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

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

<style scoped>
.dialog-card {
  width: 320px;
  max-width: 92vw;
  border-radius: 20px;
}
</style>
