<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>

    <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" data-ng-show="create">
                <label for="name" class="col-sm-2 control-label">Import</label>

                <div class="col-md-6" data-ng-hide="importing">
                    <label for="import-file" class="btn btn-default">Select file <i class="pficon pficon-import"></i></label>
                    <input id="import-file" type="file" class="hidden" kc-on-read-file="importFile($fileContent)">
                </div>

                <div class="col-md-6" data-ng-show="importing">
                    <button class="btn btn-default" data-ng-click="viewImportDetails()">View details</button>
                    <button class="btn btn-default" data-ng-click="reset()">Clear import</button>
                </div>
            </div>

            <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" data-ng-show="protocol == 'openid-connect' && !client.publicClient && !client.bearerOnly">
                <label class="col-md-2 control-label" for="serviceAccountsEnabled">Service Accounts Enabled</label>
                <kc-tooltip>Allows you to authenticate this client to Keycloak and retrieve access token dedicated to this client.</kc-tooltip>
                <div class="col-md-6">
                    <input ng-model="client.serviceAccountsEnabled" name="serviceAccountsEnabled" id="serviceAccountsEnabled" onoffswitch />
                </div>
            </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" data-ng-show="(samlAssertionSignature || samlServerSignature) && protocol == 'saml'">
                <label class="col-md-2 control-label" for="canonicalization">Canonicalization Method</label>
                <div class="col-sm-6">
                    <div>
                        <select class="form-control" id="canonicalization"
                                ng-model="client.attributes['saml_signature_canonicalization_method']"
                                ng-options="canon.value as canon.name for canon in canonicalization">
                        </select>
                    </div>
                </div>
                <kc-tooltip>Canonicalization Method for XML signatures.</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" data-ng-show="!client.bearerOnly">
                <label class="col-md-2 control-label" for="rootUrl">Root URL</label>
                <div class="col-sm-6">
                    <input class="form-control" type="text" name="rootUrl" id="rootUrl" data-ng-model="client.rootUrl">
                </div>
                <kc-tooltip>Root URL appended to relative URLs</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 clearfix block" data-ng-show="protocol == 'saml'">
                <label class="col-md-2 control-label" for="urlReferenceName">IDP Initiated SSO URL Name</label>
                <div class="col-sm-6">
                    <input ng-model="client.attributes.saml_idp_initiated_sso_url_name" class="form-control" type="text" name="urlReferenceName" id="urlReferenceName" />
                </div>
                <kc-tooltip>URL fragment name to reference client when you want to do IDP Initiated SSO.  Leaving this empty will disable IDP Initiated SSO.  The URL you will reference from your browser will be: {server-root}/realms/{realm}/protocol/saml/clients/{client-url-name}</kc-tooltip>
            </div>
            <div class="form-group clearfix block" data-ng-show="protocol == 'saml'">
                <label class="col-md-2 control-label" for="idpInitiatedRelayState">IDP Initiated SSO Relay State</label>
                <div class="col-sm-6">
                    <input ng-model="client.attributes.saml_idp_initiated_sso_relay_state" class="form-control" type="text" name="idpInitiatedRelayState" id="idpInitiatedRelayState" />
                </div>
                <kc-tooltip>Relay state you want to send with SAML request when you want to do IDP Initiated SSO.</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. To permit all origins of Valid Redirect URIs add '+'. To permit all origins add '*'.</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-disabled="!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-disabled="!changed">Save</button>
                <button kc-reset data-ng-disabled="!changed">Cancel</button>
            </div>
        </div>
    </form>
</div>

<kc-menu></kc-menu>