<ion-header>
  <ion-toolbar>
    <ion-buttons slot="start">
      <ion-button (click)="dismiss()">
        <ion-icon slot="icon-only" name="close"></ion-icon>
      </ion-button>
    </ion-buttons>
    <ion-title>
      {{ spec.name }}
    </ion-title>
    <ion-buttons slot="end">
      <ion-button slot="end" fill="clear" (click)="toggleSelectAll()">
        {{ selectAll ? 'All' : 'None' }}
      </ion-button>
    </ion-buttons>
  </ion-toolbar>
</ion-header>

<ion-content>
  <ion-item-group>
    <ion-item *ngFor="let option of options | keyvalue : asIsOrder">
      <ion-label>{{ spec.spec['value-names'][option.key] }}</ion-label>
      <ion-checkbox slot="end" [(ngModel)]="option.value" (click)="toggleSelected(option.key)"></ion-checkbox>
    </ion-item>
  </ion-item-group>
</ion-content>

<ion-footer>
  <ion-toolbar>
    <ion-buttons slot="end" class="ion-padding-end">
      <ion-button fill="outline" (click)="save()" class="enter-click">
        Done
      </ion-button>
    </ion-buttons>
  </ion-toolbar>
</ion-footer>
