@if (items().length === 0) {
  <p class="text-color-secondary text-sm m-0">Aún no hay documentos procesados.</p>
} @else {
  <p-table [value]="items()" responsiveLayout="scroll" styleClass="p-datatable-sm">
    <ng-template pTemplate="header">
      <tr>
        <th>Archivo</th>
        <th>Estado</th>
        <th>Fecha</th>
      </tr>
    </ng-template>
    <ng-template pTemplate="body" let-row>
      <tr>
        <td>{{ row.filename }}</td>
        <td>
          @switch (row.status?.toLowerCase()) {
            @case ('processing') {
              <p-badge value="Procesando" severity="info" />
            }
            @case ('completed') {
              <p-badge value="Completado" severity="success" />
            }
            @case ('failed') {
              <p-badge value="Fallido" severity="danger" />
            }
            @case ('pending') {
              <p-badge value="Pendiente" severity="warn" />
            }
            @default {
              <p-badge [value]="row.status || 'Desconocido'" severity="secondary" />
            }
          }
        </td>
        <td>{{ row.created_at | date: 'short' }}</td>
      </tr>
    </ng-template>
  </p-table>
}