@if (loading()) {
  <shared-page-loading />
} @else if (pos()) {
  <div class="w-full h-[calc(100dvh-5.5rem)] overflow-hidden">
    <div
      [class]="`w-full h-full flex max-md:flex-col gap-4 pb-4 pt-0 overflow-hidden ${inOrderGoods().length > 0 ? 'pb-18!' : ''}`"
    >
      <div class="grow h-full overflow-auto">
        <pos-goods class="block h-full" />
      </div>
      <div class="md:shrink-0 md:h-full md:block hidden p-4 overflow-auto">
        <pos-order-section />
      </div>
    </div>

    @if (inOrderGoods().length > 0) {
      <button
        type="button"
        pButton
        class="sticky! bottom-0 inset-x-0 w-full right-0 z-1200 border-t border-surface-border bg-surface-0 px-4 py-3 shadow-[0_-4px_16px_rgba(0,0,0,0.08)] md:hidden rounded-b-none!"
        [style.paddingBottom]="'calc(0.75rem + env(safe-area-inset-bottom))'"
        (click)="openInvoiceBottomSheet()"
      >
        <div class="mx-auto flex w-full max-w-3xl items-center justify-between">
          <div class="flex flex-col items-start gap-1">
            <span class="text-base">مبلغ کل فاکتور</span>
            <span class="text-xl font-semibold" [appPriceMask]="priceInfo().totalAmount"></span>
          </div>
          <div class="flex items-center gap-2">
            <span class="text-base font-medium">مشاهده فاکتور</span>
            <i class="pi pi-chevron-up"></i>
          </div>
        </div>
      </button>
    }

    <shared-dialog
      [(visible)]="showInvoiceBottomSheet"
      position="bottom"
      [modal]="true"
      [closable]="true"
      header="فاکتور"
    >
      <pos-order-section (onAddMoreGoods)="closeInvoiceBottomSheet()" (onSuccess)="closeInvoiceBottomSheet()" />
    </shared-dialog>
  </div>
}