<template>
  <div :class="cn.m('success')">
    <img
      src="/partially.svg"
      alt="Success"
      class="mb-16"
      data-status-illustration
    >

    <h2 class="text-clr-green-500">
      Invoice has been over paid
    </h2>

    <div class="mt-16">
      <UiCoin :code="invoice.currencyCode" />

      <MoneyAmount
        :class="cn.e('amount')"
        :value="invoice.amount"
        :currency="invoice.currencyCode"
      />
    </div>

    <InvoiceFormDetails :class="cn.e('details')" accordion />

    <UiButton
      :class="cn.e('back-to-store')"
      size="large"
      :href="invoice.redirectUrl"
    >
      Back to store
    </UiButton>

    <UiButton
      :class="cn.e('explorer')"
      type="link"
      color="secondary"
      :href="explorerLink"
      target="_blank"
    >
      Просмотреть в обозревателе блоков
    </UiButton>

    <InvoiceFormSeparator />
  </div>
</template>

<script setup>
const { invoice } = inject('public-invoice')

const cn = useClassname('invoice-form')

const explorerLink = computed(() => {
  return `https://nile.tronscan.org/#/address/${invoice.value.walletAddress}`
})
</script>

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

  &--success {
    #{$self}__amount {
      @include h2('money-amount-value', true);

      margin-left: 8px;
    }

    #{$self}__transaction-id {
      text-align: center;
      color: $clr-grey-400;
      margin-top: 16px;

      strong {
        font-weight: 600;
        color: $clr-grey-500;
      }
    }

    #{$self}__details {
      margin-top: 32px;
    }

    #{$self}__back-to-store {
      width: 100%;
      margin-top: 32px;
    }

    #{$self}__explorer {
      width: 100%;
      margin-top: 24px;
    }
  }
}
</style>
