<div class="popup-general">
    <div class="row">
        <div class="col-lg-12">
            <div class="dialog-title">
                <img src="{{ logoSrc }}" with="25" height="25">
                <span class="header-popup-text">Seleccionar un pasajero</span>
                <div class="pull-right">
                    <button type="button" class="close" (click)="close()"></button>
                </div>
            </div>
        </div>
    </div>

    <div>

        <div class="mat-elevation-z8" style="margin: 15px 0px 15px;">
            <table class="table table-striped table-hover" mat-table [dataSource]="dataSource" matSort>

                <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>

                <ng-container matColumnDef="agent">
                    <th mat-header-cell *matHeaderCellDef mat-sort-header> Primer Nombre </th>
                    <td mat-cell *matCellDef="let row"> {{row.firstName}} </td>
                </ng-container>
                <ng-container matColumnDef="passenger">
                    <th mat-header-cell *matHeaderCellDef mat-sort-header> Segundo Nombre </th>
                    <td mat-cell *matCellDef="let row"> {{row.secondName}} </td>
                </ng-container>
                <ng-container matColumnDef="amount">
                    <th mat-header-cell *matHeaderCellDef mat-sort-header> Apellido </th>
                    <td mat-cell *matCellDef="let row"> {{row.lastName}} </td>
                </ng-container>

                <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
                <tr mat-row *matRowDef="let row; columns: displayedColumns;" (click)="details(row)"></tr>

            </table>

            <mat-paginator [pageSizeOptions]="[5, 10, 25, 100]" aria-label="Select page of users"></mat-paginator>
        </div>
    </div>

    <div class="dialog-footer">
        <div>
            <button type="button" class="btn btn-primary pull-right" (click)="save()" *ngIf="mode !== 'view'"
                [disabled]="record ? ((form?.invalid && form?.touched) || processing) : (form?.invalid || processing)">
                <span><i class="fa fa-floppy-o"></i>&nbsp;{{ 'btn.save' | translate }}</span>
            </button>
            &nbsp;
            <button class="btn btn-default pull-left" (click)="close()">
                <span>{{ 'btn.cancel' | translate }}</span>
            </button>
        </div>
    </div>
</div>