<div style="display: flex;padding-bottom: 50px;" >
  <div class="grid-ibox-content-options">
      <!-- <div class="filter-panel mat-elevation-z8 remove-buttons">
      <xdf-ngx-tags-input #inputComponent name="name" class="input-lg" [fields]="fieldFilters"
                          (filterEvent)="onFilter(false)">
      </xdf-ngx-tags-input>
      </div> -->

      <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>
      
          <!-- Name Column -->
          <ng-container matColumnDef="agente">
            <th mat-header-cell *matHeaderCellDef mat-sort-header> Apellido </th>
            <td mat-cell *matCellDef="let row"> {{row.apellido}} </td>
          </ng-container>
          <ng-container matColumnDef="pasajero">
            <th mat-header-cell *matHeaderCellDef mat-sort-header> Primer Nombre </th>
            <td mat-cell *matCellDef="let row">{{row.primerNombre}}</td>
          </ng-container>
          <ng-container matColumnDef="monto">
            <th mat-header-cell *matHeaderCellDef mat-sort-header> Apellido </th>
            <td mat-cell *matCellDef="let row"> {{row.segundoNombre}} </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>