<div
  class="text-surface-700 relative flex flex-col gap-4 overflow-hidden rounded-2xl border px-4 py-4 pe-2"
  [style.backgroundColor]="preparedInfo().bgColor"
  [style.borderColor]="preparedInfo().borderColor"
  (click)="showDetails()">
  <div class="absolute top-0 right-0 h-full w-1" [style.backgroundColor]="preparedInfo().borderColor"></div>
  <div class="text-surface-700 flex items-center justify-between gap-2">
    <div class="text-surface-700 flex items-center gap-2">
      <span
        class="text-surface-700 flex h-8 w-8 items-center justify-center rounded-full border"
        [style.borderColor]="preparedInfo().borderColor"
        [style.backgroundColor]="preparedInfo().borderColor + '33'">
        <i class="text-sm" [ngClass]="'pi pi-' + preparedInfo().icon" [style.color]="preparedInfo().borderColor"></i>
      </span>
      <span class="text-surface-700 text-sm font-semibold">{{ preparedInfo().title }}</span>
    </div>
    <span
      class="text-surface-700 rounded-full border px-2 py-1 text-xs font-bold"
      [style.borderColor]="preparedInfo().borderColor">
      {{ count || 0 }} عدد
    </span>
  </div>
  <div class="text-surface-700 grid grid-cols-1 gap-2">
    <div class="flex items-center gap-2">
      <div class="text-surface-700/80 text-xs">مبلغ کل:</div>
      <div class="text-surface-700 mt-1 text-sm font-bold">{{ formattedTotalAmount }}</div>
    </div>
    <div class="flex items-center gap-2">
      <div class="text-surface-700/80 text-xs">مالیات کل:</div>
      <div class="text-surface-700 mt-1 text-sm font-bold">{{ formattedTotalTax }}</div>
    </div>
  </div>
</div>
