<ion-grid>
  <ion-row>
    <ion-col>
      <stapps-simple-card
        [title]="'categories' | propertyNameTranslate: item | titlecase"
        [content]="'categories' | thingTranslate: item"
      ></stapps-simple-card>
    </ion-col>
    <ion-col>
      <ion-card *ngIf="item.characteristics">
        <ion-card-header>{{
          'characteristics' | propertyNameTranslate: item | titlecase
        }}</ion-card-header>
        <ion-card-content
          *ngFor="
            let characteristic of 'characteristics' | thingTranslate: item
          "
        >
          <p>
            <img
              *ngIf="characteristic.image"
              [src]="characteristic.image"
              alt=""
            /><span> {{ characteristic.name }}</span>
          </p>
        </ion-card-content>
      </ion-card>
    </ion-col>
  </ion-row>
</ion-grid>

<stapps-offers-detail
  *ngIf="item.offers"
  [offers]="item.offers"
></stapps-offers-detail>
<stapps-simple-card
  *ngIf="item.additives"
  [title]="'additives' | propertyNameTranslate: item | titlecase"
  [content]="'additives' | thingTranslate: item | join: ', '"
>
</stapps-simple-card>
<ion-card *ngIf="item.nutrition">
  <ion-card-header>{{
    'data.types.dish.detail.AVG_NUTRITION_INFO' | translate
  }}</ion-card-header>
  <ion-card-content>
    <ion-grid>
      <ion-row *ngIf="item.nutrition.calories">
        <ion-col>{{ 'data.types.dish.detail.CALORIES' | translate }}:</ion-col>
        <ion-col width-20 text-right>
          {{ item.nutrition.calories | numberLocalized }} kcal
        </ion-col>
      </ion-row>
      <ion-row *ngIf="item.nutrition.fatContent">
        <ion-col>{{ 'data.types.dish.detail.FAT_TOTAL' | translate }}:</ion-col>
        <ion-col width-20 text-right>
          {{ item.nutrition.fatContent | numberLocalized }} g
          <span *ngIf="item.nutrition.saturatedFatContent"
            >({{ 'data.types.dish.detail.FAT_SATURATED' | translate }}:
            {{ item.nutrition.saturatedFatContent | numberLocalized }} g)</span
          >
        </ion-col>
      </ion-row>
      <ion-row *ngIf="item.nutrition.carbohydrateContent">
        <ion-col
          >{{ 'data.types.dish.detail.CARBOHYDRATE' | translate }}:</ion-col
        >
        <ion-col width-20 text-right>
          {{ item.nutrition.carbohydrateContent | numberLocalized }} g
          <span *ngIf="item.nutrition.sugarContent"
            >({{ 'data.types.dish.detail.SUGAR' | translate }}:
            {{ item.nutrition.sugarContent | numberLocalized }} g)</span
          >
        </ion-col>
      </ion-row>
      <ion-row *ngIf="item.nutrition.saltContent">
        <ion-col>{{ 'data.types.dish.detail.SALT' | translate }}:</ion-col>
        <ion-col width-20 text-right>
          {{ item.nutrition.saltContent | numberLocalized }} g
        </ion-col>
      </ion-row>
      <ion-row *ngIf="item.nutrition.proteinContent">
        <ion-col>{{ 'data.types.dish.detail.PROTEIN' | translate }}:</ion-col>
        <ion-col width-20 text-right>
          {{ item.nutrition.proteinContent | numberLocalized }} g
        </ion-col>
      </ion-row>
    </ion-grid>
  </ion-card-content>
</ion-card>
