<!--
  ~ Copyright (C) 2023 StApps
  ~ This program is free software: you can redistribute it and/or modify it
  ~ under the terms of the GNU General Public License as published by the Free
  ~ Software Foundation, version 3.
  ~
  ~ This program is distributed in the hope that it will be useful, but WITHOUT
  ~ ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or
  ~ FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License for
  ~ more details.
  ~
  ~ You should have received a copy of the GNU General Public License along with
  ~ this program. If not, see <https://www.gnu.org/licenses/>.
  -->

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