<ion-content>

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

    <section class="upfold">        
        <h5> Just for you </h5>

        <h2> KXIP MERCH </h2>
        <h4> Jersey </h4>

        <img src="assets/home-team/KXIP-lion-white.svg" class="bg-image">

        <figure>
            <img src="https://static.iplt20.com/players/210/1125.png">
        </figure>
    </section>

    <div class="container">
        <section class="segments">
            <button class="active"> Fb. </button>
            <button> Tw </button>
            <button> In. </button>
        </section>

        <div class="product-container">
            <h2> You may like </h2>
            <ul class="product-list">
                <li *ngFor="let product of products">
                    <a [href]="product.link" target="_blank">
                        <figure>
                            <img [src]="product.image">                    
                        </figure>
                        <label> {{ product.name }} </label>
                        <p> &#8377; {{ product.price }} </p>
                    </a>
                </li>
            </ul>
        </div>

        <section class="categories">
            <button class="active"> Men </button>
            <button> Women </button>
            <button> Kids </button>
        </section>
    </div> 

</ion-content>
