<template>
  <div class="q-mx-md q-mb-md">
    <div class="font16 fontbold gradient-diarista q-mb-sm section-title">
      {{ $t("provider.dashboard.pending_approval.title") }}
    </div>

    <div class="pending-alert column items-center text-center">
      <q-icon
        class="pending-alert__icon q-mb-sm"
        name="mdi-alert-outline"
        size="28px"
      />

      <div class="pending-alert__text font14 fontbold q-mb-md">
        {{ $t("provider.dashboard.pending_approval.analyzing") }}
      </div>

      <div class="pending-alert__text font14 fontbold q-mb-md">
        {{ $t("provider.dashboard.pending_approval.release") }}
      </div>

      <div class="pending-alert__text font14 fontbold q-mb-md">
        {{ $t("provider.dashboard.pending_approval.email_notice") }}
      </div>

      <div class="pending-alert__text font14 fontregular">
        {{ $t("provider.dashboard.pending_approval.come_back_later") }}
      </div>
    </div>
  </div>
</template>

<script setup>
defineOptions({
  name: "DashboardPendingApproval",
});
</script>

<style lang="scss" scoped>
.pending-alert {
  background: #e3efff;
  border-radius: 8px;
  padding: 24px 20px;
}

.pending-alert__icon {
  color: #6554d9;
}

.pending-alert__text {
  color: #6554d9;
  line-height: 1.3;
}
</style>
