<div class="mb-4 mt-2" aria-live="polite">
  <!--    Consent for notifications-->
  <p class="heading heading--sm h5">{{ 'NotificationConsent.Header' | translate }}</p>
  <div class="ml-4 mb-3">
    <input
      type="checkbox"
      class="form-check-input"
      id="notificationCheckbox"
      [checked]="showAcceptButton"
      (change)="this.showAcceptButton = !this.showAcceptButton" />
    <label class="form-check-label" for="notificationCheckbox">
      {{ 'NotificationConsent.CheckboxText' | translate }}
    </label>
  </div>
  <button *ngIf="showAcceptButton" type="submit" class="btn btn-primary btn-sm mr-4 pl-3 pr-3" (click)="onSubmit()">
    {{ 'NotificationConsent.AcceptButton' | translate }}
  </button>
  <button
    *ngIf="!showAcceptButton"
    type="button"
    [attr.aria-label]="'NotificationConsent.Required' | translate"
    [attr.aria-disabled]="true"
    class="btn btn-secondary disabled btn-sm mr-4 pl-3 pr-3">
    {{ 'NotificationConsent.AcceptButton' | translate }}
  </button>
  <button class="btn btn-danger btn-sm pl-3 pr-3" type="button" (click)="onCancel()">
    {{ 'Action.Cancel' | translate }}
  </button>
</div>
