<ng-form name="addVacationForm">
    <div class=" col-sm-12 formheader">

        <h3 class="IR-Type" style="text-align: center; font-family: 'Amiri QuranWeb', normal;">ADD Vacation Request</h3>
    </div>
    <div class="inner-boxed-style clearfix">
        <br />
        <div class="form-group clearfix">
            <label class="requiredInput" ng-if="vacation.Title==null">*</label>
            <label class="control-label col-sm-3 lblSubject">Reason</label>
            <div class="col-sm-4">
                <input type="text" name="Title" class="form-control inputBox" ng-model="vacation.Title" required />

                <div class="row text-center" ng-messages="addVacationForm.Title.$error" ng-if="addVacationForm.$invalid && $submitted">
                    <span class="validation-msg control-label" ng-show="addVacationForm.Title.$error.required">{{vacationValidationMessage.vacationFieldRequired}}</span>
                </div>
            </div>
        </div>
        </br>

        <div class="form-group clearfix">

            <label class="control-label col-sm-3 lblSubject">Date From </label>

            <div class="col-sm-5">
                <input type="text" name="vacationFromDate" class="form-control inputBox" ng-model="vacation.FromDate" demo-datepicker required>
            </div>
            <span class="input-group-btn col-sm-1">
                <label class="requiredInput" ng-if="vacation.vacationFromDate==null">*</label>
            </span>
        </div>

        </br>

        <div class="form-group  clearfix">

            <label class="control-label col-sm-3 lblSubject">Date To</label>

            <div class="col-sm-5">
                <input type="text" name="vacationToDate" class="form-control inputBox"
                       ng-model="vacation.ToDate" demo-datepicker compare-with-start-date="{{vacation.FromDate}}" required>
            </div>
            <span class="input-group-btn col-sm-1">
                <label class="requiredInput" ng-if="vacation.vacationToDate==null">*</label>
            </span>

            <div class="row text-center">
                <div class="row text-center" ng-messages="addVacationForm.vacationToDate.$error">
                    <span class="validation-msg control-label requiredInput" ng-show="addVacationForm.vacationToDate.$error.checkDate">{{vacationValidationMessage.vacationCheckDate}}</span>
                </div>
            </div>
        </div>
        
        </br>

        <div class="form-group clearfix">
            <label class="requiredInput" ng-if="vacation.VacationType==null">*</label>
            <label class="control-label col-sm-3 lblSubject">Vacation Type  </label>

            <div class="col-sm-8">
                <div class="drop-down no-padding">
                    <select class="form-items-bg form-control" name="VacationType" ng-model="vacation.EmployeeVacationType"
                            ng-options="r.Title for r in vacationTypeList track by r.Id| orderBy:'Title'" required>
                        <option value="">please select..</option>
                    </select>
                </div>

            </div>
        </div>


        <div class="control-group col-sm-12">
            <input type="button" class="btn btn-primary post-btn" value="Send" ng-click="$submitted=true;addEmployeeVacation(vacation)" ng-disabled="buttonDisabled" />
            <input type="reset" class="btn btn-sm btn-info" value="Clear" ng-disabled="buttonDisabled" />
            <input type="button" class="btn btn-sm btn-danger" value="Cancel" ng-click="CancelAddVacation(vacation)" ng-disabled="buttonDisabled" />
        </div>
    </div>
</ng-form>