<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' | translate}}</a></li>
        <li>{{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">
                <label class="col-md-2 control-label" for="clientId">{{:: 'client-id' | translate}}</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>{{:: 'client-id.tooltip' | translate}}</kc-tooltip>
            </div>
            <div class="form-group">
                <label class="col-md-2 control-label" for="name">{{:: 'name' | translate}} </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>{{:: 'client.name.tooltip' | translate}}</kc-tooltip>
            </div>
            <div class="form-group">
                <label class="col-md-2 control-label" for="description">{{:: 'description' | translate}} </label>
                <div class="col-sm-6">
                    <input class="form-control" type="text" id="description" name="description" data-ng-model="client.description">
                </div>
                <kc-tooltip>{{:: 'client.description.tooltip' | translate}}</kc-tooltip>
            </div>
            <div class="form-group clearfix block">
                <label class="col-md-2 control-label" for="enabled">{{:: 'enabled' | translate}}</label>
                <div class="col-sm-6">
                    <input ng-model="client.enabled" name="enabled" id="enabled" onoffswitch on-text="{{:: 'onText' | translate}}" off-text="{{:: 'offText' | translate}}"/>
                </div>
                <kc-tooltip>{{:: 'client.enabled.tooltip' | translate}}</kc-tooltip>
            </div>
            <div class="form-group clearfix block">
                <label class="col-md-2 control-label" for="consentRequired">{{:: 'consent-required' | translate}}</label>
                <div class="col-sm-6">
                    <input ng-model="client.consentRequired" name="consentRequired" id="consentRequired" onoffswitch on-text="{{:: 'onText' | translate}}" off-text="{{:: 'offText' | translate}}"/>
                </div>
                <kc-tooltip>{{:: 'consent-required.tooltip' | translate}}</kc-tooltip>
            </div>
            <div class="form-group">
                <label class="col-md-2 control-label" for="protocol">{{:: 'client-protocol' | translate}}</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>{{:: 'client-protocol.tooltip' | translate}}</kc-tooltip>
            </div>
            <div class="form-group">
                <label class="col-md-2 control-label" for="protocol">{{:: 'client-template' | translate}}</label>
                <div class="col-sm-6">
                    <div>
                        <select class="form-control" id="template"
                                ng-model="client.clientTemplate"
                                ng-options="template.name as template.name for template in templates">
                        </select>
                    </div>
                </div>
                <kc-tooltip>{{:: 'client-template.tooltip' | translate}}</kc-tooltip>
            </div>
            <div class="form-group" data-ng-show="protocol == 'openid-connect'">
                <label class="col-md-2 control-label" for="accessType">{{:: 'access-type' | translate}}</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>{{:: 'access-type.tooltip' | translate}}</kc-tooltip>
            </div>
            <div class="form-group" data-ng-show="protocol == 'openid-connect' && !client.bearerOnly">
                <label class="col-md-2 control-label" for="standardFlowEnabled">{{:: 'standard-flow-enabled' | translate}}</label>
                <kc-tooltip>{{:: 'standard-flow-enabled.tooltip' | translate}}</kc-tooltip>
                <div class="col-md-6">
                    <input ng-model="client.standardFlowEnabled" name="standardFlowEnabled" id="standardFlowEnabled" onoffswitch on-text="{{:: 'onText' | translate}}" off-text="{{:: 'offText' | translate}}"/>
                </div>
            </div>
            <div class="form-group" data-ng-show="protocol == 'openid-connect' && !client.bearerOnly">
                <label class="col-md-2 control-label" for="implicitFlowEnabled">{{:: 'implicit-flow-enabled' | translate}}</label>
                <kc-tooltip>{{:: 'implicit-flow-enabled.tooltip' | translate}}</kc-tooltip>
                <div class="col-md-6">
                    <input ng-model="client.implicitFlowEnabled" name="implicitFlowEnabled" id="implicitFlowEnabled" onoffswitch on-text="{{:: 'onText' | translate}}" off-text="{{:: 'offText' | translate}}"/>
                </div>
            </div>
            <div class="form-group" data-ng-show="protocol == 'openid-connect' && !client.bearerOnly">
                <label class="col-md-2 control-label" for="directAccessGrantsEnabled">{{:: 'direct-access-grants-enabled' | translate}}</label>
                <kc-tooltip>{{:: 'direct-access-grants-enabled.tooltip' | translate}}</kc-tooltip>
                <div class="col-md-6">
                    <input ng-model="client.directAccessGrantsEnabled" name="directAccessGrantsEnabled" id="directAccessGrantsEnabled" onoffswitch on-text="{{:: 'onText' | translate}}" off-text="{{:: 'offText' | translate}}"/>
                </div>
            </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' | translate}}</label>
                <kc-tooltip>{{:: 'service-accounts-enabled.tooltip' | translate}}</kc-tooltip>
                <div class="col-md-6">
                    <input ng-model="client.serviceAccountsEnabled" name="serviceAccountsEnabled" id="serviceAccountsEnabled" onoffswitch on-text="{{:: 'onText' | translate}}" off-text="{{:: 'offText' | translate}}"/>
                </div>
            </div>
            <div class="form-group" data-ng-show="serverInfo.profileInfo.previewEnabled && protocol == 'openid-connect'">
                <label class="col-md-2 control-label" for="authorizationServicesEnabled">{{:: 'authz-authorization-services-enabled' | translate}}</label>
                <kc-tooltip>{{:: 'authz-authorization-services-enabled.tooltip' | translate}}</kc-tooltip>
                <div class="col-md-6">
                    <input ng-model="client.authorizationServicesEnabled" name="authorizationServicesEnabled" id="authorizationServicesEnabled" onoffswitch on-text="{{:: 'onText' | translate}}" off-text="{{:: 'offText' | translate}}"/>
                </div>
            </div>
            <div class="form-group clearfix block" data-ng-show="protocol == 'saml'">
                <label class="col-md-2 control-label" for="samlAuthnStatement">{{:: 'include-authnstatement' | translate}}</label>
                <div class="col-sm-6">
                    <input ng-model="samlAuthnStatement" ng-click="switchChange()" name="samlAuthnStatement" id="samlAuthnStatement" onoffswitch on-text="{{:: 'onText' | translate}}" off-text="{{:: 'offText' | translate}}"/>
                </div>
                <kc-tooltip>{{:: 'include-authnstatement.tooltip' | translate}}</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' | translate}}</label>
                <div class="col-sm-6">
                    <input ng-model="samlServerSignature" ng-click="switchChange()" name="samlServerSignature" id="samlServerSignature" onoffswitch on-text="{{:: 'onText' | translate}}" off-text="{{:: 'offText' | translate}}"/>
                </div>
                <kc-tooltip>{{:: 'sign-documents.tooltip' | translate}}</kc-tooltip>
            </div>
            <div class="form-group clearfix block" data-ng-show="protocol == 'saml' && samlServerSignature == true">
                <label class="col-md-2 control-label" for="samlServerSignatureEnableKeyInfoExtension">{{:: 'sign-documents-redirect-enable-key-info-ext' | translate}}</label>
                <div class="col-sm-6">
                    <input ng-model="samlServerSignatureEnableKeyInfoExtension" ng-click="switchChange()" name="samlServerSignatureEnableKeyInfoExtension" id="samlServerSignatureEnableKeyInfoExtension" onoffswitch on-text="{{:: 'onText' | translate}}" off-text="{{:: 'offText' | translate}}"/>
                </div>
                <kc-tooltip>{{:: 'sign-documents-redirect-enable-key-info-ext.tooltip' | translate}}</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' | translate}}</label>
                <div class="col-sm-6">
                    <input ng-model="samlAssertionSignature" ng-click="switchChange()" name="samlAssertionSignature" id="samlAssertionSignature" onoffswitch on-text="{{:: 'onText' | translate}}" off-text="{{:: 'offText' | translate}}"/>
                </div>
                <kc-tooltip>{{:: 'sign-assertions.tooltip' | translate}}</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' | translate}}</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>{{:: 'signature-algorithm.tooltip' | translate}}</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' | translate}}</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.tooltip' | translate}}</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' | translate}}</label>
                <div class="col-sm-6">
                    <input ng-model="samlEncrypt" ng-click="switchChange()" name="samlEncrypt" id="samlEncrypt" onoffswitch on-text="{{:: 'onText' | translate}}" off-text="{{:: 'offText' | translate}}"/>
                </div>
                <kc-tooltip>{{:: 'encrypt-assertions.tooltip' | translate}}</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' | translate}}</label>
                <div class="col-sm-6">
                    <input ng-model="samlClientSignature" ng-click="switchChange()" name="samlClientSignature" id="samlClientSignature" onoffswitch on-text="{{:: 'onText' | translate}}" off-text="{{:: 'offText' | translate}}"/>
                </div>
                <kc-tooltip>{{:: 'client-signature-required.tooltip' | translate}}</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' | translate}}</label>
                <div class="col-sm-6">
                    <input ng-model="samlForcePostBinding" ng-click="switchChange()" name="samlForcePostBinding" id="samlForcePostBinding" onoffswitch on-text="{{:: 'onText' | translate}}" off-text="{{:: 'offText' | translate}}"/>
                </div>
                <kc-tooltip>{{:: 'force-post-binding.tooltip' | translate}}</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' | translate}}</label>
                <div class="col-sm-6">
                    <input ng-model="client.frontchannelLogout" name="frontchannelLogout" id="frontchannelLogout" onoffswitch on-text="{{:: 'onText' | translate}}" off-text="{{:: 'offText' | translate}}"/>
                </div>
                <kc-tooltip>{{:: 'front-channel-logout.tooltip' | translate}}</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' | translate}}</label>
                <div class="col-sm-6">
                    <input ng-model="samlForceNameIdFormat" ng-click="switchChange()" name="samlForceNameIdFormat" id="samlForceNameIdFormat" onoffswitch on-text="{{:: 'onText' | translate}}" off-text="{{:: 'offText' | translate}}"/>
                </div>
                <kc-tooltip>{{:: 'force-name-id-format.tooltip' | translate}}</kc-tooltip>
            </div>
            <div class="form-group" data-ng-show="protocol == 'saml'">
                <label class="col-md-2 control-label" for="samlNameIdFormat">{{:: 'name-id-format' | translate}}</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>{{:: 'name-id-format.tooltip' | translate}}</kc-tooltip>
            </div>

            <div class="form-group" data-ng-show="!client.bearerOnly">
                <label class="col-md-2 control-label" for="rootUrl">{{:: 'root-url' | translate}}</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.tooltip' | translate}}</kc-tooltip>
            </div>

            <div class="form-group clearfix block" data-ng-hide="client.bearerOnly || (!client.standardFlowEnabled && !client.implicitFlowEnabled)">
                <label class="col-md-2 control-label" for="newRedirectUri"><span class="required" data-ng-show="protocol != 'saml'">*</span> {{:: 'valid-redirect-uris' | translate}}</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-btn">
                            <button class="btn btn-default" type="button" data-ng-click="deleteRedirectUri($index)"><span class="fa fa-minus"></span></button>
                        </div>
                    </div>

                    <div class="input-group">
                        <input class="form-control" ng-model="newRedirectUri" id="newRedirectUri">
                        <div class="input-group-btn">
                            <button class="btn btn-default" type="button" data-ng-click="newRedirectUri.length > 0 && addRedirectUri()"><span class="fa fa-plus"></span></button>
                        </div>
                    </div>
                </div>

                <kc-tooltip>{{:: 'valid-redirect-uris.tooltip' | translate}}</kc-tooltip>
            </div>

            <div class="form-group" data-ng-show="!client.bearerOnly">
                <label class="col-md-2 control-label" for="baseUrl">{{:: 'base-url' | translate}}</label>
                <div class="col-sm-6">
                    <input class="form-control" type="text" name="baseUrl" id="baseUrl" data-ng-model="client.baseUrl">
                </div>
                <kc-tooltip>{{:: 'base-url.tooltip' | translate}}</kc-tooltip>
            </div>
            <div class="form-group" data-ng-hide="protocol == 'saml'">
                <label class="col-md-2 control-label" for="adminUrl">{{:: 'admin-url' | translate}}</label>
                <div class="col-sm-6">
                    <input class="form-control" type="text" name="adminUrl" id="adminUrl"
                           data-ng-model="client.adminUrl">
                </div>
                <kc-tooltip>{{:: 'admin-url.tooltip' | translate}}</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' | translate}}</label>
                <div class="col-sm-6">
                    <input class="form-control" type="text" name="masterSamlUrl" id="masterSamlUrl"
                           data-ng-model="client.adminUrl">
                </div>
                <kc-tooltip>{{:: 'master-saml-processing-url.tooltip' | translate}}</kc-tooltip>
            </div>
            <div class="form-group clearfix block" data-ng-show="protocol == 'saml'">
                <label class="col-md-2 control-label" for="urlReferenceName">{{:: 'idp-sso-url-ref' | translate}}</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>{{:: 'idp-sso-url-ref.tooltip' | translate}}</kc-tooltip>
            </div>
            <div class="form-group clearfix block" data-ng-show="protocol == 'saml'">
                <label class="col-md-2 control-label" for="idpInitiatedRelayState">{{:: 'idp-sso-relay-state' | translate}}</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>{{:: 'idp-sso-relay-state.tooltip' | translate}}</kc-tooltip>
            </div>
            <div class="form-group" data-ng-show="!client.bearerOnly && protocol == 'openid-connect' && (client.standardFlowEnabled || client.implicitFlowEnabled)">
                <label class="col-md-2 control-label" for="newWebOrigin">{{:: 'web-origins' | translate}}</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-btn">
                            <button class="btn btn-default" type="button" data-ng-click="deleteWebOrigin($index)"><span class="fa fa-minus"></span></button>
                        </div>
                    </div>

                    <div class="input-group">
                        <input class="form-control" ng-model="newWebOrigin" id="newWebOrigin">
                        <div class="input-group-btn">
                            <button class="btn btn-default" type="button" data-ng-click="newWebOrigin.length > 0 && addWebOrigin()"><span class="fa fa-plus"></span></button>
                        </div>
                    </div>
                </div>

                <kc-tooltip>{{:: 'web-origins.tooltip' | translate}}</kc-tooltip>
            </div>
        </fieldset>
        <fieldset data-ng-show="protocol == 'saml'">
            <legend collapsed><span class="text">{{:: 'fine-saml-endpoint-conf' | translate}}</span>  <kc-tooltip>{{:: 'fine-saml-endpoint-conf.tooltip' | translate}}</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-post-binding-url' | translate}}</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>{{:: 'assertion-consumer-post-binding-url.tooltip' | translate}}</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-redirect-binding-url' | translate}}</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>{{:: 'assertion-consumer-redirect-binding-url.tooltip' | translate}}</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' | translate}}</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>{{:: 'logout-service-post-binding-url.tooltip' | translate}}</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-redir-binding-url' | translate}}</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>{{:: 'logout-service-redir-binding-url.tooltip' | translate}}</kc-tooltip>
            </div>
        </fieldset>

        <fieldset data-ng-show="protocol == 'openid-connect'">
            <legend collapsed><span class="text">{{:: 'fine-oidc-endpoint-conf' | translate}}</span>  <kc-tooltip>{{:: 'fine-oidc-endpoint-conf.tooltip' | translate}}</kc-tooltip></legend>
            <div class="form-group clearfix block" data-ng-show="protocol == 'openid-connect'">
                <label class="col-md-2 control-label" for="userInfoSignedResponseAlg">{{:: 'user-info-signed-response-alg' | translate}}</label>
                <div class="col-sm-6">
                    <div>
                        <select class="form-control" id="userInfoSignedResponseAlg"
                                ng-change="changeUserInfoSignedResponseAlg()"
                                ng-model="userInfoSignedResponseAlg"
                                ng-options="sig for sig in oidcSignatureAlgorithms">
                        </select>
                    </div>
                </div>
                <kc-tooltip>{{:: 'user-info-signed-response-alg.tooltip' | translate}}</kc-tooltip>
            </div>
            <div class="form-group clearfix block" data-ng-show="protocol == 'openid-connect'">
                <label class="col-md-2 control-label" for="requestObjectSignatureAlg">{{:: 'request-object-signature-alg' | translate}}</label>
                <div class="col-sm-6">
                    <div>
                        <select class="form-control" id="requestObjectSignatureAlg"
                                ng-change="changeRequestObjectSignatureAlg()"
                                ng-model="requestObjectSignatureAlg"
                                ng-options="sig for sig in requestObjectSignatureAlgorithms">
                        </select>
                    </div>
                </div>
                <kc-tooltip>{{:: 'request-object-signature-alg.tooltip' | translate}}</kc-tooltip>
            </div>
        </fieldset>

        <div class="form-group">
            <div class="col-md-10 col-md-offset-2" data-ng-show="access.manageClients">
                <button kc-save  data-ng-disabled="!changed">{{:: 'save' | translate}}</button>
                <button kc-reset data-ng-disabled="!changed">{{:: 'cancel' | translate}}</button>
            </div>
        </div>
    </form>
</div>

<kc-menu></kc-menu>