<ion-header>
  <ion-toolbar class="header-toolbar">
      <ion-title color="light">{{ 'worklist, worklist-setting' | translate}} </ion-title>
      <ion-buttons slot="primary">
          <ion-button style="background: none !important;" (click)="dismiss()">
              <ion-icon slot="icon-only" name="close"></ion-icon>
          </ion-button>
      </ion-buttons>
  </ion-toolbar>
</ion-header>

<ion-content>
  <div style="padding: 5px;">
    <h3 style="font-weight: bold;">{{ 'worklist, turn-on-notification' | translate}}</h3>
  </div>
  <br>

  <ion-list>
    <ion-item>
      <ion-label>
        <p style="color: black; padding: 5px; font-size: 16px; font-family: 'Poppins'; font-weight: bolder;">item type</p>
      </ion-label>
      <p style="color: black; padding: 5px; font-size: 16px; font-family: 'Poppins'; font-weight: bolder;">FYA</p>
      &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
      <p style="color: black; padding: 5px; font-size: 16px; font-family: 'Poppins'; font-weight: bolder;">FYI</p>
    </ion-item>
    <ion-item *ngFor="let data of notificationList">
      <ion-label>
        <p style="color: black; padding: 5px; font-size: 16px; font-family: 'Poppins'; padding-bottom: 10px;">{{data.ITEM_TYPE}}</p>
      </ion-label>
      <ion-toggle (ionChange)="chnageToggle(data, 'FYA', data.FYA_ENABLED_FALG)" [checked]="data.FYA_ENABLED_FALG === 'Y'"></ion-toggle>
      &nbsp;&nbsp;&nbsp;
      <ion-toggle (ionChange)="chnageToggle(data, 'FYI', data.FYI_ENABLED_FLAG)" [checked]="data.FYI_ENABLED_FLAG === 'Y'"></ion-toggle>
    </ion-item>
    <br>
  </ion-list>
</ion-content>

<ion-footer>
  <ion-button (click)="saveChanges()" style="font-size: 16px !important; width:371px; --background: #259CB8; background: white;"  expand="block">{{ 'worklist, save-changes' | translate}}</ion-button>
</ion-footer>