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

    <mat-card-content>
        <div *ngIf="SaleInfo.title == ''" fxLayout="column" fxLayoutGap="5px">        
            <p-skeleton width="250px" height="20px"></p-skeleton>
            <p-skeleton width="150px" height="20px"></p-skeleton>
            <p-skeleton width="200px" height="20px"></p-skeleton>
            <p-skeleton width="150px" height="20px"></p-skeleton>
            
        </div>
        <div *ngIf="SaleInfo.title != ''"  fxLayout="column" fxLayoutGap="5px">
            <p><strong>{{SaleInfo.title}}</strong></p>
            <p><mat-icon>event</mat-icon>{{date | date:'dd/MM/yyyy' }} - {{hour}}</p>
            <p><mat-icon>account_balance</mat-icon>{{SaleInfo.saleHouseName}}</p>
            <p><mat-icon>location_on</mat-icon>{{SaleInfo.location}}</p>
        </div>
        
    </mat-card-content>
</mat-card>
<mat-card>
    <mat-card-content>
        <div fxLayout="row" fxLayoutGap="5px">  
            <button mat-button color="warn" (click)="cancel()">Cancel</button>               
            <button  mat-raised-button color="primary" (click)="save()">Save</button>
        </div>
    </mat-card-content>
</mat-card>