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

    <mat-card>
      <mat-card-header>
          <mat-card-title>New Sale</mat-card-title>        
      </mat-card-header>
      <mat-card-content>
        <div fxLayout="row" fxLayoutGap="5px">  
          <mat-form-field>
            <mat-label>Url</mat-label>
            <input matInput placeholder="Ex. https://drouot.com/..." maxlength="255" st [(ngModel)]="url" >
          </mat-form-field>
          <button mat-raised-button color="primary" (click)="openLoadingSale()">Add</button>
      </div>                   
      </mat-card-content>
    </mat-card>

    <mat-card style="margin-top: 10px;">
      <mat-card-header>
          <mat-card-title>Sales</mat-card-title>        
      </mat-card-header>
      <mat-card-content>
        <mat-tab-group>
          <mat-tab>
            <ng-template mat-tab-label>
              Current Sales 
              <span matBadge="{{futureSales.length}}" matBadgeOverlap="false" style="margin: 5px;"> </span>
            </ng-template>
            <div fxLayout="row" fxLayoutGap="5px">  
              
              <table mat-table [dataSource]="futureSales" 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" -->
              
                <!-- Title Column -->
                <ng-container matColumnDef="title">
                  <th mat-header-cell *matHeaderCellDef> Title </th>
                  <td mat-cell *matCellDef="let element">
                    <a href="{{element.url}}" target="_blank">{{element.title}}</a>
                    <div *ngIf="element.status == 'following'">
                      <mat-progress-bar mode="indeterminate"></mat-progress-bar>
                    </div>
                  </td>
                </ng-container>
    
                <!-- Date Column -->
                <ng-container matColumnDef="date">
                  <th mat-header-cell *matHeaderCellDef> Date </th>
                  <td mat-cell *matCellDef="let element"> {{element.date | date:'dd/MM/yyyy' }} - {{element.date | date:'HH:mm'}} </td>
                </ng-container>
              
                <!-- Sale House Column -->
                <ng-container matColumnDef="house">
                  <th mat-header-cell *matHeaderCellDef> Sale House </th>
                  <td mat-cell *matCellDef="let element"> {{element.saleHouseName}} </td>
                </ng-container>
              
                <!-- PLateform House Column -->
                <ng-container matColumnDef="plateform">
                  <th mat-header-cell *matHeaderCellDef> Plateforme </th>
                  <td mat-cell *matCellDef="let element"> {{element.platform}} </td>
                </ng-container>     
                
                <!-- Status Column -->
                <ng-container matColumnDef="status">
                  <th mat-header-cell *matHeaderCellDef> Status </th>
                  <td mat-cell *matCellDef="let element"> {{element.status}} </td>
                </ng-container>
    
                <!-- Action Column -->
                <ng-container matColumnDef="action">
                  <th mat-header-cell *matHeaderCellDef> Action </th>
                  <td mat-cell *matCellDef="let element">               
                    <mat-select placeholder="Select action">
                      <mat-option *ngIf="element.status == 'ready'" (click)="prepareSale(element)"><mat-icon>format_list_numbered</mat-icon> Prepare</mat-option>
                      <mat-option *ngIf="element.status == 'ready' || element.status == 'endOnRequest' || element.status == 'endOnError'" (click)="followSale(element)"><mat-icon>play_arrow</mat-icon> Follow</mat-option>
                      <mat-option *ngIf="element.status == 'following'" (click)="stopFollowSale(element)"><mat-icon>stop</mat-icon> Stop Following</mat-option>
                      <mat-option *ngIf="element.status == 'following'" (click)="resetToReady(element._id)">Reset to Ready</mat-option>
                      <mat-option (click)="navigateToSaleDetail(element._id)"><mat-icon>info</mat-icon> Details</mat-option>
                      <mat-option (click)="postProcessing(element._id)"><mat-icon>query_stats</mat-icon> Post-processing</mat-option>
                      <mat-option (click)="deleteSale(element._id)"><mat-icon>delete</mat-icon> Delete</mat-option>
                    </mat-select>                
                  </td>
                </ng-container>

                <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
                <tr mat-row *matRowDef="let row; columns: displayedColumns; trackBy: trackByElementId"></tr>
    
              </table>              
            </div>  
          </mat-tab>


          <mat-tab label="Old Sales">
            <div fxLayout="row" fxLayoutGap="5px">  
              <table mat-table [dataSource]="pastSales" 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" -->
              
                <!-- Title Column -->
                <ng-container matColumnDef="title">
                  <th mat-header-cell *matHeaderCellDef> Title </th>
                  <td mat-cell *matCellDef="let element">
                    <a (click)="navigateToSaleDetail(element._id)">{{element.title}}</a>
                  </td>
                </ng-container>
    
                <!-- Date Column -->
                <ng-container matColumnDef="date">
                  <th mat-header-cell *matHeaderCellDef> Date </th>
                  <td mat-cell *matCellDef="let element"> {{element.date | date:'dd/MM/yyyy' }} - {{element.date | date:'HH:mm'}} </td>
                </ng-container>
              
                <!-- Sale House Column -->
                <ng-container matColumnDef="house">
                  <th mat-header-cell *matHeaderCellDef> Sale House </th>
                  <td mat-cell *matCellDef="let element"> {{element.saleHouseName}} </td>
                </ng-container>
              
                <!-- PLateform House Column -->
                <ng-container matColumnDef="plateform">
                  <th mat-header-cell *matHeaderCellDef> Plateforme </th>
                  <td mat-cell *matCellDef="let element"> {{element.platform}} </td>
                </ng-container>

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

                <!-- PostProcessing Column -->
                <ng-container matColumnDef="postProcessing">
                  <th mat-header-cell *matHeaderCellDef> Post Processing </th>
                  <td mat-cell *matCellDef="let element">               
                    <button mat-button (click)="postProcessing(element._id)"><mat-icon>query_stats</mat-icon></button>
                  </td>
                </ng-container>           
    
                <!-- Delete Column -->
                <ng-container matColumnDef="delete">
                  <th mat-header-cell *matHeaderCellDef> Delete </th>
                  <td mat-cell *matCellDef="let element">               
                    <button mat-button (click)="deleteSale(element._id)"><mat-icon>delete</mat-icon></button>                 
                  </td>
                </ng-container>
    
                <tr mat-header-row *matHeaderRowDef="displayedColumnsOld"></tr>
                <tr mat-row *matRowDef="let row; columns: displayedColumnsOld; trackBy: trackByElementId"></tr>
    
              </table>              
            </div>  
          </mat-tab>
          
        </mat-tab-group>
        
                       
      </mat-card-content>
    </mat-card>

  </div>
</div>