<div class="p-3 text-white">
  <div
    class="flex align-content-start flex-wrap gap-2 border-round border-blue-400 my-2 lg:px-0 py-3 my-1"
  >
    <div class="col-12 md:col-3 lg:col-2 tablaAzul border-round">
      <div class="border-round font-bold">
        <div class="h-4rem">Filtro Empresa</div>
        <p-select  appendTo="body"
          [options]="empresas"
          [(ngModel)]="selectedCity"
          optionLabel="name"
          placeholder="Seleccione..."
          class="w-full md:w-56"
        />
      </div>
    </div>
    <div class="col-12 md:col-3 lg:col-2 tablaAzul border-round">
      <div class="border-round font-bold">
        <div class="h-4rem">Filtro C&oacute;digo Cronograma</div>
        <p-select  appendTo="body"
          [options]="empresas"
          [(ngModel)]="selectedCity"
          optionLabel="name"
          placeholder="Seleccione..."
          class="w-full md:w-56"
        />
      </div>
    </div>
  </div>
  <!-- Tabla1 -->
  <div class="flex justify-content-end align-items-center my-2 py-2">
    <!-- <div class="font-bold tituloTabla">T&iacute;tulo de la tabla:</div> -->
    <p-button
      icon="pi pi-file-excel"
      (onClick)="exportExcelWithStyles(dt)"
      styleClass="p-button-success"
      pTooltip="Descargar planilla Excel"
      tooltipPosition="top"
      label="Exportar"
      [tooltipOptions]="{showDelay: 100, appendTo: 'body'}"
    >
    </p-button>
  </div>
  <p-table
    id="azul"
    #dt
    [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]"
    styleClass="p-datatable-sm"
  >
    <ng-template pTemplate="header">
      <tr>
        <th id="col-empresa" class="tablaAzul font-bold text-white">Empresa</th>
        <th id="col-codigo-cronograma" class="tablaAzul font-bold text-white">C&oacute;digo de cronograma</th>
        <th id="col-etapa-servicio" class="tablaAzul font-bold text-white">Etapa del Servicio</th>
        <th id="col-nombre-sistema" class="tablaAzul font-bold text-white">Nombre sistema</th>
        <th id="col-tipo-inversion" class="tablaAzul font-bold text-white">Tipo de inversi&oacute;n</th>
        <th id="col-codigo-glosa" class="tablaAzul font-bold text-white">C&oacute;digo de glosa PD</th>
        <th id="col-descripcion-glosa" class="tablaAzul font-bold text-white">Descripci&oacute;n glosa</th>
        <th id="col-monto-inversion" class="tablaAzul font-bold text-white">Monto Inversi&oacute;n Total (UF)</th>
        <th id="col-anio-inicio" class="tablaAzul font-bold text-white">A&ntilde;o de Inicio</th>
        <th id="col-anio-termino" class="tablaAzul font-bold text-white">A&ntilde;o de T&eacute;rmino</th>
        <th id="col-mes-termino" class="tablaAzul font-bold text-white">Mes de T&eacute;rmino</th>
        <th id="col-nota" class="tablaAzul font-bold text-white">Nota</th>
        <th id="col-estado-aprobacion" class="bg-green-400 font-bold text-white">Estado aprobaci&oacute;n</th>
        <th id="col-observacion" class="bg-green-400 font-bold text-white">Observaci&oacute;n</th>
       </tr>
    </ng-template>
    <ng-template pTemplate="body" let-product>
      <tr>
        <td>{{ product.empresa }}</td>
        <td>{{ product.codigoCronograma }}</td>
        <td>{{ product.codigoCronogramaAjuste }}</td>
        <td>{{ product.tipoCarga }}</td>
        <td>{{ product.estadoRevision }}</td>
        <td>{{ product.estadoRevision }}</td>
        <td>{{ product.fechaIngreso }}</td>
        <td>{{ product.estadoRevision }}</td>
        <td>{{ product.dato9 }}</td>
        <td>{{ product.dato10 }}</td>
        <td>{{ product.dato11 }}</td>
        <td>{{ product.dato12 }}</td>
        <td class="bg-verde">
          <div class="border-round font-bold">
            <p-select  appendTo="body"
              [options]="estadoAprobacion"
              optionValue="value"
              [(ngModel)]="product.dato13"
              appendTo="body"
              optionLabel="name"
              placeholder="Seleccione..."
              class="selectTabla"
            />
          </div>
        </td>
        <td class="bg-verde">
          <input
            type="analista"
            pInputText
            [hidden]="product.dato13"
            [(ngModel)]="product.analista"
            placeholder="Analista"
            name="analista"
            class="input-with-icon w-full"
            style="
              background-color: white;
              color: black;
              width: 228px !important;
            "
          />
        </td>
      </tr>
    </ng-template>
  </p-table>
</div>
