<div class="product-wrapper product">
    <mat-card>
        <img class="product__image" mat-card-image src="{{getImage(product.productFiles)}}" alt="">
        <mat-card-content class="product__content">
            <p>
                {{product.productLongDesc}}
            </p>
        </mat-card-content>
        <mat-card-content *ngIf="appConfig.showPrices" class="product__price">
            <p>
                ${{product.customerPrice}} GST {{priceViewOptions.GSTInc ? 'Inc' : 'Esc'}}
            </p>
        </mat-card-content>
        <mat-card-content *ngIf="features.length > 0" class="product__content">
            <p>
                Features & Benefits:
            </p>
            <p *ngFor="let feature of features">
                {{feature.itemDescription}}
            </p>
        </mat-card-content>
        <mat-card-content *ngIf="infos.length > 0" class="product__content">
            <p>
                Product Information:
            </p>
            <p *ngFor="let info of infos">
                {{info.itemDescription}}
            </p>
        </mat-card-content>
        <mat-card-actions class="product__actions">
            <div class="flex-row flex-count-buttons">
                <button mat-raised-button color="primary" (click)="decrement(product)">
                    <mat-icon class="icon-centered">remove</mat-icon>
                </button>
                <input type="number" matInput #qtyInput (click)="qtyInput.select()" [(ngModel)]="product.prodQty">
                <button mat-raised-button color="primary" (click)="increment(product)">
                    <mat-icon class="icon-centered">add</mat-icon>
                </button>
            </div>
            <button class="product__btn btn-action" mat-raised-button color="accent" (click)="order(product)"><span
                    class="btn-action__text">Add</span>
                <mat-icon class="btn-action__icon">done</mat-icon>
            </button>
        </mat-card-actions>
    </mat-card>
</div>


