<template>
  <div :class="cn.m('waiting-requisites')">
    <div class="p-16">
      <img
        src="/pending.svg"
        alt="Waiting requisites"
        class="mb-16"
        data-status-illustration
      >

      <h2 class="text-clr-grey-600">
        Waiting
      </h2>

      <h4 class="text-clr-grey-400 mt-16">
        It may take several minutes to receive payment details
      </h4>
    </div>

    <InvoiceFormSeparator />

    <InvoiceFormAmount />

    <UiButton
      :class="cn.e('action')"
      size="large"
      disabled
    >
      I have paid
    </UiButton>
  </div>
</template>

<script setup>
const cn = useClassname('invoice-form')
</script>

<style lang="scss">
.invoice-form {
  $self: &;

  &--waiting-requisites {
    #{$self}__action {
      width: 100%;
      margin-top: 32px;
    }
  }
}
</style>
