<p-dialog [visible]="true" [closable]="true" (onHide)="cancelled.emit()" [header]="'POS.HELD_ORDERS' | translate" [style]="{width: '520px'}" [modal]="true">
  @if (loading()) {
    <div class="loading-state">
      <i class="pi pi-spinner pi-spin"></i>
      <span>{{ 'COMMON.LOADING' | translate }}</span>
    </div>
  } @else if (orders().length === 0) {
    <div class="empty-state">
      <i class="pi pi-inbox"></i>
      <span>{{ 'POS.NO_HELD_ORDERS' | translate }}</span>
    </div>
  } @else {
    <div class="orders-list">
      @for (order of orders(); track order.id) {
        <div class="order-card">
          <div class="order-info">
            <div class="order-header">
              <span class="customer-name">{{ order.customer_name || ('POS.WALK_IN' | translate) }}</span>
              <span class="order-time">{{ order.created_at | date:'shortTime' }}</span>
            </div>
            <div class="order-details">
              <span class="item-count">{{ order.items.length }} {{ 'POS.ITEMS' | translate }}</span>
              <span class="order-total">{{ order.total | number:'1.2-2' }}</span>
            </div>
            @if (order.note) {
              <div class="order-note">{{ order.note }}</div>
            }
          </div>
          <div class="order-actions">
            <button pButton icon="pi pi-replay" severity="success" [text]="true" [pTooltip]="'POS.RESTORE' | translate" (click)="restore(order)"></button>
            <button pButton icon="pi pi-trash" severity="danger" [text]="true" [pTooltip]="'POS.DELETE' | translate" (click)="delete(order)"></button>
          </div>
        </div>
      }
    </div>
  }
</p-dialog>
