<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}}/clients">Clients</a></li>
        <li data-ng-show="create">Add Client</li>
        <li data-ng-hide="create">{{client.clientId}}</li>
    </ol>

    <h1 data-ng-show="create">Add Client</h1>
    <h1 data-ng-hide="create">{{client.clientId|capitalize}}<i style="padding-left: 20px" class="pficon pficon-delete" data-ng-show="!create && access.manageClients" 
    	data-ng-hide="changed" data-ng-click="remove()"></i></h1>

    <kc-tabs-client></kc-tabs-client>

    <form class="form-horizontal" name="clientForm" novalidate kc-read-only="!access.manageClients">
        <fieldset class="border-top">
            <div class="form-group">
                <label class="col-md-2 control-label" for="clientId">Client ID <span class="required" data-ng-show="create">*</span></label>
                <div class="col-sm-6">
                    <input class="form-control" type="text" id="clientId" name="clientId" data-ng-model="client.clientId" autofocus required>
                </div>
                <kc-tooltip>Specifies ID referenced in URI and tokens. For example 'my-client'</kc-tooltip>
            </div>
            <div class="form-group">
                <label class="col-md-2 control-label" for="name">Name </label>
                <div class="col-sm-6">
                    <input class="form-control" type="text" id="name" name="name" data-ng-model="client.name" autofocus>
                </div>
                <kc-tooltip>Specifies display name of the client. For example 'My Client'. Supports keys for localized values as well. For example: ${my_client}</kc-tooltip>
            </div>
            <div class="form-group clearfix block">
                <label class="col-md-2 control-label" for="enabled">Enabled</label>
                <div class="col-sm-6">
                    <input ng-model="client.enabled" name="enabled" id="enabled" onoffswitch />
                </div>
                <kc-tooltip>Disabled clients cannot initiate a login or have obtain access tokens.</kc-tooltip>
            </div>
            <div class="form-group clearfix block">
                <label class="col-md-2 control-label" for="consentRequired">Consent Required</label>
                <div class="col-sm-6">
                    <input ng-model="client.consentRequired" name="consentRequired" id="consentRequired" onoffswitch />
                </div>
                <kc-tooltip>If enabled users have to consent to client access.</kc-tooltip>
            </div>
            <div class="form-group clearfix block">
                <label class="col-md-2 control-label" for="directGrantsOnly">Direct Grants Only</label>
                <div class="col-sm-6">
                    <input ng-model="client.directGrantsOnly" name="directGrantsOnly" id="directGrantsOnly" onoffswitch />
                </div>
                <kc-tooltip>When enabled, client can only obtain grants from grant REST API.</kc-tooltip>
            </div>
            <div class="form-group">
                <label class="col-md-2 control-label" for="protocol">Client Protocol</label>
                <div class="col-sm-6">
                    <div>
                        <select class="form-control" id="protocol"
                                ng-change="changeProtocol()"
                                ng-model="protocol"
                                ng-options="aProtocol for aProtocol in protocols">
                        </select>
                    </div>
                </div>
                <kc-tooltip>'OpenID connect' allows Clients to verify the identity of the End-User based on the authentication performed by an Authorization Server.
                'SAML' enables web-based authentication and authorization scenarios including cross-domain single sign-on (SSO) and uses security tokens containing assertions to pass information.</kc-tooltip>
            </div>
            <div class="form-group" data-ng-show="protocol == 'openid-connect'">
                <label class="col-md-2 control-label" for="accessType">Access Type</label>
                <div class="col-sm-6">
                    <div>
                        <select class="form-control" id="accessType"
                                ng-change="changeAccessType()"
                                ng-model="accessType"
                                ng-options="aType for aType in accessTypes">
                        </select>
                    </div>
                </div>
                <kc-tooltip>'Confidential' clients require a secret to initiate login protocol.  'Public' clients do not require a secret.  'Bearer-only' clients are web services that never initiate a login.</kc-tooltip>
            </div>
            <div class="form-group clearfix block" data-ng-show="protocol == 'saml'">
                <label class="col-md-2 control-label" for="samlServerSignature">Include AuthnStatement</label>
                <div class="col-sm-6">
                    <input ng-model="samlAuthnStatement" ng-click="switchChange()" name="samlAuthnStatement" id="samlAuthnStatement" onoffswitch />
                </div>
                <kc-tooltip>Should a statement specifying the method and timestamp be included in login responses?</kc-tooltip>
            </div>
            <div class="form-group clearfix block" data-ng-show="protocol == 'saml'">
                <label class="col-md-2 control-label" for="samlServerSignature">Sign Documents</label>
                <div class="col-sm-6">
                    <input ng-model="samlServerSignature" ng-click="switchChange()" name="samlServerSignature" id="samlServerSignature" onoffswitch />
                </div>
                <kc-tooltip>Should SAML documents be signed by the realm?</kc-tooltip>
            </div>
            <div class="form-group clearfix block" data-ng-show="protocol == 'saml'">
                <label class="col-md-2 control-label" for="samlAssertionSignature">Sign Assertions</label>
                <div class="col-sm-6">
                    <input ng-model="samlAssertionSignature" ng-click="switchChange()" name="samlAssertionSignature" id="samlAssertionSignature" onoffswitch />
                </div>
                <kc-tooltip>Should assertions inside SAML documents be signed?  This setting isn't needed if document is already being signed.</kc-tooltip>
            </div>
            <div class="form-group" data-ng-show="(samlAssertionSignature || samlServerSignature) && protocol == 'saml'">
                <label class="col-md-2 control-label" for="signatureAlgorithm">Signature Algorithm</label>
                <div class="col-sm-6">
                    <div>
                        <select class="form-control" id="signatureAlgorithm"
                                ng-change="changeAlgorithm()"
                                ng-model="signatureAlgorithm"
                                ng-options="alg for alg in signatureAlgorithms">
                        </select>
                    </div>
                </div>
                <kc-tooltip>The signature algorithm to use to sign documents.</kc-tooltip>
            </div>
            <div class="form-group clearfix block" data-ng-show="protocol == 'saml'">
                <label class="col-md-2 control-label" for="samlEncrypt">Encrypt Assertions</label>
                <div class="col-sm-6">
                    <input ng-model="samlEncrypt" ng-click="switchChange()" name="samlEncrypt" id="samlEncrypt" onoffswitch />
                </div>
                <kc-tooltip>Should SAML assertions be encrypted with client's public key using AES?</kc-tooltip>
            </div>
            <div class="form-group clearfix block" data-ng-show="protocol == 'saml'">
                <label class="col-md-2 control-label" for="samlClientSignature">Client Signature Required</label>
                <div class="col-sm-6">
                    <input ng-model="samlClientSignature" ng-click="switchChange()" name="samlClientSignature" id="samlClientSignature" onoffswitch />
                </div>
                <kc-tooltip>Will the client sign their saml requests and responses?  And should they be validated?</kc-tooltip>
            </div>
            <div class="form-group clearfix block" data-ng-show="protocol == 'saml'">
                <label class="col-md-2 control-label" for="samlForcePostBinding">Force POST Binding</label>
                <div class="col-sm-6">
                    <input ng-model="samlForcePostBinding" ng-click="switchChange()" name="samlForcePostBinding" id="samlForcePostBinding" onoffswitch />
                </div>
                <kc-tooltip>Always use POST binding for responses.</kc-tooltip>
            </div>
            <div class="form-group clearfix block" data-ng-show="protocol == 'saml'">
                <label class="col-md-2 control-label" for="frontchannelLogout">Front Channel Logout</label>
                <div class="col-sm-6">
                    <input ng-model="client.frontchannelLogout" name="frontchannelLogout" id="frontchannelLogout" onoffswitch />
                </div>
                <kc-tooltip>When true, logout requires a browser redirect to client.  When false, server performs a background invocation for logout.</kc-tooltip>
            </div>
            <div class="form-group clearfix block" data-ng-show="protocol == 'saml'">
                <label class="col-md-2 control-label" for="samlForceNameIdFormat">Force Name ID Format</label>
                <div class="col-sm-6">
                    <input ng-model="samlForceNameIdFormat" ng-click="switchChange()" name="samlForceNameIdFormat" id="samlForceNameIdFormat" onoffswitch />
                </div>
                <kc-tooltip>Ignore requested NameID subject format and use admin console configured one.</kc-tooltip>
            </div>
            <div class="form-group" data-ng-show="protocol == 'saml'">
                <label class="col-md-2 control-label" for="samlNameIdFormat">Name ID Format</label>
                <div class="col-sm-6">
                    <div>
                        <select class="form-control" id="samlNameIdFormat"
                                ng-change="changeNameIdFormat()"
                                ng-model="nameIdFormat"
                                ng-options="format for format in nameIdFormats">
                        </select>
                    </div>
                </div>
                <kc-tooltip>The name ID format to use for the subject.</kc-tooltip>
            </div>

            <div class="form-group clearfix block" data-ng-hide="client.bearerOnly || client.directGrantsOnly">
                <label class="col-md-2 control-label" for="newRedirectUri"><span class="required" data-ng-show="protocol != 'saml'">*</span> Valid Redirect URIs</label>

                <div class="col-sm-6">
                    <div class="input-group" ng-repeat="(i, redirectUri) in client.redirectUris track by $index">
                        <input class="form-control" ng-model="client.redirectUris[i]">
                        <div class="input-group-addon">
                            <i class="pficon pficon-remove" style="width: 10px;" data-ng-click="deleteRedirectUri($index)"></i>
                        </div>
                    </div>

                    <div class="input-group">
                        <input class="form-control" ng-model="newRedirectUri" id="newRedirectUri">
                        <div class="input-group-addon">
                            <i class="pficon pficon-add" style="width: 10px;" data-ng-click="newRedirectUri.length > 0 && addRedirectUri()"></i>
                        </div>
                    </div>
                </div>

                <kc-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.  For SAML, you must set valid URI patterns if you are relying on the consumer service URL embedded with the login request.</kc-tooltip>
            </div>

            <div class="form-group" data-ng-show="!client.bearerOnly && !create">
                <label class="col-md-2 control-label" for="baseUrl">Base URL</label>
                <div class="col-sm-6">
                    <input class="form-control" type="text" name="baseUrl" id="baseUrl" data-ng-model="client.baseUrl">
                </div>
                <kc-tooltip>Default URL to use when the auth server needs to redirect or link back to the client.</kc-tooltip>
            </div>
            <div class="form-group" data-ng-hide="create || protocol == 'saml'">
                <label class="col-md-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="client.adminUrl">
                </div>
                <kc-tooltip>URL to the admin interface of the client.  Set this if the client 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 client.</kc-tooltip>
            </div>
            <div class="form-group" data-ng-show="protocol == 'saml'">
                <label class="col-md-2 control-label" for="masterSamlUrl">Master SAML Processing URL</label>
                <div class="col-sm-6">
                    <input class="form-control" type="text" name="masterSamlUrl" id="masterSamlUrl"
                           data-ng-model="client.adminUrl">
                </div>
                <kc-tooltip>If configured, this URL will be used for every binding to both the SP's Assertion Consumer and Single Logout Services.  This can be individually overiden for each binding and service in the Fine Grain SAML Endpoint Configuration.</kc-tooltip>
            </div>
            <div class="form-group" data-ng-show="!client.bearerOnly && !create && protocol == 'openid-connect'">
                <label class="col-md-2 control-label" for="newWebOrigin">Web Origins</label>

                <div class="col-sm-6">
                    <div class="input-group" ng-repeat="(i, webOrigin) in client.webOrigins track by $index">
                        <input class="form-control" ng-model="client.webOrigins[i]">
                        <div class="input-group-addon">
                            <i class="pficon pficon-remove" style="width: 10px;" data-ng-click="deleteWebOrigin($index)"></i>
                        </div>
                    </div>

                    <div class="input-group">
                        <input class="form-control" ng-model="newWebOrigin" id="newWebOrigin">
                        <div class="input-group-addon">
                            <i class="pficon pficon-add" style="width: 10px;" data-ng-click="newWebOrigin.length > 0 && addWebOrigin()"></i>
                        </div>
                    </div>
                </div>

                <kc-tooltip>Allowed CORS origins.</kc-tooltip>
            </div>
        </fieldset>
        <fieldset data-ng-show="protocol == 'saml'">
            <legend collapsed><span class="text">Fine Grain SAML Endpoint Configuration</span>  <kc-tooltip>Expand this section to configure exact URLs for Assertion Consumer and Single Logout Service.</kc-tooltip></legend>
            <div class="form-group clearfix block" data-ng-show="protocol == 'saml'">
                <label class="col-md-2 control-label" for="consumerServicePost">Assertion Consumer Service POST Binding URL</label>
                <div class="col-sm-6">
                    <input ng-model="client.attributes.saml_assertion_consumer_url_post" class="form-control" type="text" name="consumerServicePost" id="consumerServicePost" />
                </div>
                <kc-tooltip>SAML POST Binding URL for the client's assertion consumer service (login responses).  You can leave this blank if you do not have a URL for this binding.</kc-tooltip>
            </div>
            <div class="form-group clearfix block" data-ng-show="protocol == 'saml'">
                <label class="col-md-2 control-label" for="consumerServiceRedirect">Assertion Consumer Service Redirect Binding URL</label>
                <div class="col-sm-6">
                    <input ng-model="client.attributes.saml_assertion_consumer_url_redirect" class="form-control" type="text" name="consumerServiceRedirect" id="consumerServiceRedirect" />
                </div>
                <kc-tooltip>SAML Redirect Binding URL for the client's assertion consumer service (login responses).  You can leave this blank if you do not have a URL for this binding.</kc-tooltip>
            </div>
            <div class="form-group clearfix block" data-ng-show="protocol == 'saml'">
                <label class="col-md-2 control-label" for="logoutPostBinding">Logout Service POST Binding URL</label>
                <div class="col-sm-6">
                    <input ng-model="client.attributes.saml_single_logout_service_url_post" class="form-control" type="text" name="logoutPostBinding" id="logoutPostBinding" />
                </div>
                <kc-tooltip>SAML POST Binding URL for the client's single logout service.  You can leave this blank if you are using a different binding</kc-tooltip>
            </div>
            <div class="form-group clearfix block" data-ng-show="protocol == 'saml'">
                <label class="col-md-2 control-label" for="logoutPostBinding">Logout Service Redirect Binding URL</label>
                <div class="col-sm-6">
                    <input ng-model="client.attributes.saml_single_logout_service_url_redirect" class="form-control" type="text" name="logoutRedirectBinding" id="logoutRedirectBinding" />
                </div>
                <kc-tooltip>SAML Redirect Binding URL for the client's single logout service.  You can leave this blank if you are using a different binding.</kc-tooltip>
            </div>
        </fieldset>

        <div class="form-group">
            <div class="col-md-10 col-md-offset-2" data-ng-show="create && access.manageClients">
                <button kc-save data-ng-show="changed">Save</button>
                <button kc-cancel data-ng-click="cancel()">Cancel</button>
            </div>
            <div class="col-md-10 col-md-offset-2" data-ng-show="!create && access.manageClients">
                <button kc-save  data-ng-show="changed">Save</button>
                <button kc-reset data-ng-show="changed">Cancel</button>
            </div>
        </div>
    </form>
</div>

<kc-menu></kc-menu>