D-Net

<div id="tm-main" class=" uk-section  uk-margin-small-top tm-middle">

  <div uk-grid uk-grid>

    <div class="tm-main uk-width-1-1@s uk-width-1-1@m  uk-width-1-1@l uk-row-first">

      <div class="uk-container uk-margin-top">

        <div class="uk-article-title custom-article-title">

          User Email Preferences for Claims Notifications

        </div>

        <div *ngIf="userValidMessage.length > 0 " class = "uk-alert uk-alert-danger " >

            User session is not valid. Please login again.

        </div>

        <errorMessages [status]="[status]" [type]="'notification preferences'"></errorMessages>

        <ul class="custom-accordion" uk-accordion>

          <!-- class="uk-open" -->

          <!-- uk-card uk-card-default uk-card-body -->

          <li *ngFor="let notification of notifications; let i=index" [class]="i==0 ? 'uk-open' : ''">

              <div class="uk-accordion-title">Email preferences for {{preferencesFor}}: <strong>{{notification.openaireName}}</strong></div>

              <div class="uk-accordion-content">

                <form class="uk-form-horizontal"><!-- [formGroup]="myForm"-->

                  <!--[ngClass]="{'has-error':!myForm.controls.notify.valid && myForm.controls.notify.dirty}"-->

                  <div class="uk-margin">

                    <div class="uk-form-label">Do you want to receive e-mail notifications?</div>

                    <!-- <div class="uk-form-controls uk-form-controls-text">

                      <label>Yes <input class="uk-radio" type="radio" name="radio2" [checked]="notification.notify" (click)="changeNotify(notification, true)"></label>

                      <label>No  <input class="uk-radio" type="radio" name="radio2" [checked]="!notification.notify" (click)="changeNotify(notification, false)"></label>

                    </div> -->

                    <div class="uk-form-controls uk-form-controls-text" data-uk-button-group>

                        <button *ngIf="notification.notify" class="uk-button uk-button-primary uk-button-small"

                                 data-uk-button>ON</button>

                        <button *ngIf="!notification.notify" class="uk-button-default uk-button-small"

                                (click)="changeNotify(notification, true)" data-uk-button>ON</button>

                        <button *ngIf="!notification.notify" class="uk-button uk-button-danger uk-button-small"

                                 data-uk-button>OFF</button>

                        <button *ngIf="notification.notify" class="uk-button-default uk-button-small"

                                (click)="changeNotify(notification, false)" data-uk-button>OFF</button>

                    </div>

                  </div>

                  <!-- [ngClass]="{'has-error':!myForm.controls.frequency.valid && myForm.controls.frequency.dirty}" -->

                  <div [class]="notification.notify ? 'uk-margin' : 'uk-margin cursor-not-allowed'">

                    <div class="uk-form-label" >How often?</div>

                    <div class="uk-form-controls">

                      <select [class]="notification.notify ? 'uk-select' : 'uk-select uk-disabled'" id="form-horizontal-select" class="uk-select" [(ngModel)]="notification.frequency" name="select_frequency">

                        <option [ngValue]="24" >Daily</option>

                        <option [ngValue]="48" >Every two days</option>

                        <option [ngValue]="168">Weekly</option>

                      </select>

                    </div>

                  </div>

                  <div *ngIf="showSaveResetButtons" class="uk-float-right">

                    <button type="submit" class="uk-button uk-button-primary" (click)="saveNotification(i)">Save Changes</button>

                    <button type="submit" class="uk-button" (click)="restoreNotification(i)">Reset</button>

                  </div>

                  <!-- <span class="uk-margin">

                    <button class="uk-width-1-1 uk-button uk-button-primary uk-button-small" type="submit" (click)="saveNotification(notifications, i)">Save</button>

                    <button class="uk-width-1-1 uk-button uk-button-small" (click)="restoreNotification(notifications, i)">Restore</button>

                  </span> -->

                  <!-- {{notification.notify}}  --  {{notification.frequency}} -->

                </form>

              </div>

          </li>

      </ul>

      <!-- {{notifications | json}} -->

      </div>

    </div>

  </div>

</div>