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

      <h2 class="text-clr-grey-600">
        Payment has expired
      </h2>

      <h4 class="text-clr-grey-400 mt-16">
        Your invoice has expired. If you want to make a payment, <br> please return to the site and create the invoice again.
      </h4>
    </div>

    <InvoiceFormSeparator />

    <InvoiceFormAmount />

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

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

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

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

  &--expired {
    #{$self}__back-to-store {
      width: 100%;
      margin-top: 32px;
    }
  }
}
</style>
