<div class="col-sm-9 col-md-10 col-sm-push-3 col-md-push-2">
    <ol class="breadcrumb">
        <li><a href="#/realms/{{realm.realm}}/user-federation">{{:: 'user-federation' | translate}}</a></li>
        <li data-ng-hide="create">{{instance.displayName|capitalize}}</li>
        <li data-ng-show="create">{{:: 'add-user-federation-provider' | translate}}</li>
    </ol>

    <kc-tabs-user-federation></kc-tabs-user-federation>

    <form class="form-horizontal" name="realmForm" novalidate kc-read-only="!access.manageRealm">

        <fieldset>
            <legend><span class="text">{{:: 'required-settings' | translate}}</span></legend>
            <div class="form-group clearfix" data-ng-show="!create">
                <label class="col-md-2 control-label" for="providerId">{{:: 'provider-id' | translate}} </label>
                <div class="col-md-6">
                    <input class="form-control" id="providerId" type="text" ng-model="instance.id" readonly>
                </div>
            </div>
            <div class="form-group clearfix">
                <label class="col-md-2 control-label" for="consoleDisplayName">{{:: 'console-display-name' | translate}} </label>
                <div class="col-md-6">
                    <input class="form-control" id="consoleDisplayName" type="text" ng-model="instance.displayName" placeholder="{{:: 'defaults-to-id' | translate}}">
                </div>
                <kc-tooltip>{{:: 'console-display-name.tooltip' | translate}}</kc-tooltip>
            </div>
            <div class="form-group clearfix">
                <label class="col-md-2 control-label" for="priority">{{:: 'priority' | translate}} </label>
                <div class="col-md-6">
                    <input class="form-control" id="priority" type="text" ng-model="instance.priority">
                </div>
                <kc-tooltip>{{:: 'priority.tooltip' | translate}}</kc-tooltip>
            </div>
            <div class="form-group">
                <label class="col-md-2 control-label" for="editMode">{{:: 'edit-mode' | translate}}</label>
                <div class="col-md-6">
                    <div>
                        <select class="form-control" id="editMode"
                                ng-model="instance.config.editMode">
                            <option>READ_ONLY</option>
                            <option>WRITABLE</option>
                            <option>UNSYNCED</option>
                        </select>
                    </div>
                </div>
                <kc-tooltip>{{:: 'ldap.edit-mode.tooltip' | translate}}</kc-tooltip>
            </div>
            <div class="form-group clearfix block">
                <label class="col-md-2 control-label" for="syncRegistrations">{{:: 'sync-registrations' | translate}}</label>
                <div class="col-md-6">
                    <input ng-model="instance.config.syncRegistrations" name="syncRegistrations" id="syncRegistrations" onoffswitch on-text="{{:: 'onText' | translate}}" off-text="{{:: 'offText' | translate}}" />
                </div>
                <kc-tooltip>{{:: 'ldap.sync-registrations.tooltip' | translate}}</kc-tooltip>
            </div>
            <div class="form-group clearfix">
                <label class="col-md-2 control-label" for="vendor"><span class="required">*</span> {{:: 'vendor' | translate}}</label>
                <div class="col-md-6">
                    <div data-ng-show="create">
                        <select class="form-control" id="vendor"
                                ng-model="instance.config.vendor"
                                ng-options="vendor.id as vendor.name for vendor in ldapVendors"
                                required>
                        </select>
                    </div>
                    <div data-ng-show="!create">
                        <input class="form-control" id="vendor-ro" type="text" ng-model="vendorName" readonly>
                    </div>
                </div>
                <kc-tooltip>{{:: 'ldap.vendor.tooltip' | translate}}</kc-tooltip>
            </div>
            <div class="form-group clearfix">
                <label class="col-md-2 control-label" for="usernameLDAPAttribute"><span class="required">*</span> {{:: 'username-ldap-attribute' | translate}}</label>
                <div class="col-md-6">
                    <input class="form-control" id="usernameLDAPAttribute" type="text" ng-model="instance.config.usernameLDAPAttribute" placeholder="{{:: 'ldap-attribute-name-for-username' | translate}}" required>
                </div>
                <kc-tooltip>{{:: 'username-ldap-attribute.tooltip' | translate}}</kc-tooltip>
            </div>
            <div class="form-group clearfix">
                <label class="col-md-2 control-label" for="rdnLDAPAttribute"><span class="required">*</span> {{:: 'rdn-ldap-attribute' | translate}}</label>
                <div class="col-md-6">
                    <input class="form-control" id="rdnLDAPAttribute" type="text" ng-model="instance.config.rdnLDAPAttribute" placeholder="{{:: 'ldap-attribute-name-for-user-rdn' | translate}}" required>
                </div>
                <kc-tooltip>{{:: 'rdn-ldap-attribute.tooltip' | translate}}</kc-tooltip>
            </div>
            <div class="form-group clearfix">
                <label class="col-md-2 control-label" for="uuidLDAPAttribute"><span class="required">*</span> {{:: 'uuid-ldap-attribute' | translate}}</label>
                <div class="col-md-6">
                    <input class="form-control" id="uuidLDAPAttribute" type="text" ng-model="instance.config.uuidLDAPAttribute" placeholder="{{:: 'ldap-attribute-name-for-uuid' | translate}}" required>
                </div>
                <kc-tooltip>{{:: 'uuid-ldap-attribute.tooltip' | translate}}</kc-tooltip>
            </div>
            <div class="form-group clearfix">
                <label class="col-md-2 control-label" for="userObjectClasses"><span class="required">*</span> {{:: 'user-object-classes' | translate}}</label>
                <div class="col-md-6">
                    <input class="form-control" id="userObjectClasses" type="text" ng-model="instance.config.userObjectClasses" placeholder="{{:: 'ldap-user-object-classes.placeholder' | translate}}" required>
                </div>
                <kc-tooltip>{{:: 'ldap.user-object-classes.tooltip' | translate}}</kc-tooltip>
            </div>
            <div class="form-group clearfix">
                <label class="col-md-2 control-label" for="ldapConnectionUrl"><span class="required">*</span> {{:: 'connection-url' | translate}}</label>
                <div class="col-md-6">
                    <input class="form-control" id="ldapConnectionUrl" type="text" ng-model="instance.config.connectionUrl" placeholder="{{:: 'ldap-connection-url' | translate}}" required>
                </div>
                <kc-tooltip>{{:: 'ldap.connection-url.tooltip' | translate}}</kc-tooltip>
                <div class="col-sm-4" data-ng-show="access.manageRealm">
                    <a class="btn btn-primary" data-ng-click="testConnection()">{{:: 'test-connection' | translate}}</a>
                </div>
            </div>
            <div class="form-group clearfix">
                <label class="col-md-2 control-label" for="ldapUsersDn"><span class="required">*</span> {{:: 'users-dn' | translate}}</label>
                <div class="col-md-6">
                    <input class="form-control" id="ldapUsersDn" type="text" ng-model="instance.config.usersDn" placeholder="{{:: 'ldap-users-dn' | translate}}" required>
                </div>
                <kc-tooltip>{{:: 'ldap.users-dn.tooltip' | translate}}</kc-tooltip>
            </div>
            <div class="form-group clearfix">
                <label class="col-md-2 control-label" for="authType"><span class="required">*</span> {{:: 'authentication-type' | translate}}</label>
                <div class="col-md-6">
                    <div>
                        <select class="form-control" id="authType"
                                ng-model="instance.config.authType"
                                ng-options="authType.id as authType.name for authType in authTypes"
                                required>
                        </select>
                    </div>
                </div>
                <kc-tooltip>{{:: 'ldap.authentication-type.tooltip' | translate}}</kc-tooltip>
            </div>
            <div class="form-group clearfix" data-ng-hide="instance.config.authType == 'none'">
                <label class="col-md-2 control-label" for="ldapBindDn"><span class="required">*</span> {{:: 'bind-dn' | translate}}</label>
                <div class="col-md-6">
                    <input class="form-control" id="ldapBindDn" type="text" ng-model="instance.config.bindDn" placeholder="{{:: 'ldap-bind-dn' | translate}}" data-ng-required="instance.config.authType != 'none'">
                </div>
                <kc-tooltip>{{:: 'ldap.bind-dn.tooltip' | translate}}</kc-tooltip>
            </div>
            <div class="form-group clearfix" data-ng-hide="instance.config.authType == 'none'">
                <label class="col-md-2 control-label" for="ldapBindCredential"><span class="required">*</span> {{:: 'bind-credential' | translate}}</label>
                <div class="col-md-6">
                    <input class="form-control" id="ldapBindCredential" type="password" ng-model="instance.config.bindCredential" placeholder="{{:: 'ldap-bind-credentials' | translate}}" data-ng-required="instance.config.authType != 'none'">
                </div>
                <kc-tooltip>{{:: 'ldap.bind-credential.tooltip' | translate}}</kc-tooltip>
                <div class="col-sm-4" data-ng-show="access.manageRealm">
                    <a class="btn btn-primary" data-ng-click="testAuthentication()">{{:: 'test-authentication' | translate}}</a>
                </div>
            </div>
            <div class="form-group clearfix">
                <label class="col-md-2 control-label" for="customUserSearchFilter">{{:: 'custom-user-ldap-filter' | translate}}</label>
                <div class="col-md-6">
                    <input class="form-control" id="customUserSearchFilter" type="text" ng-model="instance.config.customUserSearchFilter" placeholder="{{:: 'ldap-filter' | translate}}">
                </div>
                <kc-tooltip>{{:: 'ldap.custom-user-ldap-filter.tooltip' | translate}}</kc-tooltip>
            </div>
            <div class="form-group">
                <label class="col-md-2 control-label" for="searchScope">{{:: 'search-scope' | translate}}</label>
                <div class="col-md-6">
                    <div>
                        <select class="form-control" id="searchScope"
                                ng-model="instance.config.searchScope"
                                ng-options="searchScope.id as searchScope.name for searchScope in searchScopes"
                                required>
                        </select>
                    </div>
                </div>
                <kc-tooltip>{{:: 'ldap.search-scope.tooltip' | translate}}</kc-tooltip>
            </div>
            <div class="form-group">
                <label class="col-md-2 control-label" for="useTruststoreSpi">{{:: 'use-truststore-spi' | translate}}</label>
                <div class="col-md-6">
                    <div>
                        <select class="form-control" id="useTruststoreSpi"
                                ng-model="instance.config.useTruststoreSpi"
                                ng-options="useTruststoreSpi.id as useTruststoreSpi.name for useTruststoreSpi in useTruststoreOptions"
                                required>
                        </select>
                    </div>
                </div>
                <kc-tooltip>{{:: 'ldap.use-truststore-spi.tooltip' | translate}}</kc-tooltip>
            </div>
            <div class="form-group clearfix">
                <label class="col-md-2 control-label" for="connectionPooling">{{:: 'connection-pooling' | translate}}</label>
                <div class="col-md-6">
                    <input ng-model="instance.config.connectionPooling" name="connectionPooling" id="connectionPooling" onoffswitch on-text="{{:: 'onText' | translate}}" off-text="{{:: 'offText' | translate}}" />
                </div>
                <kc-tooltip>{{:: 'ldap.connection-pooling.tooltip' | translate}}</kc-tooltip>
            </div>
            <div class="form-group clearfix">
                <label class="col-md-2 control-label" for="pagination">{{:: 'pagination' | translate}}</label>
                <div class="col-md-6">
                    <input ng-model="instance.config.pagination" name="pagination" id="pagination" onoffswitch on-text="{{:: 'onText' | translate}}" off-text="{{:: 'offText' | translate}}" />
                </div>
                <kc-tooltip>{{:: 'ldap.pagination.tooltip' | translate}}</kc-tooltip>
            </div>
        </fieldset>

        <fieldset>
            <legend><span class="text">{{:: 'kerberos-integration' | translate}}</span></legend>
            <div class="form-group">
                <label class="col-md-2 control-label" for="allowKerberosAuthentication">{{:: 'allow-kerberos-authentication' | translate}} </label>
                <div class="col-md-6">
                    <input ng-model="instance.config.allowKerberosAuthentication" id="allowKerberosAuthentication" onoffswitch on-text="{{:: 'onText' | translate}}" off-text="{{:: 'offText' | translate}}" />
                </div>
                <kc-tooltip>{{:: 'ldap.allow-kerberos-authentication.tooltip' | translate}}</kc-tooltip>
            </div>
            <div class="form-group clearfix" data-ng-show="instance.config.allowKerberosAuthentication">
                <label class="col-md-2 control-label" for="kerberosRealm"><span class="required">*</span> {{:: 'kerberos-realm' | translate}}</label>
                <div class="col-md-6">
                    <input class="form-control" id="kerberosRealm" type="text" ng-model="instance.config.kerberosRealm" ng-required="instance.config.allowKerberosAuthentication">
                </div>
                <kc-tooltip>{{:: 'kerberos-realm.tooltip' | translate}}</kc-tooltip>
            </div>
            <div class="form-group clearfix" data-ng-show="instance.config.allowKerberosAuthentication">
                <label class="col-md-2 control-label" for="serverPrincipal"><span class="required">*</span> {{:: 'server-principal' | translate}}</label>
                <div class="col-md-6">
                    <input class="form-control" id="serverPrincipal" type="text" ng-model="instance.config.serverPrincipal" ng-required="instance.config.allowKerberosAuthentication">
                </div>
                <kc-tooltip>{{:: 'server-principal.tooltip' | translate}}</kc-tooltip>
            </div>
            <div class="form-group clearfix" data-ng-show="instance.config.allowKerberosAuthentication">
                <label class="col-md-2 control-label" for="keyTab"><span class="required">*</span> {{:: 'keytab' | translate}}</label>
                <div class="col-md-6">
                    <input class="form-control" id="keyTab" type="text" ng-model="instance.config.keyTab" ng-required="instance.config.allowKerberosAuthentication">
                </div>
                <kc-tooltip>{{:: 'keytab.tooltip' | translate}}</kc-tooltip>
            </div>
            <div class="form-group" data-ng-show="instance.config.allowKerberosAuthentication">
                <label class="col-md-2 control-label" for="debug">{{:: 'debug' | translate}} </label>
                <div class="col-md-6">
                    <input ng-model="instance.config.debug" id="debug" onoffswitch on-text="{{:: 'onText' | translate}}" off-text="{{:: 'offText' | translate}}" />
                </div>
                <kc-tooltip>{{:: 'debug.tooltip' | translate}}</kc-tooltip>
            </div>
            <div class="form-group" data-ng-show="instance.config.allowKerberosAuthentication">
                <label class="col-md-2 control-label" for="debug">{{:: 'use-kerberos-for-password-authentication' | translate}} </label>
                <div class="col-md-6">
                    <input ng-model="instance.config.useKerberosForPasswordAuthentication" id="useKerberosForPasswordAuthentication" onoffswitch on-text="{{:: 'onText' | translate}}" off-text="{{:: 'offText' | translate}}" />
                </div>
                <kc-tooltip>{{:: 'ldap.use-kerberos-for-password-authentication.tooltip' | translate}}</kc-tooltip>
            </div>
        </fieldset>

        <fieldset>
            <legend><span class="text">{{:: 'sync-settings' | translate}}</span></legend>
            <div class="form-group clearfix">
                <label class="col-md-2 control-label" for="batchSizeForSync">{{:: 'batch-size' | translate}}</label>
                <div class="col-md-6">
                    <input class="form-control" type="text" ng-model="instance.config.batchSizeForSync" id="batchSizeForSync" />
                </div>
                <kc-tooltip>{{:: 'ldap.batch-size.tooltip' | translate}}</kc-tooltip>
            </div>
            <div class="form-group clearfix">
                <label class="col-md-2 control-label" for="fullSyncEnabled">{{:: 'periodic-full-sync' | translate}}</label>
                <div class="col-md-6">
                    <input ng-model="fullSyncEnabled" name="fullSyncEnabled" id="fullSyncEnabled" onoffswitch on-text="{{:: 'onText' | translate}}" off-text="{{:: 'offText' | translate}}" />
                </div>
                <kc-tooltip>{{:: 'ldap.periodic-full-sync.tooltip' | translate}}</kc-tooltip>
            </div>
            <div class="form-group clearfix" data-ng-show="fullSyncEnabled">
                <label class="col-md-2 control-label" for="fullSyncPeriod">{{:: 'full-sync-period' | translate}}</label>
                <div class="col-md-6">
                    <input class="form-control" type="number" ng-model="instance.fullSyncPeriod" id="fullSyncPeriod" />
                </div>
                <kc-tooltip>{{:: 'full-sync-period.tooltip' | translate}}</kc-tooltip>
            </div>
            <div class="form-group clearfix">
                <label class="col-md-2 control-label" for="changedSyncEnabled">{{:: 'periodic-changed-users-sync' | translate}}</label>
                <div class="col-md-6">
                    <input ng-model="changedSyncEnabled" name="changedSyncEnabled" id="changedSyncEnabled" onoffswitch on-text="{{:: 'onText' | translate}}" off-text="{{:: 'offText' | translate}}" />
                </div>
                <kc-tooltip>{{:: 'ldap.periodic-changed-users-sync.tooltip' | translate}}</kc-tooltip>
            </div>
            <div class="form-group clearfix" data-ng-show="changedSyncEnabled">
                <label class="col-md-2 control-label" for="changedSyncPeriod">{{:: 'changed-users-sync-period' | translate}}</label>
                <div class="col-md-6">
                    <input class="form-control" type="number" ng-model="instance.changedSyncPeriod" id="changedSyncPeriod" />
                </div>
                <kc-tooltip>{{:: 'ldap.changed-users-sync-period.tooltip' | translate}}</kc-tooltip>
            </div>
        </fieldset>

        <div class="form-group">
            <div class="col-md-10 col-md-offset-2" data-ng-show="create && access.manageUsers">
                <button kc-save>{{:: 'save' | translate}}</button>
                <button kc-cancel data-ng-click="cancel()">{{:: 'cancel' | translate}}</button>
            </div>
        </div>

        <div class="form-group">
            <div class="col-md-10 col-md-offset-2" data-ng-show="!create && access.manageUsers">
                <button kc-save  data-ng-disabled="!changed">{{:: 'save' | translate}}</button>
                <button kc-reset data-ng-disabled="!changed">{{:: 'cancel' | translate}}</button>
                <button class="btn btn-primary" data-ng-click="triggerChangedUsersSync()" data-ng-hide="changed">{{:: 'synchronize-changed-users' | translate}}</button>
                <button class="btn btn-primary" data-ng-click="triggerFullSync()" data-ng-hide="changed">{{:: 'synchronize-all-users' | translate}}</button>
            </div>
        </div>
    </form>
</div>

<kc-menu></kc-menu>