events-view.html

<ion-header>
  <ion-navbar>
    <ion-title>{{ event.title }}</ion-title>
  </ion-navbar>
</ion-header>
<ion-content class="events">
  <ion-list>
    <ion-item class="title-background"
      [ngStyle]="{'background-image': 'url(' + event.coverUrl + ')'}">
      <p class="title">{{ event.title }}</p>
      <div *ngIf="event.isBooked" class="status">
        <div class="tag">{{ (event.isAttended) ? 'Attended' : 'Booked' }}</div>
      </div>
    </ion-item>
  </ion-list>
  <ion-list class="details">
    <ion-row>
      <ion-col col-8 class="info">
        <p><strong>{{ event.startDisplay }}</strong></p>
        <p class="lighter">{{ event.location }}</p>
        <p class="lighter">{{ event.activity.name }}</p>
      </ion-col>
    </ion-row>
  </ion-list>
  <ion-list no-lines>
    <ion-item text-wrap>
      {{ event.description || 'No description available.' }}
    </ion-item>
  </ion-list>
  <ion-list inset class="download" *ngIf="event.files && event.files.length > 0">
    <button ion-item (click)="gotoDownload(event)" detail-push>{{ 'GENERAL.DOWNLOAD' | translate }}</button>
  </ion-list>
</ion-content>
<ion-footer class="events">
  <ion-toolbar>
    <p class="lighter spacer-left">{{ bookingStatus }}</p>
    <ion-buttons end *ngIf="loadings.checkin">
      <ion-spinner></ion-spinner>
    </ion-buttons>

    <ion-buttons end *ngIf="!loadings.checkin">
      <button ion-button *ngIf="!event.isBooked" class="book-btn" (click)="book(event)">
        {{ 'EVENTS.BOOK' | translate }}
      </button>

      <button ion-button *ngIf="event.isBooked && hasReference(event) && allowCheckIn(event)" class="checkin-btn" (click)="checkin(event)">
        <span *ngIf="completedSubmissions">
          {{ 'EVENTS.VIEWCHECKIN' | translate }}
        </span>
        <span *ngIf="!completedSubmissions">
          {{ 'EVENTS.CHECKIN' | translate }}
        </span>
      </button>

      <button ion-button *ngIf="!completedSubmissions && !event.isAttended && event.isBooked && hasReference(event) && allowCheckIn(event)" class="cancel-btn" outline (click)="cancelBooking(event)">
          {{ 'EVENTS.CANCELBOOKING' | translate }}
      </button>
    </ion-buttons>
  </ion-toolbar>
</ion-footer>