<div class="p-3 text-white">
<!-- Tabla1 -->
<div class="font-bold tituloTabla my-2">Cronogramas solicitados y pendientes de carga:</div>
  <p-table  id="azul"
    [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-sinar" class="tablaAzul text-white font-bold">Empresa</th>
                <th id="col-codigo-cronograma-sinar-2" class="tablaAzul text-white font-bold">C&oacute;digo de cronograma SINAR</th>
                <th id="col-obras-anio" class="tablaAzul text-white font-bold">Contiene obras del a&ntilde;o</th>
                <th id="col-num-oficio" class="tablaAzul text-white font-bold">N° Oficio que aprueba</th>
                <th id="col-tipo-carga-sinar" class="tablaAzul text-white font-bold">Tipo de carga</th>
                <th id="col-fecha-solicitud-sinar" class="tablaAzul text-white font-bold">Fecha de solicitud</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>{{ product.dato5 }}</td>
                <td>{{ product.dato6 }}</td>
            </tr>
        </ng-template>
  </p-table>
<!-- Tabla2 -->
<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-aprobacion" class="bg-green-400 text-white font-bold">Empresa</th>
                <th id="col-codigo-cronograma-verde-aprobacion" class="bg-green-400 text-white font-bold">C&oacute;digo cronograma</th>
                <th id="col-nombre-sistema-verde-aprobacion" class="bg-green-400 text-white font-bold">Nombre sistema</th>
                <th id="col-tipo-verde-aprobacion" class="bg-green-400 text-white font-bold">Tipo</th>
                <th id="col-fecha-aprobacion" class="bg-green-400 text-white font-bold">Fecha aprobaci&oacute;n</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>{{ product.dato5 }}</td>
            </tr>
        </ng-template>
</p-table>
<!-- Tabla3 -->
<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-rechazo" class="tablaPloma text-white font-bold">Empresa</th>
                <th id="col-codigo-cronograma-ploma-rechazo" class="tablaPloma text-white font-bold">C&oacute;digo de cronograma</th>
                <th id="col-nombre-sistema-ploma-rechazo" class="tablaPloma text-white font-bold">Nombre sistema</th>
                <th id="col-tipo-ploma-rechazo" class="tablaPloma text-white font-bold">Tipo</th>
                <th id="col-fecha-rechazo" class="tablaPloma text-white font-bold">Fecha rechazo</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>{{ product.dato5 }}</td>
            </tr>
        </ng-template>
</p-table>
</div>
