<div class="p-3 text-white">
  <!-- Tabla1 -->
  <div class="font-bold tituloTabla my-2">Cronogramas aprobados:</div>
  <p-table
    id="verde"
    [value]="products"
    stripedRows
    showGridlines
    [paginator]="true"
    [rows]="5"
    [showCurrentPageReport]="true"
    currentPageReportTemplate="Mostrando del {first} al {last} de un total de {totalRecords} registros"
    [rowsPerPageOptions]="[5, 10, 20]"
  >
    <ng-template #header>
      <tr>
        <th id="col-empresa-verde" class="bg-green-400 text-white font-bold">Empresa</th>
        <th id="col-codigo-cronograma-verde" class="bg-green-400 text-white font-bold">C&oacute;digo de cronograma</th>
        <th id="col-nombre-sistema-verde" class="bg-green-400 text-white font-bold">Nombre sistema</th>
        <th id="col-tipo-verde" class="bg-green-400 text-white font-bold">Tipo</th>
       </tr>
    </ng-template>
    <ng-template #body let-product>
      <tr>
        <td>{{ product.empresa }}</td>
        <td>{{ product.codigoCronograma }}</td>
        <td>{{ product.codigoCronogramaAjuste }}</td>
        <td>{{ product.tipoCarga }}</td>
        <td style="background-color: #f8f9fa; border: none; width: 50px">
          <button
            pTooltip="Firma digital"
            tooltipPosition="left"
            (click)="firma(product)"
            showDelay="300"
            style="background: transparent; border: none; cursor: pointer"
          >
            <i class="pi pi-pen-to-square" style="font-size: 24px"></i>
          </button>
        </td>
      </tr>
    </ng-template>
  </p-table>

  <div class="font-bold tituloTabla my-2">Cronogramas rechazados:</div>
  <p-table
    id="ploma"
    [value]="products"
    stripedRows
    showGridlines
    [paginator]="true"
    [rows]="5"
    [showCurrentPageReport]="true"
    currentPageReportTemplate="Mostrando del {first} al {last} de un total de {totalRecords} registros"
    [rowsPerPageOptions]="[5, 10, 20]"
  >
    <ng-template #header>
      <tr>
        <th id="col-empresa-ploma" class="tablaPloma text-white font-bold">Empresa</th>
        <th id="col-codigo-cronograma-ploma" class="tablaPloma text-white font-bold">C&oacute;digo de cronograma</th>
        <th id="col-nombre-sistema-ploma" class="tablaPloma text-white font-bold">Nombre sistema</th>
        <th id="col-tipo-ploma" class="tablaPloma text-white font-bold">Tipo</th>
      </tr>
    </ng-template>
    <ng-template #body let-product>
      <tr>
        <td>{{ product.empresa }}</td>
        <td>{{ product.codigoCronograma }}</td>
        <td>{{ product.codigoCronogramaAjuste }}</td>
        <td>{{ product.tipoCarga }}</td>
        <td style="background-color: #f8f9fa; border: none; width: 50px">
          <button
            pTooltip="Notificar a unidad de información o empresa"
            tooltipPosition="left"
            showDelay="300"
            style="background: transparent; border: none; cursor: pointer"
          >
            <i class="pi pi-arrow-circle-right" style="font-size: 24px"></i>
          </button>
        </td>
      </tr>
    </ng-template>
  </p-table>
</div>
