martinmicunda/employee-scheduling-ui

<form class="form-horizontal form-validation" name="documentForm" role="form" novalidate>
    <div class="modal-header">
        <button type="button" class="close" ng-click="vm.cancel()">×</button>
        <h4 class="modal-title">
            <span ng-if="!vm.document.id">Add</span><span ng-if="vm.document.id">Edit</span> Folder
        </h4>
    </div>
    <div class="modal-body form-wizard">
        <alert-danger has-error="vm.hasError" error-message="vm.errorMessage"></alert-danger>
        <div class="form-group required">
            <label class="control-label col-sm-4">Name</label>
            <div class="col-sm-5">
                <input name="name" type="text" ng-model="vm.document.name" class="form-control" ng-maxlength="60" required>
                <div ng-if="documentForm.$submitted" ng-messages="documentForm.name.$error">
                    <div ng-message="required" class="error">This field is required.</div>
                    <div ng-message="maxlength" class="error">This field text is too long (max 60 characters).</div>
                </div>
            </div>
        </div>
        <div class="form-group">
            <label class="control-label col-sm-4">Lock the folder?</label>
            <div class="col-sm-5">
                <div class="checkbox">
                    <input id="isLocked" name="isLocked" type="checkbox" ng-model="vm.document.isLocked" class="ml0" />
                    <label for="isLocked"></label>
                </div>
            </div>
        </div>

        <div class="form-group mb0" ng-show="vm.document.isLocked">
            <div class="col-sm-5">
                <i><label class="control-label">who has not access</label></i>
                <select name="selectedEmployeeWithoutAccess" multiple class="form-control" ng-model="vm.selectedEmployeeWithoutAccess" ng-options="employee.id as employee.firstName + ' ' + employee.lastName for employee in vm.employeesWithoutAccess | orderBy:'firstName'"></select>
            </div>
            <div class="col-sm-2 text-center mt95">
                <span class="center-block"><a ng-click="vm.addAccess()"><i class="fa fa-long-arrow-right fa-2x"></i></a></span>
                <a ng-click="vm.removeAccess()"><i class="fa fa-long-arrow-left fa-2x"></i></a>
            </div>
            <div class="col-sm-5">
                <i><label class="control-label">who has access</label></i>
                <select name="selectedEmployeeWithAccess" multiple class="form-control" ng-model="vm.selectedEmployeeWithAccess" ng-options="employee.id as employee.firstName + ' ' + employee.lastName for employee in vm.employeesWithAccess | orderBy:'firstName'"></select>
            </div>
        </div>
    </div>
    <div class="modal-footer">
        <button type="button" ng-click="vm.cancel()" class="btn btn-sm btn-white">Close</button>
        <jp-ng-bs-animated-button class="btn btn-sm btn-success" ng-click="vm.save(documentForm)" is-submitting="vm.isSubmitting" result="vm.result" options="vm.saveButtonOptions"></jp-ng-bs-animated-button>
    </div>
</form>