<div class="gameCard-Grid">
    <div class="gameCard" *ngFor="let product of Products">
        <div style="position: relative;">
            <div *ngIf="product.images.length > 1">
                <button class="gameCard-Prev" (click)="nextImg(product)">❮</button>
                <button class="gameCard-Next" (click)="prevImg(product)">❯</button>
            </div>
            <div *ngIf="product.images.length > 0" >
                <img class="gameCard-Img" [src]="product.images[product.curShowingIMG].imageSrc">
            </div>
        </div>
        <h1 class ="gameCard-Name">{{ product.name }}</h1>
        <div *ngFor="let line of product.description.split('\n')" >
            <h2 class="gameCard-Desc">{{ line }}</h2>
        </div>
        <h2 class="gameCard-Price">${{ (product.cost/100).toFixed(2) }}</h2>
        <button class="gameCard-Button" >Add To Cart</button>
        <div *ngIf="auth.loggedInUser.siteData.role == 'Admin'">
            <button style="width: calc(50% - 10px); margin: 5px;" [routerLink]="['/store/admin/edit']" [queryParams]="{ ProductID: product.id }" >
                Edit
            </button>
            <button style="width: calc(50% - 10px); margin: 5px;" (click)="DeleteItem(product.id)" >
                Delete
            </button>
        </div>
    </div>
    <div *ngIf="auth.loggedInUser.siteData.role == 'Admin'">
        <button style="width: calc(100% - 10px); margin: 5px;" [routerLink]="['/store/admin/new']" >
            New
        </button>
    </div>
</div>