<div style="display: flex;padding-bottom: 50px;">
    <div class="grid-ibox-content-options">

        <div class="grid-container mat-elevation-z8">
            <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> Apellido </th>
                    <td mat-cell *matCellDef="let row"> {{row.lastName}} </td>
                </ng-container>
                <ng-container matColumnDef="passenger">
                    <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="monto">
                    <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="actions">
                    <th mat-header-cell *matHeaderCellDef></th>
                    <td mat-cell *matCellDef="let item; let i = dataIndex" class="text-center" style="width: 5%;">

                        <div class="btn-group btn-actions" *ngIf="mode !== 'view'">
                            <button type="button" class="btn btn-default btn-sm" (click)="onEdit(item)"
                                [disabled]="mode === 'view'">
                                <i class="fa fa-edit d-xl-none"></i>
                                <span class="d-none d-xl-block">
                                    <i class="fa fa-edit"></i>&nbsp;{{ "btn.edit" | translate }}
                                </span>
                            </button>
                            <button type="button" class="btn btn-default btn-sm" (click)="onDelete(item)"
                                [disabled]="mode === 'view'">
                                <i class="fa fa-trash d-xl-none"></i>
                                <span class="d-none d-xl-block">
                                    <i class="fa fa-trash"></i>&nbsp;{{ "btn.delete" | translate }}
                                </span>
                            </button>
                        </div>
                    </td>
                </ng-container>

                <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
                <tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
            </table>
            <mat-paginator #paginator showFirstLastButtons [pageSizeOptions]="[5, 10, 15]">
            </mat-paginator>
        </div>
    </div>
    <div class="content-vertical-bar">
        <button type="button" mat-mini-fab color="default" *ngIf="mode !== 'view'" (click)="onCreate()"
            matTooltip="{{ 'btn.new' | translate }}">
            <i class="fa fa-file-o"></i>
        </button>
    </div>
</div>