<p-toast />
<div class="reorder-alerts-page">
  <app-page-header title="INVENTORY.REORDER_TITLE" subtitle="INVENTORY.REORDER_SUBTITLE" (refresh)="loadData()" />

  <ng-template #bodyTpl let-item>
    <tr>
      <td class="mono">{{ item.product_code }}</td>
      <td>{{ item.product_name }}</td>
      <td>{{ item.warehouse_name }}</td>
      <td class="text-end" [class.text-danger]="(+item.current_quantity) < (+item.reorder_point)">{{ +item.current_quantity | number:'1.2-2' }}</td>
      <td class="text-end">{{ +item.min_stock_level | number:'1.2-2' }}</td>
      <td class="text-end">{{ +item.reorder_point | number:'1.2-2' }}</td>
      <td class="text-end">{{ +item.max_stock_level | number:'1.2-2' }}</td>
      <td class="text-end font-bold">{{ +item.suggested_order_quantity | number:'1.2-2' }}</td>
    </tr>
  </ng-template>

  <app-data-table [data]="items()" [loading]="loading()" [error]="null" (retry)="loadData()"
    [columns]="columns" [bodyTpl]="bodyTpl" />
</div>
