<form id="rulesModal" class="modal fade" role="dialog" aria-hidden="true">
    <!--
      ~ 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">
                    {{'Component.GrayscalePublishRule.Title' | translate }}
                </h4>
            </div>
            <div class="modal-body form-horizontal">
                <div class="form-group"
                    ng-show="branch.parentNamespace.isPublic && !branch.parentNamespace.isLinkedNamespace">
                    <label class="control-label col-md-3 text-right">
                        <apollorequiredfield></apollorequiredfield>
                        {{'Component.GrayscalePublishRule.AppId' | translate }}
                    </label>
                    <div class="col-md-4">
                        <input type="text" class="form-control" ng-model="branch.editingRuleItem.clientAppId"
                            ng-model-options='{ debounce: 300 }' ng-change='initSelectIps()'>
                    </div>
                </div>
                <div class="form-group"
                    ng-show="branch.parentNamespace.isPublic && !branch.parentNamespace.isLinkedNamespace">
                    <label
                        class="control-label col-md-3 text-right">{{'Component.GrayscalePublishRule.AcceptRule' | translate }}</label>
                    <div class="col-md-9">
                        <label class="form-control-static radio-inline">
                            <input type="radio" name="ApplyToAllInstances" value="false"
                                ng-checked="!branch.editingRuleItem.ApplyToAllInstances"
                                ng-click="branch.editingRuleItem.ApplyToAllInstances = false">
                            {{'Component.GrayscalePublishRule.AcceptPartInstance' | translate }}
                        </label>
                        <label class="form-control-static radio-inline">
                            <input type="radio" name="ApplyToAllInstances" value="true"
                                ng-checked="branch.editingRuleItem.ApplyToAllInstances"
                                ng-click="branch.editingRuleItem.ApplyToAllInstances = true">
                            {{'Component.GrayscalePublishRule.AcceptAllInstance' | translate }}
                        </label>
                    </div>
                </div>
                <div class="form-group" ng-show="!branch.editingRuleItem.ApplyToAllInstances">
                    <label class="control-label col-md-3 text-right">
                        <apollorequiredfield></apollorequiredfield>
                        {{'Component.GrayscalePublishRule.IP' | translate }}
                    </label>
                    <div class="col-md-9">
                        <div class="form-inline">
                            <div class="form-group">
                                <select class="rules-ip-selector" multiple="multiple">
                                    <option ng-repeat="instance in selectIps" ng-bind="instance.ip">
                                    </option>
                                </select>
                                <div
                                    ng-show="branch.parentNamespace.isPublic && !branch.parentNamespace.isLinkedNamespace">
                                    <small>{{'Component.GrayscalePublishRule.AppIdFilterTips' | translate }}</small>
                                </div>
                                <div style="margin-top: 5px">
                                    <small>{{'Component.GrayscalePublishRule.IpTips' | translate }}<a
                                            ng-click="manual =! manual">{{'Component.GrayscalePublishRule.EnterIp' | translate }}</a></small>
                                </div>
                            </div>
                        </div>
                        <div class="form-inline" ng-show="manual">
                            <div class="form-group">
                                <textarea class="form-control" ng-model="toAddIPs" rows="3"
                                    placeholder="{{'Component.GrayscalePublishRule.EnterIpTips' | translate }}"></textarea>
                            </div>
                            <button class="btn-default btn add-rule" ng-click="batchAddIPs(branch, toAddIPs)">
                                {{'Component.GrayscalePublishRule.Add' | translate }}
                            </button>
                        </div>
                    </div>
                </div>


                <div class="form-group" ng-show="!branch.editingRuleItem.ApplyToAllInstances">
                    <div class="col-md-offset-1 col-md-10 item-container">
                        <section class="btn-group item-info" ng-repeat="ip in branch.editingRuleItem.draftIpList">
                            <button type="button" class="btn btn-default" ng-bind="ip"></button>
                            <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"
                                ng-click="removeRule(branch.editingRuleItem, ip)">
                                <span class="glyphicon glyphicon-remove"></span>
                            </button>
                        </section>
                    </div>
                </div>

            </div>
            <div class="modal-footer">
                <button class="btn btn-default"
                    ng-click="cancelEditItem(branch)">{{'Common.Cancel' | translate }}</button>
                <button class="btn btn-primary" ng-disabled="completeEditBtnDisable"
                    ng-click="completeEditItem(branch)">{{'Common.Ok' | translate }}
                </button>
            </div>
        </div>
    </div>


</form>
