<div class="oauth-only-options-container" ng-show="serviceFormCtrl.serviceData.type=='oauth' || serviceFormCtrl.serviceData.type=='oidc'">
    <div class="panel panel-warning">
        <div class="panel-heading">
            <h3 class="panel-title">
                <span th:remove="tag" th:text="#{services.form.header.oauthOptions}"/>
            </h3>
        </div>
        <div class="panel-body">

            <!-- OIDC JWKS -->
            <div class="form-group" ng-show="serviceFormCtrl.serviceData.type=='oidc'">
                <label class="col-sm-4" for="oidcJwks">
                    <span th:remove="tag" th:text="#{services.form.label.oidc.jwks}"/>
                    <i class="fa fa-lg fa-question-circle form-tooltip-icon"
                       data-toggle="tooltip"
                       data-placement="top"
                       th:title="#{services.form.tooltip.oidc.jwks}"></i>
                </label>

                <div class="col-sm-8">
                    <input type="text" autocomplete="off" class="form-control" id="oidcJwks"
                           ng-model="serviceFormCtrl.serviceData.oidc.jwks"/>

                </div>
            </div>

            <!-- OIDC Scopes -->
            <div class="form-group" ng-show="serviceFormCtrl.serviceData.type=='oidc'">
                <label class="col-sm-4" for="scopes">
                    <span th:remove="tag" th:text="#{services.form.label.oidc.scopes}"/>
                    <i class="fa fa-lg fa-question-circle form-tooltip-icon"
                       data-toggle="tooltip"
                       data-placement="top"
                       th:title="#{services.form.tooltip.oidc.scopes}"></i>
                </label>

                <div class="col-sm-8">
                    <input type="text" autocomplete="off" class="form-control" id="scopes"
                           ng-model="serviceFormCtrl.serviceData.oidc.scopes"/>

                </div>
            </div>

            <!-- OAuth Client ID -->
            <div class="form-group">
                <label class="col-sm-4" for="oauthClientId">
                    <span th:remove="tag" th:text="#{services.form.label.oauthClientId}"/>
                    <i class="fa fa-lg fa-question-circle form-tooltip-icon"
                       data-toggle="tooltip"
                       data-placement="top"
                       th:title="#{services.form.tooltip.oauthClientId}"></i>
                </label>

                <div class="col-sm-8">
                    <div class="input-group">
                        <div class="input-group-addon input-group-required" th:title="#{services.form.required}">
                            <i class="fa fa-exclamation-triangle"></i>
                        </div>
                        <input type="text" autocomplete="off" class="form-control" id="oauthClientId"
                               ng-model="serviceFormCtrl.serviceData.oauth.clientId"/>
                    </div>
                </div>
            </div>

            <!-- OAuth Client Secret -->
            <div class="form-group">
                <label class="col-sm-4" for="oauthClientSecret">
                    <span th:remove="tag" th:text="#{services.form.label.oauthClientSecret}"/>
                    <i class="fa fa-lg fa-question-circle form-tooltip-icon"
                       data-toggle="tooltip"
                       data-placement="top"
                       th:title="#{services.form.tooltip.oauthClientSecret}"></i>
                </label>
                <div class="col-sm-8">
                    <div class="input-group">
                        <div class="input-group-addon input-group-required" th:title="#{services.form.required}">
                            <i class="fa fa-exclamation-triangle"></i>
                        </div>
                        <input class="form-control" autocomplete="off" id="oauthClientSecret" type="text"
                               ng-model="serviceFormCtrl.serviceData.oauth.clientSecret" ng-if="serviceFormCtrl.showOAuthSecret"/>
                        <input class="form-control" autocomplete="off" id="oauthClientSecret" type="password"
                               ng-model="serviceFormCtrl.serviceData.oauth.clientSecret" ng-if="!serviceFormCtrl.showOAuthSecret"/>
                    </div>
                </div>

                <div class="col-md-8 col-md-offset-4">
                    <!-- OAuth Show/Hide Client Secret -->
                    <div class="checkbox">
                        <label for="oauthShowSecret">
                            <input type="checkbox" id="oauthShowSecret" ng-model="serviceFormCtrl.showOAuthSecret"/>
                            <span th:remove="tag" th:text="#{services.form.label.oauthShowSecret}"/>
                            <i class="fa fa-lg fa-question-circle form-tooltip-icon no-float"
                               data-toggle="tooltip"
                               data-placement="top"
                               th:title="#{services.form.tooltip.oauthShowSecret}"></i>
                        </label>
                    </div>
                    <!-- OAuth Bypass Approval Prompt -->
                    <div class="checkbox">
                        <label for="oauthBypass">
                            <input type="checkbox" id="oauthBypass" ng-model="serviceFormCtrl.serviceData.oauth.bypass"/>
                            <span th:remove="tag" th:text="#{services.form.label.oauthBypass}"/>
                            <i class="fa fa-lg fa-question-circle form-tooltip-icon no-float"
                               data-toggle="tooltip"
                               data-placement="top"
                               th:title="#{services.form.tooltip.oauthBypass}"></i>
                        </label>
                    </div>
                    <!-- OAuth Refresh token generation -->
                    <div class="checkbox">
                        <label for="oauthRefreshToken">
                            <input type="checkbox" id="oauthRefreshToken" ng-model="serviceFormCtrl.serviceData.oauth.refreshToken"/>
                            <span th:remove="tag" th:text="#{services.form.label.oauthRefreshToken}"/>
                            <i class="fa fa-lg fa-question-circle form-tooltip-icon no-float"
                               data-toggle="tooltip"
                               data-placement="top"
                               th:title="#{services.form.tooltip.oauthRefreshToken}"></i>
                        </label>
                    </div>
                    <!-- OAuth JSON format -->
                    <div class="checkbox">
                        <label for="oauthJsonFormat">
                            <input type="checkbox" id="oauthJsonFormat" ng-model="serviceFormCtrl.serviceData.oauth.jsonFormat"/>
                            <span th:remove="tag" th:text="#{services.form.label.oauthJsonFormat}"/>
                            <i class="fa fa-lg fa-question-circle form-tooltip-icon no-float"
                               data-toggle="tooltip"
                               data-placement="top"
                               th:title="#{services.form.tooltip.oauthJsonFormat}"></i>
                        </label>
                    </div>

                    <!-- OIDC Options -->
                    <div class="checkbox" ng-show="serviceFormCtrl.serviceData.type=='oidc'">
                        <label for="oidcSignToken">
                            <input type="checkbox" id="oidcSignToken" ng-model="serviceFormCtrl.serviceData.oidc.signToken"/>
                            <span th:remove="tag" th:text="#{services.form.label.oidc.signToken}"/>
                            <i class="fa fa-lg fa-question-circle form-tooltip-icon no-float"
                               data-toggle="tooltip"
                               data-placement="top"
                               th:title="#{services.form.tooltip.oidc.signToken}"></i>
                        </label>
                    </div>

                    <div class="checkbox" ng-show="serviceFormCtrl.serviceData.type=='oidc'">
                        <label for="oidcImplicit">
                            <input type="checkbox" id="oidcImplicit" ng-model="serviceFormCtrl.serviceData.oidc.implicit"/>
                            <span th:remove="tag" th:text="#{services.form.label.oidc.implicit}"/>
                            <i class="fa fa-lg fa-question-circle form-tooltip-icon no-float"
                               data-toggle="tooltip"
                               data-placement="top"
                               th:title="#{services.form.tooltip.oidc.implicit}"></i>
                        </label>
                    </div>

                    <div class="checkbox" ng-show="serviceFormCtrl.serviceData.type=='oidc'">
                        <label for="oidcEncrypt">
                            <input type="checkbox" id="oidcEncrypt" ng-model="serviceFormCtrl.serviceData.oidc.encrypt"/>
                            <span th:remove="tag" th:text="#{services.form.label.oidc.encrypt}"/>
                            <i class="fa fa-lg fa-question-circle form-tooltip-icon no-float"
                               data-toggle="tooltip"
                               data-placement="top"
                               th:title="#{services.form.tooltip.oidc.encrypt}"></i>
                        </label>
                    </div>
                </div>
            </div>


            <!-- OIDC Enc Alg -->
            <div class="form-group" ng-show="serviceFormCtrl.serviceData.type=='oidc'">
                <label class="col-sm-4" for="oidcEncryptAlg">
                    <span th:remove="tag" th:text="#{services.form.label.oidc.encryptAlg}"/>
                    <i class="fa fa-lg fa-question-circle form-tooltip-icon"
                       data-toggle="tooltip"
                       data-placement="top"
                       th:title="#{services.form.tooltip.oidc.encryptAlg}"></i>
                </label>

                <div class="col-sm-8">
                    <input type="text" autocomplete="off" class="form-control" id="oidcEncryptAlg"
                           ng-model="serviceFormCtrl.serviceData.oidc.encryptAlg"/>
                </div>
            </div>


            <!-- OIDC Enc Encoding -->
            <div class="form-group" ng-show="serviceFormCtrl.serviceData.type=='oidc'">
                <label class="col-sm-4" for="oidcEncryptEnc">
                    <span th:remove="tag" th:text="#{services.form.label.oidc.encryptEnc}"/>
                    <i class="fa fa-lg fa-question-circle form-tooltip-icon"
                       data-toggle="tooltip"
                       data-placement="top"
                       th:title="#{services.form.tooltip.oidc.encryptEnc}"></i>
                </label>

                <div class="col-sm-8">
                    <input type="text" autocomplete="off" class="form-control" id="oidcEncryptEnc"
                           ng-model="serviceFormCtrl.serviceData.oidc.encryptEnc"/>
                </div>
            </div>


            <!-- OIDC Dynamic Registration -->
            <div class="form-group" ng-show="serviceFormCtrl.serviceData.type=='oidc'">
                <div class="col-sm-6 checkbox">
                    <label class="col-sm-12" for="dynamic">
                        <input type="checkbox" id="dynamic" disabled
                               ng-model="serviceFormCtrl.serviceData.oidc.dynamic"/>
                        <span th:remove="tag" th:text="#{services.form.label.oidc.dynamic}"/>
                        <i class="fa fa-lg fa-question-circle form-tooltip-icon no-float"
                           data-toggle="tooltip"
                           data-placement="top"
                           th:title="#{services.form.tooltip.oidc.dynamic}"></i>
                    </label>
                </div>
            </div>

            <!-- OIDC Dynamic Registration Date -->
            <div class="form-group" ng-show="serviceFormCtrl.serviceData.type=='oidc' && serviceFormCtrl.serviceData.oidc.dynamic">
                <label class="col-sm-4" for="oidcDynamicDate">
                    <span th:remove="tag" th:text="#{services.form.label.oidc.dynamicDate}"/>
                    <i class="fa fa-lg fa-question-circle form-tooltip-icon"
                       data-toggle="tooltip"
                       data-placement="top"
                       th:title="#{services.form.tooltip.oidc.dynamicDate}"></i>
                </label>

                <div class="col-sm-8">
                    <input type="text" disabled readonly
                           autocomplete="off" class="form-control"
                           id="oidcDynamicDate"
                           ng-model="serviceFormCtrl.serviceData.oidc.dynamicDate"/>
                </div>
            </div>
        </div>

    </div>

</div>

