<template>
  <div class="incomplete-banner q-ma-md" @click="openEdit">
    <div class="row items-center no-wrap q-pa-sm q-px-md">
      <q-icon name="mdi-alert-outline" size="26px" color="primary" class="q-mr-md" />
      <div class="col banner-text font12 fontmedium text-primary">
        {{ $t('dashboard_client.registration_incomplete_title') }}
      </div>
      <q-btn
        unelevated
        no-caps
        color="primary"
        text-color="white"
        :label="$t('dashboard_client.registration_incomplete_cta')"
        class="q-ml-sm resolver-btn font9"
      />
    </div>
  </div>
</template>

<script setup>
import { useQuasar } from 'quasar';
import ProfileEditDialog from 'src/pages/profile/ProfileEditDialog.vue';
import { userStore } from 'src/stores/user';

const $q = useQuasar();
const store = userStore();

const openEdit = () => {
  $q.dialog({
    component: ProfileEditDialog,
    componentProps: { userData: store.user },
  }).onOk((updatedUser) => {
    store.setUser(updatedUser);
  });
};
</script>

<style lang="scss" scoped>
.incomplete-banner {
  border-radius: 12px;
  background: #ede9fe;
  cursor: pointer;
}

.banner-text {
  line-height: 1.3;
}

.resolver-btn {
  border-radius: 20px;
  padding: 0px 4px;
  white-space: nowrap;
  flex-shrink: 0;
}
</style>
