<div class="row wrapper border-bottom white-bg page-heading ml-1">
  <div class="col-lg-12">
    <h2 class="mt-4">Concepto de {{title}}</h2>
    <ol class="breadcrumb">
      <li class="breadcrumb-item" *ngFor="let path of paths">
        <a>{{path}}</a>
      </li>
    </ol>
  </div>
  <div class="col-lg-2">

  </div>
</div>
<div class="wrapper wrapper-content animated fadeInRight">
  <div class="row">
    <div class="col-lg-12">
      <div class="ibox ">
        <div class="ibox-title">
          <h2>Lista de {{title}}</h2>
          <h5>Información detallada de todos los {{title}}</h5>
          <br>
        </div>
        <div class="ibox-content">
          <div class="row">
            <div class="col-11 form-group">
              <input type="text" name="filterPost" [(ngModel)]="filterPost" class="form-control form-control-sm m-b-xs"
                id="filter" placeholder="Search in table">
            </div>
            <div class="col d-flex justify-content-center">
              <button mat-mini-fab class="bg-secondary" (click)="create()" *ngIf="state">
                <mat-icon>save</mat-icon>
              </button>
            </div>
          </div>
          <table class="footable table table-stripped footable-loaded default mt-3" data-page-size="8"
            data-filter="#filter" *ngIf="pasajeroFlag">
            <thead>
              <tr>
                <th class="footable-visible footable-sortable footable-first-column">Id<span
                    class="footable-sort-indicator"></span></th>
                <th class="footable-visible footable-sortable footable-first-column">Primer nombre<span
                    class="footable-sort-indicator"></span></th>
                <th class="footable-visible footable-sortable footable-first-column">Segundo nombre<span
                    class="footable-sort-indicator"></span></th>
                <th class="footable-visible footable-sortable footable-first-column">Apellido<span
                    class="footable-sort-indicator"></span></th>
                <th class="footable-visible footable-sortable footable-first-column">Teléfono<span
                    class="footable-sort-indicator"></span></th>
                <th class="footable-visible footable-sortable footable-first-column">Email<span
                    class="footable-sort-indicator"></span></th>
                <th class="footable-visible footable-sortable footable-first-column">Ciudad<span
                    class="footable-sort-indicator"></span></th>
                <th class="footable-visible footable-sortable footable-first-column">País<span
                    class="footable-sort-indicator"></span></th>
                <th class="footable-visible footable-sortable footable-first-column">Detalles<span
                    class="footable-sort-indicator"></span></th>
                <th class="footable-visible footable-sortable footable-first-column">Acciones<span
                    class="footable-sort-indicator"></span></th>
              </tr>
            </thead>
            <tbody>
              <tr class="gradeX footable-even" *ngFor="let pasajero of pasajeroPage | filterPasajero:filterPost">
                <td class="footable-visible">
                  {{pasajero.passengerId}}
                </td>
                <td class="footable-visible">
                  {{pasajero.firstName}}
                </td>
                <td class="footable-visible">
                  {{pasajero.secondName}}
                </td>
                <td class="footable-visible">
                  {{pasajero.lastName}}
                </td>
                <td class="footable-visible">
                  {{pasajero.phoneNumber}}
                </td>
                <td class="footable-visible">
                  {{pasajero.emailAddress}}
                </td>
                <td class="footable-visible">
                  {{pasajero.city}}
                </td>
                <td class="footable-visible">
                  {{pasajero.country}}
                </td>
                <td class="footable-visible">
                  {{pasajero.otherDetails}}
                </td>
                <td><button type="button" class="subscribe btn btn-primary btn-block rounded-pill shadow-sm"
                    (click)="edit(pasajero)">
                    &nbsp;Editar&nbsp;&nbsp;&nbsp;</button>
                  <button type="button" class="subscribe btn btn-primary btn-block rounded-pill shadow-sm"
                    (click)="delete(pasajero)">
                    Eliminar</button>
                </td>
              </tr>
            </tbody>
          </table>
          <table class="footable table table-stripped footable-loaded default mt-3" data-page-size="8"
            data-filter="#filter" *ngIf="agenteFlag">
            <thead>
              <tr>
                <th class="footable-visible footable-sortable footable-first-column">Id<span
                    class="footable-sort-indicator"></span></th>
                <th class="footable-visible footable-sortable footable-first-column">Nombre del agente<span
                    class="footable-sort-indicator"></span></th>
                <th class="footable-visible footable-sortable footable-first-column">Detalles<span
                    class="footable-sort-indicator"></span></th>
                <th class="footable-visible footable-sortable footable-first-column">Acciones<span
                    class="footable-sort-indicator"></span></th>
              </tr>
            </thead>
            <tbody>
              <tr class="gradeX footable-even" *ngFor="let agente of agentePage | filterAgente:filterPost">
                <td class="footable-visible">
                  {{agente.agentId}}
                </td>
                <td class="footable-visible">
                  {{agente.agentName}}
                </td>
                <td class="footable-visible">
                  {{agente.agentDetails}}
                </td>
                <td><button type="button" class="subscribe btn btn-primary btn-block rounded-pill shadow-sm"
                    (click)="edit(agente)">
                    &nbsp;Editar&nbsp;&nbsp;&nbsp;</button>
                  <button type="button" class="subscribe btn btn-primary btn-block rounded-pill shadow-sm"
                    (click)="delete(agente)">
                    Eliminar</button>
                </td>
              </tr>
            </tbody>
          </table>
          <table class="footable table table-stripped footable-loaded default mt-3" data-page-size="8"
            data-filter="#filter" *ngIf="reservaFlag">
            <thead>
              <tr>
                <th class="footable-visible footable-sortable footable-first-column">Id<span
                    class="footable-sort-indicator"></span></th>
                <th class="footable-visible footable-sortable footable-first-column">Agente<span
                    class="footable-sort-indicator"></span></th>
                <th class="footable-visible footable-sortable footable-first-column">Pasajero<span
                    class="footable-sort-indicator"></span></th>
                <th class="footable-visible footable-sortable footable-first-column">Estatus<span
                    class="footable-sort-indicator"></span></th>
                <th class="footable-visible footable-sortable footable-first-column">Ticket<span
                    class="footable-sort-indicator"></span></th>
                <th class="footable-visible footable-sortable footable-first-column">Tipos de asiento<span
                    class="footable-sort-indicator"></span></th>
                <th class="footable-visible footable-sortable footable-first-column">Número de asientos<span
                    class="footable-sort-indicator"></span></th>
                <th class="footable-visible footable-sortable footable-first-column">Acciones<span
                    class="footable-sort-indicator"></span></th>
              </tr>
            </thead>
            <tbody>
              <tr class="gradeX footable-even" *ngFor="let reserva of reservaPage | filterReserva:filterPost">
                <td class="footable-visible">
                  {{reserva.reservationId}}
                </td>
                <td class="footable-visible">
                  {{reserva.agent.agentName}}
                </td>
                <td class="footable-visible">
                  {{reserva.passenger.firstName | titlecase}} {{reserva.passenger.lastName | titlecase}}
                </td>
                <td class="footable-visible">
                  {{reserva.reservationStatusCode | titlecase}}
                </td>
                <td class="footable-visible">
                  {{reserva.ticketCode}}
                </td>
                <td class="footable-visible">
                  {{reserva.travelTypeClass | titlecase}}
                </td>
                <td class="footable-visible">
                  {{reserva.numberInParty}}
                </td>
                <td><button type="button"
                    [disabled]="reserva.reservationStatusCode=='CANCELADO' || reserva.reservationStatusCode=='TERMINADO'"
                    class="subscribe btn btn-primary btn-block rounded-pill shadow-sm" (click)="edit(reserva)">
                    &nbsp;{{button}}&nbsp;&nbsp;&nbsp;</button>
                  <button type="button"
                    [disabled]="reserva.reservationStatusCode=='CANCELADO' || reserva.reservationStatusCode=='TERMINADO'"
                    class="subscribe btn btn-primary btn-block rounded-pill shadow-sm" (click)="delete(reserva)">
                    Eliminar</button>
                </td>
              </tr>
            </tbody>
          </table>
          <table class="footable table table-stripped footable-loaded default mt-3" data-page-size="8"
            data-filter="#filter" *ngIf="vueloFlag">
            <thead>
              <tr>
                <th class="footable-visible footable-sortable footable-first-column">Id<span
                    class="footable-sort-indicator"></span></th>
                <th class="footable-visible footable-sortable footable-first-column">Aereolinea<span
                    class="footable-sort-indicator"></span></th>
                <th class="footable-visible footable-sortable footable-first-column">Avion<span
                    class="footable-sort-indicator"></span></th>
                <th class="footable-visible footable-sortable footable-first-column">Aereopuerto Origen<span
                    class="footable-sort-indicator"></span></th>
                <th class="footable-visible footable-sortable footable-first-column">Aereopuerto Destino<span
                    class="footable-sort-indicator"></span></th>
                <th class="footable-visible footable-sortable footable-first-column">Fecha de salida<span
                    class="footable-sort-indicator"></span></th>
                <th class="footable-visible footable-sortable footable-first-column">Fecha de llegada<span
                    class="footable-sort-indicator"></span></th>
                <th class="footable-visible footable-sortable footable-first-column">Acciones<span
                    class="footable-sort-indicator"></span></th>
              </tr>
            </thead>
            <tbody>
              <tr class="gradeX footable-even" *ngFor="let vuelo of vueloPage | filterVuelo:filterPost">
                <td class="footable-visible">
                  {{vuelo.flightId}}
                </td>
                <td class="footable-visible">
                  {{vuelo.airline.airlineName}}
                </td>
                <td class="footable-visible">
                  {{vuelo.airplane.model}}
                </td>
                <td class="footable-visible">
                  {{vuelo.origin_airport.airportName}}
                </td>
                <td class="footable-visible">
                  {{vuelo.destination_airport.airportName}}
                </td>
                <td class="footable-visible">
                  {{vuelo.departureDate}} : {{vuelo.departureTime}}
                </td>
                <td class="footable-visible">
                  {{vuelo.arrivalDate}} : {{vuelo.arrivalTime}}
                </td>
                <td><button type="button" class="subscribe btn btn-primary btn-block rounded-pill shadow-sm"
                    (click)="edit(vuelo)">
                    &nbsp;Editar&nbsp;&nbsp;&nbsp;</button>
                  <button type="button" class="subscribe btn btn-primary btn-block rounded-pill shadow-sm"
                    (click)="delete(vuelo)">
                    Eliminar</button>
                </td>
              </tr>
            </tbody>
          </table>
          <table class="footable table table-stripped footable-loaded default mt-3" data-page-size="8"
            data-filter="#filter" *ngIf="aereopuertoFlag">
            <thead>
              <tr>
                <th class="footable-visible footable-sortable footable-first-column">Id<span
                    class="footable-sort-indicator"></span></th>
                <th class="footable-visible footable-sortable footable-first-column">Nombre del aereopuerto<span
                    class="footable-sort-indicator"></span></th>
                <th class="footable-visible footable-sortable footable-first-column">Ubicación<span
                    class="footable-sort-indicator"></span></th>
                <th class="footable-visible footable-sortable footable-first-column">Detalles<span
                    class="footable-sort-indicator"></span></th>
                <th class="footable-visible footable-sortable footable-first-column">Acciones<span
                    class="footable-sort-indicator"></span></th>
              </tr>
            </thead>
            <tbody>
              <tr class="gradeX footable-even"
                *ngFor="let aereopuerto of aereopuertoPage | filterAereopuerto:filterPost">
                <td class="footable-visible">
                  {{aereopuerto.airportId}}
                </td>
                <td class="footable-visible">
                  {{aereopuerto.airportName}}
                </td>
                <td class="footable-visible">
                  {{aereopuerto.airportLocation}}
                </td>
                <td class="footable-visible">
                  {{aereopuerto.otherDetails}}
                </td>
                <td><button type="button" class="subscribe btn btn-primary btn-block rounded-pill shadow-sm"
                    (click)="edit(aereopuerto)">
                    &nbsp;Editar&nbsp;&nbsp;&nbsp;</button>
                  <button type="button" class="subscribe btn btn-primary btn-block rounded-pill shadow-sm"
                    (click)="delete(aereopuerto)">
                    Eliminar</button>
                </td>
              </tr>
            </tbody>
          </table>
          <mat-paginator [length]="totalRegisters" [pageSize]="totalPage" [pageIndex]="actualPage"
            [pageSizeOptions]="pageSizeOptions" (page)="paging($event)" showFirstLastButtons class="mx-2">
          </mat-paginator>
        </div>
      </div>
    </div>
  </div>
</div>