<form id="itemModal" class="modal fade" valdr-type="Item" name="itemForm" ng-submit="doItem()">
    <!--
      ~ Copyright 2021 Apollo Authors
      ~
      ~ 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="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header panel-primary">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                        aria-hidden="true">&times;</span></button>
                <h4 class="modal-title">
                    <span ng-show="item.tableViewOperType == 'create' && !toOperationNamespace.isBranch">
                        {{'Component.ConfigItem.Title' | translate }} <small
                            class="text-info">{{'Component.ConfigItem.TitleTips' | translate }}</small>
                    </span>
                    <span ng-show="item.tableViewOperType == 'create' && toOperationNamespace.isBranch">
                        {{'Component.ConfigItem.AddGrayscaleItem' | translate }}</span>
                    <span ng-show="item.tableViewOperType == 'update'">
                        {{'Component.ConfigItem.ModifyItem' | translate }}</span>
                </h4>
            </div>
            <div class="modal-body form-horizontal">
                <div class="form-group">
                    <label class="col-sm-2 control-label">
                        <apollorequiredfield ng-show="item.tableViewOperType == 'create'"></apollorequiredfield>
                        {{'Component.ConfigItem.ItemKey' | translate }}
                    </label>
                    <div class="col-sm-10" valdr-form-group>
                        <input type="text" name="key" class="form-control" ng-model="item.key" tabindex="1"
                            ng-required="true" ng-disabled="item.tableViewOperType != 'create'" />
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-sm-2 control-label">{{'Component.ConfigItem.ItemValue' | translate }}</label>
                    <div class="col-sm-10" valdr-form-group>
                        <textarea id="valueEditor" name="value" class="form-control" rows="6" tabindex="2"
                            ng-required="false" ng-model="item.value">
                            </textarea>
                        {{'Component.ConfigItem.ItemValueTips' | translate }} <a
                            ng-click="showHiddenChars()">{{'Component.ConfigItem.ItemValueShowDetection' | translate }}</a>
                        <br>
                        <div class="bg-info" ng-show="showHiddenCharsContext && hiddenCharCounter == 0">
                            {{'Component.ConfigItem.ItemValueNotHiddenChars' | translate }}</div>
                        <div class="bg-info" ng-bind-html="valueWithHiddenChars"
                            ng-show="showHiddenCharsContext && hiddenCharCounter > 0"></div>
                    </div>


                </div>
                <div class="form-group">
                    <label class="col-sm-2 control-label">{{'Component.ConfigItem.ItemComment' | translate }}</label>
                    <div class="col-sm-10" valdr-form-group>
                        <textarea class="form-control" name="comment" ng-model="item.comment" tabindex="3" rows="2">
                        </textarea>
                    </div>
                </div>
                <div class="form-group" ng-show="item.tableViewOperType == 'create' && !toOperationNamespace.isBranch">
                    <label class="col-sm-2 control-label">
                        <apollorequiredfield></apollorequiredfield>
                        {{'Component.ConfigItem.ChooseCluster' | translate }}
                    </label>
                    <div class="col-sm-10">
                        <apolloclusterselector apollo-app-id="appId" apollo-default-all-checked="false"
                            apollo-default-checked-env="env" apollo-default-checked-cluster="cluster"
                            apollo-select="collectSelectedClusters">

                        </apolloclusterselector>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">
                    {{'Common.Cancel' | translate }}
                </button>
                <button type="submit" class="btn btn-primary"
                    ng-disabled="itemForm.$invalid || (item.addItemBtnDisabled && item.tableViewOperType == 'create')">
                    {{'Common.Submit' | translate }}
                </button>
            </div>
        </div>
    </div>
</form>
