<div class="bs-sidebar col-sm-3 " data-ng-include data-src="'partials/realm-menu.html'"></div>
<div id="content-area" class="col-md-9" role="main">
    <data-kc-navigation data-kc-current="auth-settings" data-kc-realm="realm.realm" data-kc-social="realm.social"></data-kc-navigation>

    <div id="content">
        <ol class="breadcrumb" data-ng-show="create">
            <li><a href="#/realms/{{realm.realm}}">{{realm.realm}}</a></li>
            <li><a href="#/realms/{{realm.realm}}">Settings</a></li>
            <li><a href="#/realms/{{realm.realm}}/auth-settings">Authentication</a></li>
            <li class="active">Add</li>
        </ol>
        <h2 data-ng-show="create"><span>{{realm.realm}}</span> Add Authentication provider</h2>
        <ol class="breadcrumb" data-ng-hide="create">
            <li><a href="#/realms/{{realm.realm}}">{{realm.realm}}</a></li>
            <li><a href="#/realms/{{realm.realm}}">Settings</a></li>
            <li><a href="#/realms/{{realm.realm}}/auth-settings">Authentication</a></li>
            <li class="active">{{authProviderIndex}}</li>
        </ol>
        <h2 data-ng-hide="create"><span>{{authProvider.providerName|capitalize}}'s</span> Attributes</h2>

        <form class="form-horizontal" name="userForm" novalidate kc-read-only="!access.manageRealm">
            <fieldset class="border-top">
                <div class="form-group input-select">
                    <label class="col-sm-2 control-label" for="authProviders">Provider Name</label>
                    <div class="col-sm-4">
                        <div class="input-group">
                            <div class="select-kc">
                                <select id="authProviders" name="authProviders"
                                        data-ng-change="changeAuthProvider()"
                                        data-ng-model="authProvider.providerName"
                                        data-ng-options="(p|capitalize) for p in availableProviderNames"
                                        data-ng-disabled="!create">
                                    <option value="" selected> Select Authentication Provider...</option>
                                </select>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="form-group clearfix block">
                    <label class="col-sm-2 control-label" for="passwordUpdateSupported">Password Update Supported</label>
                    <div class="col-sm-4">
                        <input ng-model="authProvider.passwordUpdateSupported" name="passwordUpdateSupported" id="passwordUpdateSupported" onoffswitch />
                    </div>
                </div>

            </fieldset>

            <fieldset>
                <legend data-ng-show="authProvider.providerName"><span class="text">{{authProvider.providerName|capitalize}}'s provider options</span></legend>
                <div data-ng-repeat="option in authProviderOptionNames" class="form-group">
                    <label class="col-sm-2 control-label">{{option|capitalize}} </label>

                    <div class="col-sm-4">
                        <input class="form-control" type="text" data-ng-model="authProvider.config[ option ]" >
                    </div>
                </div>

            </fieldset>

            <div class="pull-right form-actions" data-ng-show="create && access.manageRealm">
                <button kc-cancel data-ng-click="cancel()">Cancel</button>
                <button kc-save data-ng-show="changed && authProvider.providerName">Save</button>
            </div>

            <div class="pull-right form-actions" data-ng-show="!create && access.manageRealm">
                <button kc-reset data-ng-show="changed">Clear changes</button>
                <button kc-save  data-ng-show="changed">Save</button>
                <button kc-delete data-ng-click="remove()" data-ng-hide="changed">Delete</button>
            </div>

        </form>
    </div>
</div>