<div @flyInOut>
    <div class="d-flex">
        <div class="flex-fill">
            <h1 class="mb-1">{{ title }} <span class="ms-1 fs-3 text-muted">({{ productsCount }})</span></h1>
        </div>
        <span class="flex-spacer"></span>
        <div class="align-self-center me-2 text-end">

        </div>
    </div>
    <mat-divider class="my-3"></mat-divider>
    <app-list-errors [errors]="errors"></app-list-errors>
    <div class="d-flex">
        <div class="fs-4" [innerHtml]="description"></div>
    </div>
    <mat-divider class="my-3"></mat-divider>
    <div class="row">
    @for (product of products; track product) {
        <div class="col-xs-12 col-sm-6 col-md-4 col-xl-3">
            <mat-card class="mb-3">
                <mat-card-header class="d-flex rounded-top py-2 px-4">
                    <div class="flex-fill">
                        <mat-card-title>
                            {{ product.name }}
                        </mat-card-title>
                    </div>
                    <span class="flex-spacer"></span>
                    <div class="align-self-center me-2 text-end">
                        <span class="fs-4">Sachet {{ product.weightNet | number : '1.0' }} g</span>
                    </div>
                </mat-card-header>
                <mat-card-content>
                    <p class="card-text">
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris sodales ultrices dolor, ullamcorper cursus mauris.<br />
                        Nam risus metus, porttitor eget lacinia nec, mollis ac augue. In hac habitasse platea dictumst.<br />
                        Aliquam vel volutpat diam. Integer sed nulla posuere, commodo augue ac, tincidunt.
                    </p>
                    <mat-card-subtitle>
                        {{ product.productCategories[0].name }} {{ product.brand.name }}
                    </mat-card-subtitle>
                    <div class="align-self-center me-2 text-end">
                        <span class="fs-4 fw-medium text-primary">{{ (product.priceRetail! * (1 + (product.priceTaxe! / 100))) | number : '1.2-2' }} € TTC</span>
                        <button mat-flat-button class="ms-2" color="teal" type="button">Ajouter au panier</button>
                    </div>
                </mat-card-content>
            </mat-card>
        </div>
    }
    </div>
</div>
