<div *ngIf="product" class="container-fluid bg-white">
    <div class="container">
        <div class="row">
            <div class="col-12 py-4">
                <div class="row">
                    <div class="col-12 col-md-3">
                        <slideshow [autoPlay]="true" [imageUrls]="preview" [height]="'300px'"></slideshow>
                        <div *ngIf="links?.length">
                            <h5 class="mt-3 mb-0 pl-3">Links</h5>
                            <mat-list>
                                <mat-list-item *ngFor="let l of links">
                                    <a target="_blank" [href]="l.link">{{l.name}}</a>
                                </mat-list-item>
                            </mat-list>
                        </div>
                    </div>
                    <div class="col-12 col-md-9">
                        <h2 class="roboto">{{product.name}}</h2>
                        <mat-form-field *ngIf="product.options.length > 1">
                            <mat-select placeholder="Pricing Options" [(ngModel)]="option">
                                <mat-option *ngFor="let o of product.options" [value]="o">
                                    {{o.name}} <span class="float-right text-muted">{{o.currency}} {{o.price | currency}}</span>
                                </mat-option>
                            </mat-select>
                        </mat-form-field>
                        <div class="d-inline ml-3">
                            <mat-form-field class="mr-1" style="width: 40px">
                                <span matPrefix>x</span>
                                <input #quantity matInput type="number" value="1" min="1">
                            </mat-form-field>
                            <button mat-raised-button color="primary" [disabled]="quantity.value < 1" (click)="app.cartAdd(product.id, product.name, option, quantity.value)">
                                <mat-icon>add_shopping_cart</mat-icon> Buy
                            </button>
                        </div>
                        <h5 *ngIf="product.options.length == 1 && product.options[0].price > 0" class="text-muted">{{product.options[0].currency}} {{product.options[0].price | currency}}</h5>
                        <h5 *ngIf="product.options.length == 1 && product.options[0].price == 0" class="text-muted">Contact For Price</h5>
                        <mat-divider class="my-3"></mat-divider>
                        <p style="overflow: hidden;" [innerHtml]="product.description"></p>
                        <mat-divider class="my-3"></mat-divider>
                        <div *ngIf="attachments?.length">
                            <h5 class="ml-3">
                                <mat-icon style="vertical-align: bottom;">cloud_download</mat-icon> Downloads
                            </h5>
                            <mat-list>
                                <mat-list-item *ngFor="let a of attachments">
                                    <mat-icon mat-list-icon>insert_drive_file</mat-icon>
                                    <h6 mat-line>{{a.name}}</h6>
                                    <div mat-line>
                                        <a class="mr-2" [href]="a.link" target="_blank">View</a>
                                        |
                                        <a class="ml-2" [href]="a.link" download>Download</a>
                                    </div>
                                </mat-list-item>
                            </mat-list>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>