<!--
  ~ Copyright 2017 Red Hat, Inc. and/or its affiliates
  ~ and other contributors as indicated by the @author tags.
  ~
  ~ Licensed under the Apache License, Version 2.0 (the "License");
  ~ you may not use this file except in compliance with the License.
  ~ You may obtain a copy of the License at
  ~
  ~ http://www.apache.org/licenses/LICENSE-2.0
  ~
  ~ Unless required by applicable law or agreed to in writing, software
  ~ distributed under the License is distributed on an "AS IS" BASIS,
  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  ~ See the License for the specific language governing permissions and
  ~ limitations under the License.
  -->

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

    <ul class="nav nav-tabs nav-tabs-pf">
        <li>
            <a href="#/realms/{{realm.realm}}/clients/{{client.id}}/client-scopes/setup-scopes">{{:: 'client-scopes.setup' | translate}}</a>
            <kc-tooltip>{{:: 'client-scopes.setup.tooltip' | translate}}</kc-tooltip>
        </li>
        <li class="active">
            <a href="#/realms/{{realm.realm}}/clients/{{client.id}}/client-scopes/evaluate-scopes">{{:: 'client-scopes.evaluate' | translate}}</a>
            <kc-tooltip>{{:: 'client-scopes.evaluate.tooltip' | translate}}</kc-tooltip>
        </li>
    </ul>

    <form class="form-horizontal" name="evaluateForm" novalidate kc-read-only="!access.viewClients">
        <fieldset>
            <div class="form-group clearfix" data-ng-show="client.protocol == 'openid-connect'">
                <label class="col-md-2 control-label" for="scopeParam">{{:: 'scope-parameter' | translate}}</label>
                <div class="col-md-6">
                    <input class="form-control" id="scopeParam" type="text" value="{{scopeParam}}" readonly kc-select-action="click">
                </div>
                <kc-tooltip>{{:: 'scope-parameter.tooltip' | translate}}</kc-tooltip>
            </div>
        </fieldset>

        <div class="form-group">
            <label class="col-md-2 control-label" class="control-label">{{:: 'client-scopes.evaluate.scopes' | translate}}</label>
            <kc-tooltip>{{:: 'client-scopes.evaluate.scopes.tooltip' | translate}}</kc-tooltip>

            <div class="col-md-10">
                <div class="row">
                    <div class="col-md-4">
                        <label class="control-label" for="available">{{:: 'client-scopes.evaluate.scopes.available' | translate}}</label>
                        <kc-tooltip>{{:: 'client-scopes.evaluate.scopes.available.tooltip' | translate}}</kc-tooltip>
                        <select id="available" class="form-control overflow-select" multiple size="5"
                                ng-multiple="true"
                                ng-model="selectedClientScopes">
                            <option ng-repeat="r in availableClientScopes | orderBy:'name'"
                                    value="{{r}}" title="{{r.name}}">
                                {{r.name}}
                            </option>
                        </select>
                        <button ng-disabled="selectedClientScopes.length == 0" class="btn btn-default" type="submit" ng-click="addAppliedClientScope()">
                            {{:: 'add-selected' | translate}} <i class="fa fa-angle-double-right"></i>
                        </button>
                    </div>
                    <div class="col-md-4">
                        <label class="control-label" for="assigned">{{:: 'client-scopes.evaluate.scopes.assigned' | translate}}</label>
                        <kc-tooltip>{{:: 'client-scopes.evaluate.scopes.assigned.tooltip' | translate}}</kc-tooltip>
                        <select id="assigned" class="form-control overflow-select" multiple size=5
                                ng-multiple="true"
                                ng-model="selectedDefClientScopes">
                            <option ng-repeat="r in assignedClientScopes | orderBy:'name'"
                                    value="{{r}}" title="{{r.name}}">
                                {{r.name}}
                            </option>
                        </select>
                        <button ng-disabled="selectedDefClientScopes.length == 0" class="btn btn-default" type="submit" ng-click="deleteAppliedClientScope()">
                            <i class="fa fa-angle-double-left"></i> {{:: 'remove-selected' | translate}}
                        </button>
                    </div>
                    <div class="col-md-4">
                        <label class="control-label" for="assigned">{{:: 'client-scopes.evaluate.scopes.effective' | translate}}</label>
                        <kc-tooltip>{{:: 'client-scopes.evaluate.scopes.effective.tooltip' | translate}}</kc-tooltip>
                        <select id="effective" class="form-control overflow-select" multiple size=5
                                disabled="true"
                                ng-model="dummymodel">
                            <option ng-repeat="r in effectiveClientScopes | orderBy:'name'"
                                    value="{{r}}" title="{{r.name}}">
                                {{r.name}}
                            </option>
                        </select>
                    </div>
                </div>
            </div>
        </div>

        <div class="form-group clearfix" data-ng-show="access.viewUsers">
            <label class="col-md-2 control-label" for="users">{{:: 'user' | translate}}</label>

            <div class="col-md-6">
                <input type="hidden" ui-select2="usersUiSelect" id="users" data-ng-model="selectedUser" data-ng-change="selectUser(selectedUser);" data-placeholder="{{:: 'authz-select-user' | translate}}...">
                </input>
            </div>

            <kc-tooltip>{{:: 'client-scopes.evaluate.user.tooltip' | translate}}</kc-tooltip>
        </div>

        <div class="form-group clearfix">
            <div class="col-md-10 col-md-offset-1" data-ng-show="client.access.view">
                <button type="submit" data-ng-click="sendEvaluationRequest()" class="btn btn-primary" tooltip-trigger="mouseover mouseout" tooltip="{{:: 'send-evaluation-request.tooltip' | translate}}" tooltip-placement="bottom">{{:: 'send-evaluation-request' | translate}}</button>
            </div>
        </div>
    </form>


    <ul class="nav nav-tabs nav-tabs-pf"  data-ng-show="isResponseAvailable()">
        <li class="{{tabCss.tab1}}" data-ng-click="showTab(1)">
            <a href="">{{:: 'evaluated-protocol-mappers' | translate}}</a>
            <kc-tooltip>{{:: 'evaluated-protocol-mappers.tooltip' | translate}}</kc-tooltip>
        </li>
        <li class="{{tabCss.tab2}}" data-ng-click="showTab(2)">
            <a href="">{{:: 'evaluated-roles' | translate}}</a>
            <kc-tooltip>{{:: 'evaluated-roles.tooltip' | translate}}</kc-tooltip>
        </li>
        <li class="{{tabCss.tab3}}" data-ng-click="showTab(3)" data-ng-show="isAccessTokenAvailable()">
            <a href="">{{:: 'generated-access-token' | translate}}</a>
            <kc-tooltip>{{:: 'generated-access-token.tooltip' | translate}}</kc-tooltip>
        </li>
        <li class="{{tabCss.tab4}}" data-ng-click="showTab(4)" data-ng-show="isIDTokenAvailable()">
            <a href="">{{:: 'generated-id-token' | translate}}</a>
            <kc-tooltip>{{:: 'generated-id-token.tooltip' | translate}}</kc-tooltip>
        </li>
        <li class="{{tabCss.tab5}}" data-ng-click="showTab(5)" data-ng-show="isUserInfoAvailable()">
            <a href="">{{:: 'generated-user-info' | translate}}</a>
            <kc-tooltip>{{:: 'generated-user-info.tooltip' | translate}}</kc-tooltip>
        </li>
    </ul>

    <!-- Effective protocol mappers -->
    <table class="table table-striped table-bordered" data-ng-show="protocolMappersShown()">
        <thead>
        <tr>
            <th class="kc-table-actions" colspan="4">
                <div class="form-inline">
                    <div>
                        <div class="input-group">
                            <input type="text" placeholder="{{:: 'search.placeholder' | translate}}" data-ng-model="search.mapperName" class="form-control search" onkeyup="if(event.keyCode == 13){$(this).next('I').click();}">
                            <div class="input-group-addon">
                                <i class="fa fa-search" type="submit"></i>
                            </div>
                        </div>
                    </div>
                </div>
            </th>
        </tr>
        <tr data-ng-hide="protocolMappers.length == 0">
            <th>{{:: 'name' | translate}}</th>
            <th>{{:: 'parent-client-scope' | translate}}</th>
            <th>{{:: 'category' | translate}}</th>
            <th>{{:: 'type' | translate}}</th>
            <th>{{:: 'priority-order' | translate}}</th>
        </tr>
        </thead>
        <tbody>
        <tr ng-repeat="mapper in protocolMappers | filter:search | orderBy:sortMappersByPriority">
            <td><a href="#/realms/{{realm.realm}}/{{mapper.containerType}}s/{{mapper.containerId}}/mappers/{{mapper.mapperId}}">{{mapper.mapperName}}</a></td>
            <td><a href="#/realms/{{realm.realm}}/{{mapper.containerType}}s/{{mapper.containerId}}">{{mapper.containerName}}</a></td>
            <td>{{mapperTypes[mapper.protocolMapper].category}}</td>
            <td>{{mapperTypes[mapper.protocolMapper].name}}</td>
            <td>{{mapperTypes[mapper.protocolMapper].priority}}</td>
        </tr>
        <tr data-ng-show="mappers.length == 0">
            <td>{{:: 'no-mappers-available' | translate}}</td>
        </tr>
        </tbody>
    </table>


    <!-- Effective role scope mappings -->
    <form class="form-horizontal" name="realmForm" novalidate kc-read-only="!access.viewClients">
        <div class="form-group" data-ng-show="rolesShown()">
            <label class="col-md-2 control-label" class="control-label">{{:: 'realm-roles' | translate}}</label>
            <div class="col-md-10">
                <div class="row">
                    <div class="col-md-4">
                        <label class="control-label" for="available-realm-roles">{{:: 'client-scopes.evaluate.not-granted-roles' | translate}}</label>
                        <kc-tooltip>{{:: 'client-scopes.evaluate.not-granted-roles.tooltip' | translate}}</kc-tooltip>

                        <select id="available-realm-roles" class="form-control overflow-select" multiple size="5"
                                disabled="true"
                                ng-model="dummymodel1">
                            <option ng-repeat="r in notGrantedRealmRoles | orderBy:'name'"
                                    value="{{r}}" title="{{r.name}}">
                                {{r.name}}
                            </option>
                        </select>
                    </div>
                    <div class="col-md-4">
                        <label class="control-label" for="realm-composite">{{:: 'client-scopes.evaluate.granted-realm-effective-roles' | translate}}  </label>
                        <kc-tooltip>{{:: 'client-scopes.evaluate.granted-realm-effective-roles.tooltip' | translate}}</kc-tooltip>
                        <select id="realm-composite" class="form-control overflow-select" multiple size=5
                                disabled="true"
                                ng-model="dummymodel2">
                            <option ng-repeat="r in grantedRealmRoles | orderBy:'name'"
                                    value="{{r}}" title="{{r.name}}">
                                {{r.name}}
                            </option>
                        </select>
                    </div>
                </div>
            </div>
        </div>

        <div class="form-group" data-ng-show="rolesShown()">
            <label class="col-md-2 control-label" for="clients">{{:: 'client-roles' | translate}}</label>
            <div class="col-md-6">
                <input type="hidden" ui-select2="clientsUiSelect" id="clients" data-ng-model="selectedClient" data-ng-change="selectClient(selectedClient);" data-placeholder="{{:: 'authz-select-client' | translate}}...">
                </input>
            </div>

            <div class="col-md-10 col-md-offset-2">
                <div class="row" data-ng-show="selectedClient">
                    <div class="col-md-4">
                        <label class="control-label" for="available-client">{{:: 'client-scopes.evaluate.not-granted-roles' | translate}}</label>
                        <kc-tooltip>{{:: 'client-scopes.evaluate.not-granted-roles.tooltip' | translate}}</kc-tooltip>
                        <select id="available-client" class="form-control overflow-select" multiple size="5"
                                disabled="true"
                                ng-model="dummymodel">
                            <option ng-repeat="r in notGrantedClientRoles | orderBy:'name'"
                                    value="{{r}}" title="{{r.name}}">
                                {{r.name}}
                            </option>
                        </select>
                    </div>
                    <div class="col-md-4">
                        <label class="control-label" for="client-composite">{{:: 'client-scopes.evaluate.granted-client-effective-roles' | translate}}</label>
                        <kc-tooltip>{{:: 'client-scopes.evaluate.granted-realm-effective-roles.tooltip' | translate}}</kc-tooltip>
                        <select id="client-composite" class="form-control overflow-select" multiple size=5
                                disabled="true"
                                ng-model="dummymodel">
                            <option ng-repeat="r in grantedClientRoles | orderBy:'name'"
                                    value="{{r}}" title="{{r.name}}">
                                {{r.name}}
                            </option>
                        </select>
                    </div>
                </div>
            </div>
        </div>
    </form>


    <!-- Example content: One of Access token, ID token or User Info -->
    <form class="form-horizontal" name="realmForm" novalidate kc-read-only="!access.viewClients" data-ng-show="exampleTabInfo().isShown">
        <div class="form-group">
            <div class="col-md-10 col-md-offset-1">
                <textarea class="form-control" rows="20" kc-select-action="click" readonly>{{exampleTabInfo().value}}</textarea>
            </div>
        </div>
    </form>

</div>

<kc-menu></kc-menu>