<form (ngSubmit)="confirm()" #inputForm="ngForm">
  <nb-card class="alertCard">

    <nb-card-body>
      <div class="icon {{config.icon}}" *ngIf="config.icon" [ngSwitch]="config.icon">

        <div class="icon-content" *ngSwitchCase="'question'">
          ?
        </div>
        <div class="icon-content" *ngSwitchCase="'warning'">
          !
        </div>
        <div class="icon-content" *ngSwitchCase="'info'">
          i
        </div>

        <div class="icon-content" *ngSwitchCase="'error'">
          <nb-icon pack='eva' icon='close-outline'></nb-icon>
        </div>
        <div *ngSwitchDefault></div>
      </div>

      <div class="title" *ngIf="config.title" [innerHTML]="config.title">
      </div>
      <div class="content" *ngIf="config.text" [innerHTML]="config.text">
      </div>
      <div class="inputArea mt-2">
        <div class="form-group" *ngIf="config.inputType" [ngSwitch]="config.inputType">

          <textarea id='msgInputBox' name='inputBox' nbInput fullWidth [(ngModel)]="config.inputValue" rows="5"
            [mask]="config.inputMask" required *ngSwitchCase="'textarea'"></textarea>
          <input id='msgInputBox' name='inputBox' nbInput fullWidth [(ngModel)]="config.inputValue"
            [mask]="config.inputMask" required *ngSwitchCase="'string'">
          <input id='msgInputBox' name='inputBox' nbInput fullWidth [(ngModel)]="config.inputValue" type="number"
            required *ngSwitchCase="'number'">
          <input id='msgInputBox' name='inputBox' nbInput fullWidth [(ngModel)]="config.inputValue"
            [mask]="config.inputMask" type="password" required *ngSwitchCase="'password'"
            nbTooltip="{{config.inputTooltip}}" nbTooltipTrigger="noop" nbTooltipPlacement="top"
            nbTooltipStatus="danger">

        </div>

      </div>
    </nb-card-body>
    <nb-card-footer *ngIf="config.showConfirmButton||config.showCancelButton||config.showCloseButton">
      <button type="submit" #buttonSubmit [disabled]="!inputForm.form.valid" nbButton hero
        class="px-4 g-font-size-16 btnOk" [ngClass]="{'rtl': rtl}" status="{{config.confirmButtonColor}}"
        *ngIf="config.showConfirmButton" [initFocus]="config.confirmButtonFocus">
        {{config.confirmButtonText}}
      </button>

      <button nbButton hero class="px-4 g-font-size-16 btnCancel" status="{{config.cancelButtonColor}}"
        *ngIf="config.showCancelButton" [ngClass]="{'rtl': rtl}" type="button" (click)="cancel()"
        [initFocus]="config.cancelButtonFocus">{{config.cancelButtonText}}</button>

      <button nbButton hero class="px-4 g-font-size-16 btnClose" status="{{config.closeButtonColor}}" type="button"
        [ngClass]="{'rtl': rtl}" *ngIf="config.showCloseButton" (click)="close()"
        [initFocus]="config.closeButtonFocus">{{config.closeButtonText}}</button>
    </nb-card-footer>
  </nb-card>
</form>