<section class="esh-catalog-hero">
    <div class="container">
        <!--<img class="esh-catalog-title" src="../../images/main_banner_text.png" />-->
    </div>
</section>

<section class="esh-catalog-filters">
    <div class="container">
        <label class="esh-catalog-label" data-title="brand">
            <select class="esh-catalog-filter" (change)="onBrandFilterChanged($event, $event.target.value)">
                <option *ngFor="let brand of brands" [value]="brand.id">{{brand.brand}}</option>
            </select>
        </label>
        <label class="esh-catalog-label" data-title="type">
            <select class="esh-catalog-filter" (change)="onTypeFilterChanged($event, $event.target.value)">
                <option *ngFor="let type of types" [value]="type.id">{{type.type}}</option>
            </select>
        </label>
        <img class="esh-catalog-send" (click)="onFilterApplied($event)" src="../../images/arrow-right.svg" />
    </div>
</section>

<div class="container">
    <div *ngIf="catalog?.data.length > 0">
        <esh-pager [model]="paginationInfo" (changed)="onPageChanged($event)"></esh-pager>

        <div class="esh-catalog-items row">
            <div class="esh-catalog-item col-md-4"
                 *ngFor="let item of catalog?.data">

                <img class="esh-catalog-thumbnail" src="{{item.pictureUri}}" />
                <button [ngClass]="{'esh-catalog-button': true, 'is-disabled': !authenticated}" (click)="addToCart(item)">
                    [ ADD TO CART ]
                </button>

                <div class="esh-catalog-name">
                    <span>{{item.name}}</span>
                </div>
                <div class="esh-catalog-price">
                    <span>{{item.price}}</span>
                </div>
            </div>
        </div>

        <esh-pager [model]="paginationInfo" (changed)="onPageChanged($event)"></esh-pager>
    </div>
    <div *ngIf="catalog?.data.length == 0">
        <span>THERE ARE NO RESULTS THAT MATCH YOUR SEARCH</span>
    </div>
</div>

