<ion-content>

    <button class="back-button" (click)="back()"> <ion-icon name="close-outline"></ion-icon> </button>

    <ion-button (click)="showGrid = !showGrid"
    class="grid-button">
        <ion-icon *ngIf="!showGrid" name="apps-outline"></ion-icon>
        <ion-icon *ngIf="showGrid" name="layers-outline"></ion-icon>
    </ion-button>
    
    <section class="collections">

        <ng-container *ngIf="showGrid">
            <ul class="collection-grid">
                <li *ngFor="let collection of collections; let i = index"
                (click)="goToCollection(i)">
                    <img [src]="collection.image">
                    <label> {{ collection.name }} </label>
                </li>
            </ul>
        </ng-container>

        <ng-container *ngIf="!showGrid">
            <img class="glass-box" src="assets/collections/glassbox.png" alt="">

            <ion-slides #slides [options]="slideOpts">
                <ion-slide *ngFor="let collection of collections">
                    <img [ngClass]="{'bat' : collection.type === 'BAT' || collection.type === 'INVERTED BAT', 
                    'ball' : collection.type === 'BALL', 
                    'inverted' : collection.type === 'INVERTED BAT' }" 
                    [src]="collection.image">

                    <header class="box-heading">
                        <h5> {{ collection.name }} </h5>

                        <p> {{ collection.details }} </p>
                    </header>
                </ion-slide>
        </ion-slides>            
        </ng-container>
        
    </section>

</ion-content>
