<div bsModal #createOrEditModal="bs-modal" (onShown)="onShown()" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="createOrEditModal" aria-hidden="true" [config]="{backdrop: 'static', keyboard: !saving}">
   <div class="modal-dialog modal-md">
      
      <div class="modal-content">
         <form *ngIf="active" #form="ngForm" novalidate (ngSubmit)="save()">
            <div class="modal-header">
               <h4 class="modal-title">
                  <span *ngIf="isCreate; else isUpdate">Create Review</span>
                  <ng-template #isUpdate>
                     <span>{{'EditReview' | localize}}</span>
                  </ng-template>
               </h4>
               <button type="button" class="close" (click)="close()" [attr.aria-label]="l('Close')" [disabled]="saving">
                  <span aria-hidden="true">&times;</span>
               </button>
            </div>

            <div class="modal-body">

               <div class="form-group">
                  
                  <label>{{"Employee" | localize}} *</label>

                  <select class="form-control kt-select2" [(ngModel)]="userInput" data-placeholder="Select Employee" id="userInput" name="employee" tabindex="-1" aria-hidden="true">
                     {{id == '' ? '<option></option>' : ''}}
                     <option *ngFor="let user of users" value="{{user.id}}" [selected]="user.id ==  userInput">
                        {{user.name}}
                     </option>
                  </select>

               </div>

               <div class="form-group">
                  <label for="txtReview">{{"Review" | localize}} *</label>
                  <textarea placeholder="Enter content of incident"
                     class="form-control"
                     name="txtReview"
                     [(ngModel)]="employeeReview.content"></textarea>
               </div>

               <div class="form-group">
                  <label for="numRating">{{"Rating" | localize}} *</label>
                  <input type="number" class="form-control" name="numRating" [(ngModel)]="employeeReview.rating" placeholder="Enter rating">
               </div>
            </div>

            <div class="modal-footer">
               <button [disabled]="saving" type="button" class="btn btn-default btn-pill btn-elevate" (click)="close()">{{"Cancel" | localize}}</button>
               
               <button type="button" class="btn btn-primary btn-pill btn-elevate" [disabled]="!form.form.valid" [buttonBusy]="saving" [busyText]="l('SavingWithThreeDot')" (click)="isCreate ? create(): update()">
                  <i class="fa fa-save"></i> <span>{{"Save" | localize}}</span>
               </button>
            </div>
         </form>
         
      </div>
   </div>
</div>
