<div class="bs-sidebar col-md-3 clearfix" data-ng-include data-src="'partials/realm-menu.html'"></div>
<div id="content-area" class="col-md-9" role="main">
    <ul class="nav nav-tabs nav-tabs-pf"  data-ng-show="!create">
        <li class="active"><a href="#/realms/{{realm.realm}}/applications/{{application.name}}">Settings</a></li>
        <li data-ng-show="!application.bearerOnly && !application.publicClient"><a href="#/realms/{{realm.realm}}/applications/{{application.name}}/credentials">Credentials</a></li>
        <li><a href="#/realms/{{realm.realm}}/applications/{{application.name}}/installation">Installation</a></li>
        <li><a href="#/realms/{{realm.realm}}/applications/{{application.name}}/roles">Roles</a></li>
        <li><a href="#/realms/{{realm.realm}}/applications/{{application.name}}/claims">Claims</a></li>
        <li><a href="#/realms/{{realm.realm}}/applications/{{application.name}}/scope-mappings">Scope</a></li>
        <li><a href="#/realms/{{realm.realm}}/applications/{{application.name}}/revocation">Revocation</a></li>
        <li data-ng-show="!application.bearerOnly"><a href="#/realms/{{realm.realm}}/applications/{{application.name}}/sessions">Sessions</a></li>
    </ul>
    <h2></h2>
    <div id="content">
        <h2 data-ng-hide="create"><span>{{application.name}}</span> Settings</h2>
        
        <ol class="breadcrumb" data-ng-show="create">
            <li><a href="#/realms/{{realm.realm}}">{{realm.realm}}</a></li>
            <li><a href="#/realms/{{realm.realm}}/applications">Applications</a></li>
            <li class="active">Add Application</li>
        </ol>
        <h2 data-ng-show="create" class="pull-left"><span>{{realm.realm}}</span> Add Application</h2>
        <p class="subtitle" data-ng-show="create"><span class="required">*</span> Required fields</p>

        <form class="form-horizontal" name="applicationForm" novalidate kc-read-only="!access.manageApplications">
            <fieldset class="border-top">
                <div class="form-group">
                    <label class="col-sm-2 control-label" for="name">Name <span class="required" data-ng-show="create">*</span></label>
                    <div class="col-sm-4">
                        <input class="form-control" type="text" id="name" name="name" data-ng-model="application.name" autofocus required>
                    </div>
                </div>
                <div class="form-group clearfix block">
                    <label class="col-sm-2 control-label" for="enabled">Enabled</label>
                    <div class="col-sm-6">
                        <input ng-model="application.enabled" name="enabled" id="enabled" onoffswitch />
                    </div>
                    <span tooltip-placement="right" tooltip="Disabled applications cannot initiate a login or have obtain access tokens." class="pficon pficon-help"></span>
                </div>
                <div class="form-group">
                    <label class="col-sm-2 control-label" for="accessType">Access Type</label>
                    <div class="col-sm-6">
                        <div class="select-kc">
                            <select id="accessType"
                                    ng-change="changeAccessType()"
                                    ng-model="accessType"
                                    ng-options="aType for aType in accessTypes">
                            </select>
                        </div>
                    </div>
                    <span tooltip-placement="right" tooltip="'Confidential' applications require a secret to initiate login protocol.  'Public' clients do not require a secret.  'Bearer-only' applications are web services that never initiate a login." class="pficon pficon-help"></span>
                </div>
                <div class="form-group" data-ng-show="!application.bearerOnly">
                    <label class="col-sm-2 control-label" for="newRedirectUri">Redirect URI <span class="required" data-ng-show="create">*</span></label>
                    <div class="col-sm-6 multiple" ng-repeat="redirectUri in application.redirectUris">
                        <div class="input-group kc-item-deletable">
                            <input class="form-control" type="text" data-ng-class="{'input-below':!$first}"
                                   name="redirectUri" id="redirectUri" data-ng-model="redirectUri" readonly />
                            <span class="input-group-btn">
                                <button class="btn btn-default" type="button" data-ng-click="deleteRedirectUri($index)">
                                    Delete</button>
                            </span>
                        </div>
                    </div>
                    <div class="col-sm-6 multiple">
                        <div class="input-group">
                            <input class="form-control" type="text" name="newRedirectUri" id="newRedirectUri"
                                   placeholder="New Redirect URI..." data-ng-model="newRedirectUri"
                                   data-ng-class="{'input-below':application.redirectUris.length}" />
                            <span class="input-group-btn">
                                <button class="btn btn-default" data-ng-click="addRedirectUri()" ng-show="newRedirectUri.length > 0">Add</button>
                            </span>
                        </div>
                    </div>
                    <span tooltip-placement="right" 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." class="pficon pficon-help"></span>
                </div>
                <div class="form-group" data-ng-show="!application.bearerOnly && !create">
                    <label class="col-sm-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="application.baseUrl">
                    </div>
                    <span tooltip-placement="right" tooltip="Optional URL to use when linking to this application. i.e. the welcome page." class="pficon pficon-help"></span>
                </div>
                <div class="form-group" data-ng-hide="create">
                    <label class="col-sm-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="application.adminUrl">
                    </div>
                    <span tooltip-placement="right" tooltip="URL to the admin interface of the application.  Set this if the application 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 application." class="pficon pficon-help"></span>
                </div>
                <div class="form-group" data-ng-show="!application.bearerOnly && !create">
                    <label class="col-sm-2 control-label" for="newWebOrigin">Web Origin</label>
                    <div class="col-sm-6 multiple" ng-repeat="webOrigin in application.webOrigins">
                        <div class="input-group kc-item-deletable">
                            <input class="form-control" type="text" data-ng-class="{'input-below':!$first}"
                                   name="webOrigin" id="webOrigin" data-ng-model="webOrigin" readonly />
                            <span class="input-group-btn">
                                <button class="btn btn-default" type="button" data-ng-click="deleteWebOrigin($index)">
                                    Delete</button>
                            </span>
                        </div>
                    </div>
                    <div class="col-sm-6 multiple">
                        <div class="input-group">
                            <input class="form-control" type="text" name="newWebOrigin" id="newWebOrigin"
                                   placeholder="New Web Origin..." data-ng-model="newWebOrigin"
                                   data-ng-class="{'input-below':application.webOrigins.length}" />
                            <span class="input-group-btn">
                                <button class="btn btn-default" data-ng-click="addWebOrigin()" ng-show="newWebOrigin.length > 0">Add</button>
                            </span>
                        </div>
                    </div>
                    <span tooltip-placement="right" tooltip="Allowed CORS origins.  Only useful if the client adapter has CORS processing enabled." class="pficon pficon-help"></span>
                </div>
            </fieldset>

            <div class="pull-right form-actions" data-ng-show="create && access.manageApplications">
                <button kc-cancel data-ng-click="cancel()">Cancel</button>
                <button kc-save data-ng-show="changed">Save</button>
            </div>
            <div class="pull-right form-actions" data-ng-show="!create && access.manageApplications">
                <button kc-reset data-ng-show="changed">Clear changes</button>
                <button kc-save  data-ng-show="changed">Save</button>
                <button kc-delete data-ng-click="remove()" data-ng-hide="changed">Delete Application</button>
            </div>
        </form>
    </div>
</div>
