<!--
  ~ Copyright 2021 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}}/client-policies/policies">{{:: 'client-policies' | translate}}</a></li>
        <li data-ng-show="createNew">{{:: 'create-client-policy' | translate}}</li>
        <li data-ng-hide="createNew">{{editedPolicy.name}}</li>
    </ol>

    <h1 data-ng-show="createNew">{{:: 'create-client-policy' | translate}}</h1>
    <h1 data-ng-hide="createNew">{{editedPolicy.name|capitalize}}</h1>

    <form class="form-horizontal" name="realmForm" novalidate>

        <fieldset class="border-top" kc-read-only="isReadOnly()">

            <div class="form-group">
                <label class="col-md-2 control-label" for="clientPolicyName">{{:: 'name' | translate}} <span class="required">*</span></label>
                <div class="col-sm-6">
                    <input class="form-control" type="text" id="clientPolicyName" name="clientPolicyName" data-ng-model="editedPolicy.name" autofocus required>
                </div>
                <kc-tooltip>{{:: 'client-policy-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-md-6">
                    <textarea class="form-control" rows="5" cols="50" id="description" name="description" data-ng-model="editedPolicy.description"></textarea>
                </div>
            </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="editedPolicy.enabled" name="enabled" id="enabled" onoffswitch on-text="{{:: 'onText' | translate}}" off-text="{{:: 'offText' | translate}}"/>
                </div>
                <kc-tooltip>{{:: 'client-policy-enabled.tooltip' | translate}}</kc-tooltip>
            </div>

        </fieldset>

        <fieldset data-ng-hide="isReadOnly()">

            <div class="form-group">
                <div class="col-md-10 col-md-offset-2">
                    <button kc-save>{{:: 'save' | translate}}</button>
                    <button kc-cancel data-ng-click="back()">{{:: 'back' | translate}}</button>
                </div>
            </div>

        </fieldset>

        <fieldset data-ng-hide="createNew">

            <legend><span class="text">{{:: 'conditions' | translate}}</span>  <kc-tooltip>{{:: 'client-policy-conditions.tooltip' | translate}}</kc-tooltip></legend>
            <table class="table table-striped table-bordered">
                <thead>
                <tr data-ng-hide="isReadOnly()">
                    <th class="kc-table-actions" colspan="3">
                        <div class="form-inline">
                            <div class="pull-right">
                                <a href="#/realms/{{realm.realm}}/client-policies/policies-update/{{editedPolicy.name}}/create-condition" class="btn btn-default">{{:: 'create' | translate}}</a>
                            </div>
                        </div>
                    </th>
                </tr>
                <tr data-ng-show="editedPolicy.conditions && editedPolicy.conditions.length > 0">
                    <th>{{:: 'type' | translate}}</th>
                    <th colspan="2">{{:: 'actions' | translate}}</th>
                </tr>
                </thead>
                <tbody>
                <tr ng-repeat="condition in editedPolicy.conditions">
                    <td><a href="#/realms/{{realm.realm}}/client-policies/policies-update/{{editedPolicy.name}}/update-condition/{{$index}}">{{condition.condition}}</a></td>
                    <td class="kc-action-cell" kc-open="/realms/{{realm.realm}}/client-policies/policies-update/{{editedPolicy.name}}/update-condition/{{$index}}">{{:: 'edit' | translate}}</td>
                    <td class="kc-action-cell" data-ng-hide="isReadOnly()" data-ng-click="removeCondition($index)">{{:: 'delete' | translate}}</td>
                </tr>
                <tr data-ng-show="!editedPolicy.conditions || editedPolicy.conditions.length == 0">
                    <td>{{:: 'no-conditions-available' | translate}}</td>
                </tr>
                </tbody>
            </table>

        </fieldset>

        <fieldset data-ng-hide="createNew">
            <legend><span class="text">{{:: 'client-profiles' | translate}}</span></legend><kc-tooltip>{{:: 'client-profiles.tooltip' | translate}}</kc-tooltip>
            <table class="table table-striped table-bordered">
                <thead>
                <tr data-ng-hide="isReadOnly() || availableProfiles.length == 0">
                    <th colspan="5" class="kc-table-actions">
                        <div class="pull-right">
                            <div>
                                <select class="form-control" ng-model="selectedProfile"
                                        ng-options="p for p in availableProfiles"
                                        data-ng-change="addProfile(selectedProfile); selectedProfile = null">
                                    <option value="" disabled selected>{{:: 'add-profile.placeholder' | translate}}</option>
                                </select>
                            </div>
                        </div>
                    </th>
                </tr>
                <tr data-ng-show="editedPolicy.profiles && editedPolicy.profiles.length > 0">
                    <th>{{:: 'name' | translate}}</th>
                    <th data-ng-hide="isReadOnly()">{{:: 'actions' | translate}}</th>
                </tr>
                </thead>
                <tbody>
                <tr ng-repeat="profileName in editedPolicy.profiles">
                    <td><a href="#/realms/{{realm.realm}}/client-policies/profiles-update/{{profileName}}">{{profileName}}</a></td>
                    <td class="kc-action-cell" data-ng-hide="isReadOnly()" data-ng-click="removeProfile(profileName)">{{:: 'delete' | translate}}</td>
                </tr>
                <tr data-ng-show="!editedPolicy.profiles || editedPolicy.profiles.length == 0">
                    <td class="text-muted">{{:: 'no-client-profiles-configured' | translate}}</td>
                </tr>
                </tbody>
            </table>
        </fieldset>

    </form>
</div>

<kc-menu></kc-menu>