<!--
  ~ 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-grid>
  <ion-row>
    <ion-col>
      <div class="ion-text-wrap">
        <ion-label class="title">{{ 'name' | thingTranslate: item }}</ion-label>
        <ng-container *ngIf="item.type !== 'floor'">
          <p class="title-sub" *ngIf="item.openingHours">
            <span>
              <stapps-opening-hours [openingHours]="item.openingHours"></stapps-opening-hours>
            </span>
          </p>
          <p>
            <ion-note *ngIf="item.categories && item.type !== 'building'; else onlyType">
              <ion-label> {{ 'categories' | thingTranslate: item | join: ', ' | titlecase }} </ion-label>
              <ion-label *ngIf="distance" class="distance">
                <ion-icon name="directions_walk"></ion-icon>
                {{ distance | metersLocalized }}
              </ion-label>
            </ion-note>
          </p>
          <ng-template #onlyType>
            <ion-note>
              <ion-label> {{ 'type' | thingTranslate: item | titlecase }} </ion-label>
              <ion-label *ngIf="distance" class="distance">
                <ion-icon name="directions_walk"></ion-icon>
                {{ distance | metersLocalized }}
              </ion-label>
            </ion-note>
          </ng-template>
        </ng-container>
        <p *ngIf="item.description">{{ 'description' | thingTranslate: item }}</p>
      </div>
    </ion-col>
    <ng-container *ngIf="item.type !== 'building'">
      <ion-col size="auto" class="in-place" *ngIf="item.inPlace">
        <ion-icon name="pin_drop"></ion-icon
        ><ion-label>{{ 'name' | thingTranslate: item.inPlace }}</ion-label>
      </ion-col>
    </ng-container>
  </ion-row>
</ion-grid>
