<ion-grid>
  <ion-row>
    <ion-col>
      <div class="ion-text-wrap">
        <ion-label>{{ 'name' | thingTranslate: item }}</ion-label>
        <ng-container *ngIf="item.type !== 'floor'">
          <p>
            <ion-note *ngIf="item.openingHours">
              {{ item.openingHours | openingHours }}
            </ion-note>
          </p>
          <p>
            <ion-note
              *ngIf="item.categories && item.type !== 'building'; else onlyType"
            >
              <ul>
                <li>
                  {{
                    'categories' | thingTranslate: item | join: ', ' | titlecase
                  }}
                </li>
                <li *ngIf="distance">
                  <ion-icon name="walk"></ion-icon>
                  {{ distance | metersLocalized }}
                </li>
              </ul>
            </ion-note>
          </p>
          <ng-template #onlyType>
            <ion-note>
              <ul>
                <li>
                  {{ 'type' | thingTranslate: item }}
                </li>
                <li *ngIf="distance">
                  <ion-icon name="walk"></ion-icon>
                  {{ distance | metersLocalized }}
                </li>
              </ul>
            </ion-note>
          </ng-template>
        </ng-container>
        <p *ngIf="item.description">
          {{ 'description' | thingTranslate: item }}
        </p>
      </div>
    </ion-col>
    <div *ngIf="item.type !== 'building'">
      <ion-col width-20 text-right *ngIf="item.inPlace">
        <ion-icon name="location"></ion-icon
        >{{ 'name' | thingTranslate: item.inPlace }}
      </ion-col>
    </div>
  </ion-row>
</ion-grid>
