<ion-card>
  <ion-card-header>{{
    'data.detail.offers.TITLE' | translate | titlecase
  }}</ion-card-header>
  <ion-card-content>
    <div *ngFor="let offer of offers">
      <p *ngIf="offer.inPlace">
        <ion-icon name="location"></ion-icon>
        <a [routerLink]="['/data-detail', offer.inPlace.uid]">{{
          'name' | thingTranslate: offer.inPlace
        }}</a
        >,&nbsp;
        <span
          *ngIf="
            offer.availabilityRange.gt
              ? offer.availabilityRange.gt
              : offer.availabilityRange.gte
          "
        >
          <ion-icon name="calendar"></ion-icon>
          {{
            (offer.availabilityRange.gt
              ? offer.availabilityRange.gt
              : offer.availabilityRange.gte
            ) | amDateFormat: 'll'
          }}
        </span>
      </p>
      <ion-grid *ngFor="let group of objectKeys(offer.prices)">
        <ion-row>
          <ion-col>{{ group | titlecase }}</ion-col>
          <ion-col width-20 text-right>
            <p>
              {{
                offer.prices[group] | currency: 'EUR':'symbol':undefined:'de'
              }}
            </p>
          </ion-col>
        </ion-row>
      </ion-grid>
    </div>
  </ion-card-content>
</ion-card>
