<div class="w-svw h-svh bg-surface-ground flex flex-col gap-4 p-4">
  <div class="w-full flex items-center gap-4 shrink-0 justify-between">
    <div class="flex gap-2 items-center">
      <div class="w-10 h-10">
        <img [src]="placeholderLogo" alt="Logo" class="w-full h-full object-cover rounded-md bg-surface-card" />
      </div>
      <span class="text-lg font-bold">{{ info()?.name }} - شعبه {{ info()?.inventory?.name }}</span>
    </div>
    <div class="flex gap-2 items-center">
      <div class="bg-surface-card py-1 px-3 rounded-md shadow-sm">
        <span [jalaliDate]="now" jalaliFormat="dddd YYYY/MM/DD" class="text-base"></span>
      </div>
      <div class="bg-surface-card py-1 px-3 rounded-md shadow-sm">
        <span class="text-base"> فروشنده شماره‌ی ۱ </span>
      </div>
    </div>
  </div>
  <div class="flex gap-4 grow overflow-hidden">
    <div class="grow h-full overflow-auto">
      <pos-products />
    </div>
    <div class="shrink-0 h-full">
      <pos-order-card />
    </div>
  </div>
</div>
