<div class="row">
    <div class="col-12">
        <app-header></app-header>
        <div class="content">
            <div class="filtros" style="margin-bottom: 10px">
                <div>
                    <div class="input-group m-b">
                        <div class="input-group-prepend">
                            <span class="input-group-addon" id="filtroSpan"
                                >Filtros</span
                            >
                        </div>
                        <input class="form-control" type="text"[(ngModel)]="filtroInput" #input>

                        <button class="btn-primary" id="botonFiltro" (click)="aplicarFiltro($event)">
                            <i class="fa fa-search"></i>
                        </button>
                        <button id="botonEliminarFiltros" (click)="eliminarFiltros()">
                            <i class="fa fa-times-circle"></i>
                        </button>
                        <button routerLink="/vuelos/agregar" id="botonAgregar">
                            <div class="circulo-div">
                                <i
                                    class="fa fa-file-o"
                                    style="margin: auto"
                                ></i>
                            </div>
                        </button>
                    </div>
                </div>
            </div>
            <div style="padding-top: 15px">
              <div class="mat-elevation-z8">
                <table class="table table-striped table-hover" mat-table [dataSource]="dataSource" matSort>
              
                  <!-- ID Column -->
                  <ng-container matColumnDef="id">
                    <th mat-header-cell *matHeaderCellDef mat-sort-header> ID </th>
                    <td mat-cell *matCellDef="let row"> {{row.id}} </td>
                  </ng-container>
              
                  <!-- Progress Column -->
                  <ng-container matColumnDef="codigoAerolina">
                    <th mat-header-cell *matHeaderCellDef mat-sort-header> Codigo Aerolinea </th>
                    <td mat-cell *matCellDef="let row"> {{row.codigoAerolinea}} </td>
                  </ng-container>
              
                  <!-- Name Column -->
                  <ng-container matColumnDef="codigoAeronave">
                    <th mat-header-cell *matHeaderCellDef mat-sort-header> Codigo Aeronave </th>
                    <td mat-cell *matCellDef="let row"> {{row.codigoTipoAeronave}} </td>
                  </ng-container>
              
                  <!-- Fruit Column -->
                  <ng-container matColumnDef="codigoDestino">
                    <th mat-header-cell *matHeaderCellDef mat-sort-header> Codigo Aeropuerto Destino </th>
                    <td mat-cell *matCellDef="let row"> {{row.aeropuertoDestino}} </td>
                  </ng-container>

                  <ng-container matColumnDef="costo">
                    <th mat-header-cell *matHeaderCellDef mat-sort-header> Costo </th>
                    <td mat-cell *matCellDef="let row"> {{row.costo}} </td>
                  </ng-container>

                  <ng-container matColumnDef="opciones">
                    <th mat-header-cell *matHeaderCellDef mat-sort-header></th>
                    <td mat-cell *matCellDef="let row"> 

                      <button
                                    routerLink="/vuelos/editar/{{
                                        row.id
                                    }}"
                                    class="btn btn-light btn-sm"
                                >
                                    <i class="fa fa-edit"></i>

                                    Editar
                      </button>

                      <button
                                    class="btn btn-light btn-sm"
                                    (click)="eliminar($event, row.id)"
                                >
                                    <i class="fa fa-trash"></i>
                                    Eliminar
                      </button>
                    </td>
                  </ng-container>
              
                  <tr  mat-header-row *matHeaderRowDef="displayedColumns"></tr>
                  <tr mat-row *matRowDef="let row; columns: displayedColumns;" (click)="detalles(row.id)"></tr>

                  <!-- <mat-row  *matRowDef="let row; columns: displayedColumns;" (click)="getRecord(row)"></mat-row> -->

              
                  <!-- Row shown when there is no matching data. -->
                  <!-- <tr class="mat-row" *matNoDataRow>
                    <td class="mat-cell" colspan="4">No data matching the filter "{{input.value}}"</td>
                  </tr> -->
                </table>
              
                <mat-paginator [pageSizeOptions]="[5, 10, 25, 100]" aria-label="Select page of users"></mat-paginator>
              </div>
            </div>
        </div>
    </div>
</div>
