<form ng-submit="ok()" novalidate name="groupForm">
    <div class="modal-header">
        <h4 class="modal-title">
            <span>{{ header | translate }}</span>
        </h4>
    </div>
    <div class="modal-body">
        <div class="form-group" ng-if="addLdapGroupModal">
            <label>{{ 'admin.security.organizationalHierarchy.createGroupDialog.selectDirectory' | translate }}</label>
            <span class="required-asterisk">*</span>
            <select id="selectDirectories" class="form-control" name="config" ng-model="selectedConfig.directory"
                    ng-options="ds.id for ds in directoryServers" required disabled>
            </select>
        </div>
        <div class="form-group" ng-class="{ 'has-error' : error }">
            <label>{{ 'admin.security.organizationalHierarchy.createGroupDialog.name' | translate }}</label>
            <span class="required-asterisk">*</span>
            <input type="text" ng-model="group.name" class="form-control" maxlength="{{maxLdapGroupNameLength}}"
                    ng-disabled="!selectedConfig.directory.enabled && addLdapGroupModal" placeholder="{{ 'admin.security.organizationalHierarchy.createGroupDialog.namePlaceholder'
                   | translate }}" required>
            <p class="help-block" ng-show="error">
                {{ error }} </p>
            <p class="text-danger" ng-if="selectedConfig.directory.enabled == false">
                {{ 'admin.security.organizationalHierarchy.createGroupDialog.disabledGroupWarning' | translate }} </p>
        </div>
        <div class="form-group">
            <label>{{ 'admin.security.organizationalHierarchy.createGroupDialog.description' | translate }}</label>
            <textarea type="text" ng-model="group.description" class="form-control"
                    ng-disabled="!selectedConfig.directory.enabled && addLdapGroupModal" placeholder="{{ 'admin.security.organizationalHierarchy.createGroupDialog.descriptionPlaceholder'
                      | translate }}">
        </textarea>
        </div>
    </div>
    <div class="modal-footer">
        <button type="button" class="btn btn-secondary" ng-click="cancel()">
            <span translate>admin.security.organizationalHierarchy.createGroupDialog.btn.cancel</span>
        </button>
        <button type="submit" class="btn btn-primary" ng-click="ok()" ng-disabled="groupForm.$invalid">
            <span translate>admin.security.organizationalHierarchy.createGroupDialog.btn.ok</span>
        </button>
    </div>
</form>