<!--
  ~ 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/profiles">{{:: 'client-profiles' | translate}}</a></li>
        <li data-ng-show="createNew">{{:: 'create-client-profile' | translate}}</li>
        <li data-ng-hide="createNew">{{editedProfile.name}}</li>
    </ol>

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

    <form class="form-horizontal" name="realmForm" novalidate kc-read-only="isReadOnly()">

            <fieldset class="border-top">

                <div class="form-group">
                    <label class="col-md-2 control-label" for="clientProfileName">{{:: 'name' | translate}} <span class="required">*</span></label>
                    <div class="col-sm-6">
                        <input class="form-control" type="text" id="clientProfileName" name="clientProfileName" data-ng-model="editedProfile.name" autofocus required>
                    </div>
                    <kc-tooltip>{{:: 'client-profile-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="editedProfile.description"></textarea>
                    </div>
                </div>
            </fieldset>

            <fieldset>

                <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">{{:: 'executors' | translate}}</span>  <kc-tooltip>{{:: 'client-profile-executors.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/profiles-update/{{editedProfile.name}}/create-executor" class="btn btn-default">{{:: 'create' | translate}}</a>
                                    </div>
                                </div>
                            </th>
                        </tr>
                        <tr data-ng-show="editedProfile.executors && editedProfile.executors.length > 0">
                            <th>{{:: 'type' | translate}}</th>
                            <th colspan="2">{{:: 'actions' | translate}}</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr ng-repeat="executor in editedProfile.executors">
                            <td><a href="#/realms/{{realm.realm}}/client-policies/profiles-update/{{editedProfile.name}}/update-executor/{{$index}}">{{executor.executor}}</a></td>
                            <td class="kc-action-cell" kc-open="/realms/{{realm.realm}}/client-policies/profiles-update/{{editedProfile.name}}/update-executor/{{$index}}">{{:: 'edit' | translate}}</td>
                            <td class="kc-action-cell" data-ng-hide="isReadOnly()" data-ng-click="removeExecutor($index)">{{:: 'delete' | translate}}</td>
                        </tr>
                        <tr data-ng-show="!editedProfile.executors || editedProfile.executors.length == 0">
                            <td>{{:: 'no-executors-available' | translate}}</td>
                        </tr>
                    </tbody>
                </table>

            </fieldset>

    </form>
</div>

<kc-menu></kc-menu>