<nb-card class="nbCard" status="success">
  <nb-card-header>
    {{isAdding?'Add':"Edit"}}
  </nb-card-header>
  <nb-card-body>
    <div class="row">
      <ng-container *ngFor="let col of columns">
        <div [ngClass]="col.editingFieldWidth < 1 ? 'col-md-6' : ('col-md-' + col.editingFieldWidth)"
          *ngIf="col.editableType == 'readOnly' || col.editableType == 'editable'">
          <div class="form-group">
            <label class="label" *ngIf="col.type !== 'checkbox'">
              {{col.title}}
            </label>
            <ng-container [ngSwitch]="col.type">
              <rbj-currency-input *ngSwitchCase="'number'" [(ngModel)]="editingInstance[col.name]" [precision]="0"
                zeroExpression="0" [readonly]="col.editableType == 'readOnly'"></rbj-currency-input>
              <rbj-currency-input *ngSwitchCase="'currency'" [(ngModel)]="editingInstance[col.name]"
                [readonly]="col.editableType == 'readOnly'"></rbj-currency-input>
              <rbj-drop-down *ngSwitchCase="'dropdown'" [(ngModel)]="editingInstance[col.name]"
                [source]="col.dropdownSource" [disabled]="col.editableType == 'readOnly'"></rbj-drop-down>
              <textarea nbInput fullWidth *ngSwitchCase="'multiline'" [(ngModel)]="editingInstance[col.name]"
                [readonly]="col.editableType == 'readOnly'"></textarea>
              <rbj-date-input *ngSwitchCase="'date'" [(ngModel)]="editingInstance[col.name]"
                [disabled]="col.editableType == 'readOnly'"></rbj-date-input>
              <nb-checkbox *ngSwitchCase="'checkbox'" [(checked)]="editingInstance[col.name]"
                [disabled]="col.editableType == 'readOnly'">{{col.title}}</nb-checkbox>
              <input nbInput fullWidth *ngSwitchDefault [(ngModel)]="editingInstance[col.name]"
                [readonly]="col.editableType == 'readOnly'">
            </ng-container>
          </div>
        </div>
      </ng-container>

    </div>

    <nb-alert status="danger" *ngIf="validationMsg">
      {{validationMsg}}
    </nb-alert>

  </nb-card-body>
  <nb-card-footer>
    <div class="buttons-row">
      <button nbButton hero status="primary" size="small" (click)="submit()">Save</button>
      <button nbButton hero status="danger" size="small" class="float-right" (click)="cancel()">Cancel</button>
    </div>

  </nb-card-footer>
</nb-card>