<mat-card>
    <mat-card-header>
        <mat-card-title>Lot</mat-card-title>
        <mat-card-subtitle>Lot informations</mat-card-subtitle>
    </mat-card-header>

    <mat-card-content>
        <div fxLayout="row" fxLayoutGap="5px">
            <mat-list>
                <mat-list-item>
                  <span matListItemTitle>#</span>
                  <span matListItemLine>{{Lot.lotNumber}}</span>
                </mat-list-item>
                <mat-list-item>
                  <span matListItemTitle>Title</span>
                  <span matListItemLine>{{Lot.title}}</span>
                </mat-list-item>
                <mat-list-item>
                    <span matListItemTitle>Description</span>
                    <span matListItemLine [innerHTML]="getSafeDescription()"></span>
                  </mat-list-item>
                <mat-list-item>
                  <span matListItemTitle>Estimate</span>
                  <span matListItemLine>Low: {{Lot.EstimateLow}} | High: {{Lot.EstimateHigh}} </span>
                </mat-list-item>
              </mat-list>              
        </div>
        <div fxLayout="row" fxLayoutGap="5px">
            <table mat-table [dataSource]="bids" class="mat-elevation-z8">
    
                <!--- Note that these columns can be defined in any order.
                      The actual rendered columns are set as a property on the row definition" -->
              
                <!-- Lotnum Column -->
                <ng-container matColumnDef="amount">
                  <th mat-header-cell *matHeaderCellDef >Amount</th>
                  <td mat-cell *matCellDef="let element">
                    {{element.amount}}
                  </td>
                </ng-container>

                <!-- Title Column -->
                <ng-container matColumnDef="type">
                  <th mat-header-cell *matHeaderCellDef > Type </th>
                  <td mat-cell *matCellDef="let element">
                    {{element.auctioned_type}}
                  </td>
                </ng-container>

                <!-- Time Column -->
                <ng-container matColumnDef="time">
                  <th mat-header-cell *matHeaderCellDef > Time </th>
                  <td mat-cell *matCellDef="let element">
                    {{element.timestamp  | date:'HH:mm:ss':'Europe/Paris'}}
                  </td>
                </ng-container>
    
                <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
                <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>    
            </table>                     
        </div>
        <mat-paginator [pageSizeOptions]="[5, 10, 15]" showFirstLastButtons></mat-paginator>    
    </mat-card-content>
</mat-card>
<mat-card>
    <mat-card-content>
        <div fxLayout="row" fxLayoutGap="5px">  
            <button mat-button color="warn" (click)="cancel()">Close</button>
        </div>
    </mat-card-content>
</mat-card>