<div bsModal id="createOrEditModal" #createOrEditModal="bs-modal"  class="modal fade" tabindex="-1" role="dialog" aria-labelledby="createOrEditModal" aria-hidden="true" (onShown)="onShown()">
<div class="modal-dialog modal-md">
   <div class="modal-content">
      <form *ngIf="active" #userForm="ngForm" novalidate class="form-validation" (ngSubmit)="save()" role="form">
      <div class="modal-header">
         <h4 class="modal-title">
            <span *ngIf="create">{{'CreateNewTemplate' | localize}}</span>
            <span *ngIf="!create">{{'Update Template' | localize}}</span>
         </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>{{"Name" | localize}} *</label>
            <input type="text" name="txtTemplateName" class="form-control" #txtTemplateNameInput="ngModel" [(ngModel)]="txtTemplateName" required>
            <validation-messages [formCtrl]="txtTemplateNameInput"></validation-messages>
         </div>
         <div class="form-group">
            <label>{{"Location" | localize}} *</label>
            <select class="form-control kt-select2" data-placeholder="Select Location" id="txtLocation" tabindex="-1" aria-hidden="true" name="txtLocation">
                {{id == '' ? '<option></option>' : ''}}
               <option  *ngFor="let location of locations" value="{{location.id}}" [selected]="location.id === txtLocation">{{location.name}}</option>
            </select>
         </div>
         <div class="form-group">
            <label>{{"Template Type" | localize}} *</label>
            <select class="form-control kt-select2" data-placeholder="Select Template Type" id="txtTemplateType" tabindex="-1" aria-hidden="true" name="txtTemplateType">
                {{id == '' ? '<option></option>' : ''}}
               <option  *ngFor="let templateType of templateTypes" value="{{templateType.id}}" [selected]="templateType.id === txtTemplateType">{{templateType.name}}</option>
            </select>
           <!--  <validation-messages [formCtrl]="txtTemplateType"></validation-messages> -->
         </div>
         
         

         <div class="row">
             <div class="col-sm-6">
                  <label>{{"Start Time" | localize}} *</label> 
                  <timepicker [showSpinners]="true" [(ngModel)]="startTime" name="startTime" id="startTime"></timepicker>
             </div>
             <div class="col-sm-6">
                 <label>{{"End Time" | localize}} *</label> 
                 <timepicker [(ngModel)]="endTime" [showSpinners]="true" name="endTime" id="endTime"></timepicker>
             </div>
         </div>
         
      </div>
      <div class="modal-footer">
         <button [disabled]="saving" type="button" class="btn btn-secondary btn-elevate btn-pill" (click)="close()">{{"Cancel" | localize}}</button>
         <button type="button" class="btn btn-primary btn-elevate btn-pill" [disabled]="!userForm.form.valid" [buttonBusy]="saving" [busyText]="l('SavingWithThreeDot')" (click)="saveData()"><i class="fa fa-save"></i> <span>{{"Save" | localize}}</span></button>
      </div>
      </form>
   </div>
</div>
</div>