<ion-header>
  <ion-toolbar>
    <ion-buttons slot="start">
      <pwa-back-button></pwa-back-button>
    </ion-buttons>
    <ion-title>Release Notes</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content>
  <text-spinner *ngIf="loading; else loaded" text="Loading Release Notes"></text-spinner>

  <ng-template #loaded>
    <div style="margin: 0px;" *ngFor="let note of marketplaceService.releaseNotes[pkgId] | keyvalue : asIsOrder">
      <ion-button 
        (click)="setSelected(note.key)" 
        expand="full" color="light" 
        style="height: 50px; margin: 1px;" 
        [class]="selected === note.key ? 'ion-activated' : ''"
      >
        <p style="position: absolute; left: 10px;">{{ note.key | displayEmver }}</p>
      </ion-button>
      <ion-card
        [id]="note.key"
        [ngStyle]="{
          'max-height': selected === note.key ? getDocSize(note.key) : '0px',
          'transition': 'max-height 0.2s ease-out'
        }"
        class="panel"
        color="light" >
        <ion-text id='release-notes' [innerHTML]="note.value | markdown"></ion-text>
      </ion-card>
    </div>
  </ng-template>
</ion-content>
