<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">{{'CreateTimesheet' | localize}}</span>
                     <ng-template #isUpdate>
                        <span>{{'EditTimeSheet' | 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 ===  this.timesheet.creatorUserId">
                              {{user.name}}
                           </option>
                        </select>

                     </div>
                  
                     <div class="form-group">
                        <label>{{"LoginDate" | localize}} *</label> 
                        <input type="text"
                           required
                           placeholder="Enter Login Date"
                           class="form-control"
                           name="loginDate"
                           [(ngModel)]="loginDate"
                        bsDatepicker>
                     </div>
                     <div class="form-group">
                           <label for="loginTime">{{"LoginTime" | localize}} *</label>
                           <kendo-timepicker [value]="DefaultDateValue"
                              name="loginTime"
                              required
                              [(ngModel)]="timesheet.loginTime" class="form-control"
                              #loginTime="ngModel" placeholder="Enter Login Time"> </kendo-timepicker>
                           <!-- <div class="col-lg-10 col-md-9 col-sm-8">
                              <timepicker 
                              name="loginTime"
                              required
                              [(ngModel)]="timesheet.loginTime" 
                              [showSpinners]="true" 
                              #loginTime="ngModel"></timepicker>
                           </div> -->
                           <validation-messages [formCtrl]="loginTime"></validation-messages>
                     </div>

                     <div class="form-group">
                           <label>{{"LogoutDate" | localize}} *</label> 
                           <input type="text"
                              required
                              placeholder="Enter Logout Date"
                              class="form-control"
                              name="logoutDate"
                              [(ngModel)]="logoutDate"
                           bsDatepicker>
                        </div>
                        <div class="form-group">
                           <label for="logoutTime">{{"LogoutTime" | localize}} *</label>
                           <kendo-timepicker 
                              name="logoutTime"
                              required
                              [(ngModel)]="timesheet.logoutTime" class="form-control"
                              #logoutTime="ngModel" placeholder="Enter Logout Time"></kendo-timepicker>  
                           <!-- <div class="col-lg-10 col-md-9 col-sm-8">
                              <timepicker 
                              name="logoutTime"
                              required
                              [(ngModel)]="timesheet.logoutTime" 
                              [showSpinners]="true" 
                              #logoutTime="ngModel"></timepicker>
                           </div> -->
                           <validation-messages [formCtrl]="logoutTime"></validation-messages>
                        </div>
               </div>
   
               <div class="modal-footer">
                  <button [disabled]="saving" type="button" class="btn btn-default btn-elevate btn-pill" (click)="close()">{{"Cancel" | localize}}</button>
                  
                  <button type="button" class="btn btn-primary btn-elevate btn-pill" [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>
   