<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 data-ng-show="create">{{:: 'add-client' | translate}}</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' | translate}}</label>

                <div class="col-md-6" data-ng-hide="importing">
                    <label for="import-file" class="btn btn-default">{{:: 'select-file' | translate}} <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' | translate}}</button>
                    <button class="btn btn-default" data-ng-click="reset()">{{:: 'clear-import' | translate}}</button>
                </div>
            </div>

            <div class="form-group">
                <label class="col-md-2 control-label" for="clientId">{{:: 'client-id' | translate}} <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>{{:: '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 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 clearfix block">
                <label class="col-md-2 control-label" for="directGrantsOnly">{{:: 'direct-grants-only' | translate}}</label>
                <div class="col-sm-6">
                    <input ng-model="client.directGrantsOnly" name="directGrantsOnly" id="directGrantsOnly" onoffswitch on-text="{{:: 'onText' | translate}}" off-text="{{:: 'offText' | translate}}"/>
                </div>
                <kc-tooltip>{{:: 'direct-grants-only.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" 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.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 clearfix block" data-ng-show="protocol == 'saml'">
                <label class="col-md-2 control-label" for="samlServerSignature">{{:: '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'">
                <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.directGrantsOnly">
                <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-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-redirect-uris.tooltip' | translate}}</kc-tooltip>
            </div>

            <div class="form-group" data-ng-show="!client.bearerOnly && !create">
                <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="create || 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 && !create && protocol == 'openid-connect'">
                <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-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>{{:: '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>

        <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' | translate}}</button>
                <button kc-cancel data-ng-click="cancel()">{{:: 'cancel' | translate}}</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' | translate}}</button>
                <button kc-reset data-ng-disabled="!changed">{{:: 'cancel' | translate}}</button>
            </div>
        </div>
    </form>
</div>

<kc-menu></kc-menu>