<!--
  ~ Licensed to the Apache Software Foundation (ASF) under one or more
  ~ contributor license agreements.  See the NOTICE file distributed with
  ~ this work for additional information regarding copyright ownership.
  ~ The ASF licenses this file to You under the Apache License, Version 2.0
  ~ (the "License"); you may not use this file except in compliance with
  ~ the License.  You may obtain a copy of the License at
  ~
  ~    http://www.apache.org/licenses/LICENSE-2.0
  ~
  ~ Unless required by applicable law or agreed to in writing, software
  ~ distributed under the License is distributed on an "AS IS" BASIS,
  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  ~ See the License for the specific language governing permissions and
  ~ limitations under the License.
  ~
  -->

<div fxFlex="100" fxLayout="column" style="height:100%;">
    <div fxFlex="100" fxLayoutAlign="end center" style="margin-bottom:10px;">
        <button mat-button mat-raised-button color="primary" (click)="fetchTransportProcesses()">
            Refresh
        </button>
    </div>
    <div fxFlex="100" fxLayout="column" fxLayoutAlign="start start">
        <table mat-table [dataSource]="dataSource" class="mat-elevation-z1">

            <ng-container matColumnDef="position">
                <th fxFlex="15" fxLayoutAlign="start center" mat-header-cell *matHeaderCellDef> No.</th>
                <td fxFlex="15" fxLayoutAlign="start center" mat-cell *matCellDef="let element; let i = index">
                    {{i+1}}
                </td>
            </ng-container>

            <ng-container matColumnDef="startTime">
                <th fxFlex="30" fxLayoutAlign="start center" mat-header-cell *matHeaderCellDef> Shipped</th>
                <td fxFlex="30" fxLayoutAlign="start center" mat-cell *matCellDef="let element">
                    {{timestampConverterService.convertTimestampHoursOnly(element.startTime)}}
                </td>
            </ng-container>

            <ng-container matColumnDef="endTime">
                <th fxFlex="30" fxLayoutAlign="start center" mat-header-cell *matHeaderCellDef> Delivered</th>
                <td fxFlex="30" fxLayoutAlign="start center" mat-cell *matCellDef="let element">
                    {{timestampConverterService.convertTimestampHoursOnly(element.endTime)}}
                </td>
            </ng-container>

            <ng-container matColumnDef="action">
                <th fxFlex="25" fxLayoutAlign="start center" mat-header-cell *matHeaderCellDef> Action</th>
                <td fxFlex="25" fxLayoutAlign="start center" mat-cell *matCellDef="let element">
                    <button mat-button mat-raised-button color="primary" (click)="selectProcess(element)">
                        Select Process
                    </button>
                </td>
            </ng-container>

            <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
            <tr mat-row *matRowDef="let row; columns: displayedColumns; let i = index"></tr>
        </table>
        <mat-paginator [pageSizeOptions]="[5, 10, 20]" showFirstLastButtons></mat-paginator>
    </div>
</div>