<div class="container" fxLayout="row" fxLayoutAlign="center none">
  <div fxFlex="95%">

    <mat-card>
      <mat-card-header>
          <mat-card-title>Sale Detail</mat-card-title>        
      </mat-card-header>
      <mat-card-content>
        <div fxLayout="row" fxLayoutGap="5px">  
          <h2>{{Sale.title}}</h2>
        </div> 
        <div fxLayout="row" fxLayoutGap="40px">
          <div fxLayout="column" fxLayoutGap="2px">  
            <p><mat-icon>event</mat-icon> {{Sale.date | date:'dd/MM/yyyy' }} - {{Sale.date | date:'HH:mm'}} | </p>
            <p><mat-icon>account_balance</mat-icon> {{Sale.saleHouseName}}</p>
            <p><mat-icon>location_on</mat-icon> {{Sale.location}}</p>            
          </div>
          <div fxLayout="column" fxLayoutGap="2px">
            <p><mat-icon>tag</mat-icon>{{Sale.postProcessing?.nbrLots}} Lots</p>
            <p><mat-icon>hourglass_bottom</mat-icon>{{convertSecondsToHHMM(Sale.postProcessing?.bidsDuration ?? 0)}}</p>
            <p><mat-icon>hourglass_bottom</mat-icon>/Lot {{getTimePerLot(parseToNumber(Sale.postProcessing?.durationPerLots ?? '0'))}}</p>
          </div>
          <div fxLayout="column" fxLayoutGap="2px">
            <p>Total amount: {{Sale.postProcessing?.totalAmount | currency:'EUR':'symbol':'1.2-2'}}</p>
            <p>Max amount: {{Sale.postProcessing?.maxAmount | currency:'EUR':'symbol':'1.2-2'}}</p>
            <p>Min amount: {{Sale.postProcessing?.minAmount | currency:'EUR':'symbol':'1.2-2'}}</p>            
          </div>
          <div fxLayout="column" fxLayoutGap="2px">  
            <p>Average amount: {{Sale.postProcessing?.averageAmount | currency:'EUR':'symbol':'1.2-2'}}</p>
            <p>Median amount: {{Sale.postProcessing?.medianAmount | currency:'EUR':'symbol':'1.2-2'}}</p>
            <p>Unsold: {{Sale.postProcessing?.unsoldLots}} ({{Sale.postProcessing?.unsoldPercentage}}%)</p>  
          </div>
        </div>   
        <div fxLayout="row" fxLayoutGap="2px">
          <button mat-raised-button color="primary" (click)="downloadExcelStatsFile(id)">Excel</button>                
        </div>                                
      </mat-card-content>
    </mat-card>

    <mat-card style="margin-top: 10px;">
      <mat-card-header>
          <mat-card-title>Lots</mat-card-title>        
      </mat-card-header>
      <mat-card-content>
        <mat-tab-group>
          <mat-tab>
            <ng-template mat-tab-label>
              Lots
            </ng-template>
            <div fxLayout="row" fxLayoutGap="5px">  
              <table mat-table [dataSource]="lotList" matSort 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="lotNum">
                  <th mat-header-cell *matHeaderCellDef mat-sort-header="lotNumber">#</th>
                  <td mat-cell *matCellDef="let element">
                    {{element.lotNumber}}
                  </td>
                </ng-container>

                <!-- Picture Column -->
                <ng-container matColumnDef="picture">
                  <th mat-header-cell *matHeaderCellDef> Picture </th>
                  <td mat-cell *matCellDef="let element"><img [src]="element.picture" alt="Picture" style="height: 60px"></td>
                </ng-container>

                <!-- Title Column -->
                <ng-container matColumnDef="title">
                  <th mat-header-cell *matHeaderCellDef mat-sort-header="title"> Title </th>
                  <td mat-cell *matCellDef="let element">
                    {{element.title ? element.title : "Lot "+element.lotNumber}}
                  </td>
                </ng-container>

                <!-- EstimateLow Column -->
                <ng-container matColumnDef="estimateLow">
                  <th mat-header-cell *matHeaderCellDef mat-sort-header="EstimateLow"> Estimate Low </th>
                  <td mat-cell *matCellDef="let element">
                    {{element.EstimateLow ? element.EstimateLow : "-"}}
                  </td>
                </ng-container>

                <!-- EstimateHigh Column -->
                <ng-container matColumnDef="estimateHigh">
                  <th mat-header-cell *matHeaderCellDef mat-sort-header="EstimateHigh"> Estimate High </th>
                  <td mat-cell *matCellDef="let element">
                    {{element.EstimateHigh ? element.EstimateHigh : "-"}}
                  </td>
                </ng-container>

                <!-- Price Column -->
                <ng-container matColumnDef="price">
                  <th mat-header-cell *matHeaderCellDef mat-sort-header="auctionedAmount"> Price </th>
                  <td mat-cell *matCellDef="let element">
                    <span [ngClass]="{'bold-text': element.auctionedAmount > 0}">{{element.auctionedAmount > 0 ? element.auctionedAmount : "-"}}</span>
                  </td>
                </ng-container>
                
                <!-- nbrBids Column -->
                <ng-container matColumnDef="nbrBids">
                  <th mat-header-cell *matHeaderCellDef mat-sort-header="bidsLength"> nbrBids </th>
                  <td mat-cell *matCellDef="let element">                    
                    {{element.postProcessing?.nbrBids}}
                  </td>
                </ng-container>

                <!-- duration Column -->
                <ng-container matColumnDef="duration">
                  <th mat-header-cell *matHeaderCellDef mat-sort-header="duration"> Duration </th>
                  <td mat-cell *matCellDef="let element">                    
                    {{element.postProcessing?.duration}} s
                  </td>
                </ng-container>

                <!-- percentageAboveUnderLow Column -->
                <ng-container matColumnDef="percentageAboveUnderLow">
                  <th mat-header-cell *matHeaderCellDef mat-sort-header="percentageAboveUnderLow">Above/Under Low</th>
                  <td mat-cell *matCellDef="let element">                    
                    {{element.postProcessing?.percentageAboveUnderLow}} %
                  </td>
                </ng-container>

                <!-- percentageAboveUnderHigh Column -->
                <ng-container matColumnDef="percentageAboveUnderHigh">
                  <th mat-header-cell *matHeaderCellDef mat-sort-header="percentageAboveUnderHigh">Above/Under High</th>
                  <td mat-cell *matCellDef="let element">                    
                    {{element.postProcessing?.percentageAboveUnderHigh}} %
                  </td>
                </ng-container>
    
                <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
                <tr mat-row *matRowDef="let row; columns: displayedColumns;" (click)="openDetailLot(row._id)"></tr>
    
              </table>             
            </div>  
            <mat-paginator [pageSizeOptions]="[10, 50, 100]" showFirstLastButtons></mat-paginator>                        
          </mat-tab>


          <mat-tab label="Graphs">
            <div fxLayout="row" fxLayoutGap="5px">  
                    
            </div>  
          </mat-tab>
          
        </mat-tab-group>
        
                       
      </mat-card-content>
    </mat-card>

  </div>
</div>