<div class="bs-sidebar col-md-3 clearfix" data-ng-include data-src="'partials/realm-menu.html'"></div>
<div id="content-area" class="col-md-9" role="main">
    <kc-navigation-application></kc-navigation-application>
    <div id="content">
        <ol class="breadcrumb" data-ng-hide="create">
            <li><a href="#/realms/{{realm.realm}}/applications">Applications</a></li>
            <li><a href="#/realms/{{realm.realm}}/applications/{{application.id}}">{{application.name}}</a></li>
            <li class="active">Settings</li>
        </ol>
        <ol class="breadcrumb" data-ng-show="create">
            <li><a href="#/realms/{{realm.realm}}/applications">Applications</a></li>
            <li class="active">Add Application</li>
        </ol>
        <h2 data-ng-hide="create"><span>{{application.name}}</span> Application Settings</h2>
        <h2 data-ng-show="create" class="pull-left"><span>{{realm.realm}}</span> Add Application</h2>
        <p class="subtitle" data-ng-show="create"><span class="required">*</span> Required fields</p>

        <form class="form-horizontal" name="applicationForm" novalidate kc-read-only="!access.manageApplications">
            <fieldset class="border-top">
                <div class="form-group">
                    <label class="col-sm-2 control-label" for="name">Name <span class="required" data-ng-show="create">*</span></label>
                    <div class="col-sm-4">
                        <input class="form-control" type="text" id="name" name="name" data-ng-model="application.name" autofocus required>
                    </div>
                </div>
                <div class="form-group clearfix block">
                    <label class="col-sm-2 control-label" for="enabled">Enabled</label>
                    <div class="col-sm-6">
                        <input ng-model="application.enabled" name="enabled" id="enabled" onoffswitch />
                    </div>
                    <span tooltip-placement="right" tooltip="Disabled applications cannot initiate a login or have obtain access tokens." class="fa fa-info-circle"></span>
                </div>
                <div class="form-group">
                    <label class="col-sm-2 control-label" for="protocol">Client Protocol</label>
                    <div class="col-sm-6">
                        <div class="select-kc">
                            <select id="protocol"
                                    ng-change="changeProtocol()"
                                    ng-model="protocol"
                                    ng-options="aProtocol for aProtocol in protocols">
                            </select>
                        </div>
                    </div>
                    <span tooltip-placement="right" tooltip="'Confidential' applications require a secret to initiate login protocol.  'Public' clients do not require a secret.  'Bearer-only' applications are web services that never initiate a login." class="fa fa-info-circle"></span>
                </div>
                <div class="form-group" data-ng-show="protocol == 'openid-connect'">
                    <label class="col-sm-2 control-label" for="accessType">Access Type</label>
                    <div class="col-sm-6">
                        <div class="select-kc">
                            <select id="accessType"
                                    ng-change="changeAccessType()"
                                    ng-model="accessType"
                                    ng-options="aType for aType in accessTypes">
                            </select>
                        </div>
                    </div>
                    <span tooltip-placement="right" tooltip="'Confidential' applications require a secret to initiate login protocol.  'Public' clients do not require a secret.  'Bearer-only' applications are web services that never initiate a login." class="fa fa-info-circle"></span>
                </div>
                <div class="form-group clearfix block" data-ng-show="protocol == 'saml'">
                    <label class="col-sm-2 control-label" for="samlServerSignature">Sign SAML Documents</label>
                    <div class="col-sm-6">
                        <input ng-model="samlServerSignature" ng-click="switchChange()" name="samlServerSignature" id="samlServerSignature" onoffswitch />
                    </div>
                    <span tooltip-placement="right" tooltip="Should SAML documents be signed by the realm?" class="fa fa-info-circle"></span>
                </div>
                <div class="form-group" data-ng-show="samlServerSignature && protocol == 'saml'">
                    <label class="col-sm-2 control-label" for="protocol">Signature Algorithm</label>
                    <div class="col-sm-6">
                        <div class="select-kc">
                            <select id="signatureAlgorithm"
                                    ng-change="changeAlgorithm()"
                                    ng-model="signatureAlgorithm"
                                    ng-options="alg for alg in signatureAlgorithms">
                            </select>
                        </div>
                    </div>
                    <span tooltip-placement="right" tooltip="The signature algorithm to use to sign documents." class="fa fa-info-circle"></span>
                </div>
                <div class="form-group clearfix block" data-ng-show="protocol == 'saml'">
                    <label class="col-sm-2 control-label" for="samlEncrypt">Encrypt SAML Documents</label>
                    <div class="col-sm-6">
                        <input ng-model="samlEncrypt" ng-click="switchChange()" name="samlEncrypt" id="samlEncrypt" onoffswitch />
                    </div>
                    <span tooltip-placement="right" tooltip="Should SAML asserts be encrypted with client's public key?" class="fa fa-info-circle"></span>
                </div>
                <div class="form-group clearfix block" data-ng-show="protocol == 'saml'">
                    <label class="col-sm-2 control-label" for="samlClientSignature">Client Signatures</label>
                    <div class="col-sm-6">
                        <input ng-model="samlClientSignature" ng-click="switchChange()" name="samlClientSignature" id="samlClientSignature" onoffswitch />
                    </div>
                    <span tooltip-placement="right" tooltip="Will the client sign their saml requests and responses?  And should they be validated?" class="fa fa-info-circle"></span>
                </div>

                <div class="form-group" data-ng-show="!application.bearerOnly">
                    <label class="col-sm-2 control-label" for="newRedirectUri">Redirect URI <span class="required" data-ng-show="create">*</span></label>
                    <div class="col-sm-6 multiple" ng-repeat="redirectUri in application.redirectUris">
                        <div class="input-group kc-item-deletable">
                            <input class="form-control" type="text" data-ng-class="{'input-below':!$first}"
                                   name="redirectUri" id="redirectUri" data-ng-model="redirectUri" readonly />
                            <span class="input-group-btn">
                                <button class="btn btn-default" type="button" data-ng-click="deleteRedirectUri($index)">
                                    Delete</button>
                            </span>
                        </div>
                    </div>
                    <div class="col-sm-6 multiple">
                        <div class="input-group">
                            <input class="form-control" type="text" name="newRedirectUri" id="newRedirectUri"
                                   placeholder="New Redirect URI..." data-ng-model="newRedirectUri"
                                   data-ng-class="{'input-below':application.redirectUris.length}" />
                            <span class="input-group-btn">
                                <button class="btn btn-default" data-ng-click="addRedirectUri()" ng-show="newRedirectUri.length > 0">Add</button>
                            </span>
                        </div>
                    </div>
                    <span tooltip-placement="right" tooltip="Valid URI pattern a browser can redirect to after a successful login or logout.  Simple wildcards are allowed i.e. 'http://example.com/*'.  Relative path can be specified too i.e. /my/relative/path/*.  Relative paths will generate a redirect URI using the request's host and port." class="fa fa-info-circle"></span>
                </div>
                <div class="form-group" data-ng-show="!application.bearerOnly && !create">
                    <label class="col-sm-2 control-label" for="baseUrl">Default Redirect URL</label>
                    <div class="col-sm-6">
                        <input class="form-control" type="text" name="baseUrl" id="baseUrl"
                               data-ng-model="application.baseUrl">
                    </div>
                    <span tooltip-placement="right" tooltip="Default URL to use when no redirect URI is specified.  This URL will also be used when the auth server needs to link to the application for any reason." class="fa fa-info-circle"></span>
                </div>
                <div class="form-group" data-ng-hide="create">
                    <label class="col-sm-2 control-label" for="adminUrl">Admin URL</label>
                    <div class="col-sm-6">
                        <input class="form-control" type="text" name="adminUrl" id="adminUrl"
                               data-ng-model="application.adminUrl">
                    </div>
                    <span tooltip-placement="right" tooltip="URL to the admin interface of the application.  Set this if the application supports the adapter REST API.  This REST API allows the auth server to push revocation policies and other adminstrative tasks.  Usually this is set to the base URL of the application." class="fa fa-info-circle"></span>
                </div>
                <div class="form-group" data-ng-show="!application.bearerOnly && !create && protocol == 'openid-connect'">
                    <label class="col-sm-2 control-label" for="newWebOrigin">Web Origin</label>
                    <div class="col-sm-6 multiple" ng-repeat="webOrigin in application.webOrigins">
                        <div class="input-group kc-item-deletable">
                            <input class="form-control" type="text" data-ng-class="{'input-below':!$first}"
                                   name="webOrigin" id="webOrigin" data-ng-model="webOrigin" readonly />
                            <span class="input-group-btn">
                                <button class="btn btn-default" type="button" data-ng-click="deleteWebOrigin($index)">
                                    Delete</button>
                            </span>
                        </div>
                    </div>
                    <div class="col-sm-6 multiple" >
                        <div class="input-group">
                            <input class="form-control" type="text" name="newWebOrigin" id="newWebOrigin"
                                   placeholder="New Web Origin..." data-ng-model="newWebOrigin"
                                   data-ng-class="{'input-below':application.webOrigins.length}" />
                            <span class="input-group-btn">
                                <button class="btn btn-default" data-ng-click="addWebOrigin()" ng-show="newWebOrigin.length > 0">Add</button>
                            </span>
                        </div>
                    </div>
                    <span tooltip-placement="right" tooltip="Allowed CORS origins.  Only useful if the client adapter has CORS processing enabled." class="fa fa-info-circle"></span>
                </div>
            </fieldset>

            <div class="pull-right form-actions" data-ng-show="create && access.manageApplications">
                <button kc-cancel data-ng-click="cancel()">Cancel</button>
                <button kc-save data-ng-show="changed">Save</button>
            </div>
            <div class="pull-right form-actions" data-ng-show="!create && access.manageApplications">
                <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 Application</button>
            </div>
        </form>
    </div>
</div>
