<!--
  ~ 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.
  ~
-->
<!doctype html>
<html ng-app="diff_item">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <link rel="icon" href="../img/config.png">
    <!-- styles -->
    <link rel="stylesheet" type="text/css" href="../vendor/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="../vendor/angular/angular-toastr-1.4.1.min.css">
    <link rel="stylesheet" type="text/css" media='all' href="../vendor/angular/loading-bar.min.css">
    <link rel="stylesheet" type="text/css" href="../styles/common-style.css">
    <link rel="stylesheet" type="text/css" href="../vendor/select2/select2.min.css">
    <title>{{'Config.Diff.Title' | translate }}</title>
    <style>
        .comment-toggle {
            margin-left: 8px !important;
        }

        .diff-content {
            margin-top: 12px;
        }
    </style>
</head>

<body>

    <apollonav></apollonav>

    <div class="container-fluid apollo-container" ng-controller="DiffItemController">
        <section class="panel col-md-offset-1 col-md-10">
            <header class="panel-heading">
                <div class="row">
                    <div class="col-md-7">
                        <h4 class="modal-title">{{'Config.Diff.Title' | translate }}
                            <small ng-show="syncItemStep == 1">{{'Config.Diff.FirstStep' | translate }}</small>
                            <small ng-show="syncItemStep == 2">{{'Config.Diff.SecondStep' | translate }}</small>
                        </h4>
                    </div>
                    <div class="col-md-5 text-right">
                        <button type="button" class="btn btn-primary" ng-show="syncItemStep > 1 && syncItemStep < 3"
                            ng-click="syncItemNextStep(-1)">{{'Config.Diff.PreviousStep' | translate }}
                        </button>
                        <button type="button" class="btn btn-primary" ng-show="syncItemStep < 2"
                            ng-click="diff()">{{'Config.Diff.NextStep' | translate }}
                        </button>
                        <button type="button" class="btn btn-info" data-dismiss="modal"
                            ng-click="backToAppHomePage()">{{'Common.ReturnToIndex' | translate }}
                        </button>
                    </div>
                </div>
            </header>
            <div class="panel-body">
                <div class="row" ng-show="syncItemStep == 1">
                    <div class="alert-info alert no-radius">
                        <strong>{{'Config.Diff.TipsTitle' | translate }}:</strong>
                        <ul>
                            <li>{{'Config.Diff.Tips' | translate }}</li>
                        </ul>
                    </div>
                    <div class="form-horizontal">
                        <div class="form-group">
                            <label class="col-sm-2 control-label">{{'Config.Diff.DiffCluster' | translate }}</label>
                            <div class="col-sm-6">
                                <apolloclusterselector apollo-app-id="pageContext.appId"
                                    apollo-default-all-checked="false" apollo-select="collectSelectedClusters"
                                    apollo-default-checked-env="pageContext.env"
                                    apollo-default-checked-cluster="pageContext.clusterName"></apolloclusterselector>
                            </div>
                        </div>
                    </div>
                    <hr>
                </div>

                <!--step 2-->
                <div class="row" ng-show="syncItemStep == 2">
                    <div class="row" style="margin-top: 10px;">
                        <div class="form-horizontal">
                            <div class="col-sm-12">
                                <label class="control-label">
                                    <input type="checkbox" class="comment-toggle" ng-checked="showCommentDiff"
                                        ng-click="showCommentDiff=!showCommentDiff">
                                    {{'Config.Diff.HasDiffComment' | translate }}
                                </label>
                            </div>
                            <div class="col-sm-12 diff-content">
                                <table class="table table-bordered table-striped table-hover">
                                    <thead>
                                        <tr>
                                            <td>Key</td>
                                            <td ng-repeat="cluster in syncData.syncToNamespaces"
                                                ng-bind="cluster.env + ':' + cluster.clusterName + ':' + cluster.namespaceName + ':Value'">
                                            </td>
                                            <td ng-show="showCommentDiff"
                                                ng-repeat="cluster in syncData.syncToNamespaces"
                                                ng-bind="cluster.env + ':' + cluster.clusterName + ':' + cluster.namespaceName + ':Comment'">
                                            </td>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr ng-repeat="(key, itemsKeyedByCluster) in itemsKeyedByKey">
                                            <td width="15%" ng-bind="key"></td>
                                            <td ng-repeat="cluster in syncData.syncToNamespaces"
                                                ng-bind="(itemsKeyedByCluster[cluster.env + ':' + cluster.clusterName + ':' + cluster.namespaceName] || {}).value">
                                            </td>
                                            <td ng-show="showCommentDiff"
                                                ng-repeat="cluster in syncData.syncToNamespaces"
                                                ng-bind="(itemsKeyedByCluster[cluster.env + ':' + cluster.clusterName + ':' + cluster.namespaceName] || {}).comment">
                                            </td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <showtextmodal text="text" />
    </div>



    <div ng-include="'../views/common/footer.html'"></div>

    <!-- jquery.js -->
    <script src="../vendor/jquery.min.js" type="text/javascript"></script>
    <script src="../vendor/select2/select2.min.js" type="text/javascript"></script>

    <!--angular-->
    <script src="../vendor/angular/angular.min.js"></script>
    <script src="../vendor/angular/angular-resource.min.js"></script>
    <script src="../vendor/angular/angular-toastr-1.4.1.tpls.min.js"></script>
    <script src="../vendor/angular/loading-bar.min.js"></script>
    <script src="../vendor/angular/angular-cookies.min.js"></script>

    <script src="../vendor/angular/angular-translate.2.18.1/angular-translate.min.js"></script>
    <script src="../vendor/angular/angular-translate.2.18.1/angular-translate-loader-static-files.min.js"></script>
    <script src="../vendor/angular/angular-translate.2.18.1/angular-translate-storage-cookie.min.js"></script>

    <!-- bootstrap.js -->
    <script src="../vendor/bootstrap/js/bootstrap.min.js" type="text/javascript"></script>

    <script src="../vendor/clipboard.min.js" type="text/javascript"></script>
    <!--biz-->
    <script type="application/javascript" src="../scripts/app.js"></script>
    <script type="application/javascript" src="../scripts/services/AppService.js"></script>
    <script type="application/javascript" src="../scripts/services/EnvService.js"></script>
    <script type="application/javascript" src="../scripts/services/ConfigService.js"></script>
    <script type="application/javascript" src="../scripts/services/UserService.js"></script>
    <script type="application/javascript" src="../scripts/services/CommonService.js"></script>
    <script type="application/javascript" src="../scripts/services/PermissionService.js"></script>

    <script type="application/javascript" src="../scripts/AppUtils.js"></script>
    <script type="application/javascript" src="../scripts/controller/config/DiffConfigController.js"></script>

    <script type="application/javascript" src="../scripts/PageCommon.js"></script>
    <script type="application/javascript" src="../scripts/directive/directive.js"></script>
    <script type="application/javascript" src="../scripts/directive/show-text-modal-directive.js"></script>
</body>

</html>