<ion-grid>
  <ion-row *ngIf="item.type === 'academic event'">
    <ion-col>
      <div class="ion-text-wrap">
        <h2 class="name">{{ item.name }}</h2>
        <p *ngIf="item.description">{{ item.description }}</p>
        <p *ngIf="item.academicTerms">{{ item.academicTerms[0].name }}</p>
        <ion-note>{{ item.type }} ({{ item.categories.join(', ') }})</ion-note>
      </div>
    </ion-col>
  </ion-row>
  <ion-row *ngIf="item.type === 'sport course'">
    <ion-col>
      <h2 class="name">{{ item.name }}</h2>
      <p *ngIf="item.description">{{ item.description }}</p>
      <p *ngIf="item.academicTerms">{{ item.academicTerms[0].name }}</p>
      <ion-note>{{ item.type }}</ion-note>
    </ion-col>
  </ion-row>
</ion-grid>
