<!--
  ~ Licensed to the Apache Software Foundation (ASF) under one or more
  ~ contributor license agreements.  See the NOTICE file distributed with
  ~ this work for additional information regarding copyright ownership.
  ~ The ASF licenses this file to You 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="container-fluid" id="deployHistoryList">
    <div class="modal-body">
        <div ng-cloak="" class="tabsdemoDynamicHeight">
            <md-content>
                <md-tabs md-dynamic-height="" md-border-bottom="">
                    <md-tab label="Consumer">
                        <h5 class="md-display-5">Total {{paginationConf.totalItems}} Messages</h5>
                        <md-content class="md-padding" style="min-height:600px">
                            <div class="row">
                                <form class="form-inline pull-left">
                                    <div class="form-group">
                                        <label>{{'CONSUMER' | translate}}:</label>
                                    </div>
                                    <div class="form-group ">
                                        <div style="width: 300px">
                                            <select name="mySelectGroup" chosen
                                                    ng-model="selectedConsumerGroup"
                                                    ng-options="item for item in allConsumerGroupList"
                                                    ng-change="onChangeQueryCondition()"
                                                    required>
                                                <option value=""></option>
                                            </select>
                                        </div>
                                    </div>
                                    <div class="form-group ">
                                        <label>{{'BEGIN' | translate}}:</label>
                                        <div class="input-group">
                                            <input class="form-control" datetimepicker
                                                   ng-change="onChangeQueryCondition()" ng-model="timepickerBegin"
                                                   options="timepickerOptions"/>
                                            <span class="input-group-addon"><span
                                                    class="glyphicon glyphicon-calendar"></span></span>
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label>{{'END' | translate}}:</label>
                                        <div class="input-group">
                                            <input class="form-control" datetimepicker
                                                   ng-change="onChangeQueryCondition()" ng-model="timepickerEnd"
                                                   options="timepickerOptions"/>
                                            <span class="input-group-addon"><span
                                                    class="glyphicon glyphicon-calendar"></span></span>
                                        </div>
                                    </div>
                                    <button id="searchAppsButton" type="button"
                                            class="btn btn-raised btn-sm  btn-primary"
                                            data-toggle="modal"
                                            ng-click="queryDlqMessageByConsumerGroup()">
                                        <span class="glyphicon glyphicon-search"></span> {{ 'SEARCH' | translate}}
                                    </button>
                                    <button type="button" id="batchResendBtn"
                                            class="btn btn-raised btn-sm  btn-primary disabled"
                                            data-toggle="modal"
                                            ng-click="batchResendDlqMessage(selectedConsumerGroup)">
                                        <span class="glyphicon glyphicon-send"></span> {{ 'BATCH_RESEND' | translate}}
                                    </button>
                                    <button type="button" id="batchExportBtn"
                                            class="btn btn-raised btn-sm btn-primary disabled"
                                            data-toggle="modal"
                                            ng-click="batchExportDlqMessage(selectedConsumerGroup)">
                                        <span class="glyphicon glyphicon-export"></span> {{ 'BATCH_EXPORT' | translate}}
                                    </button>
                                </form>
                                <table class="table table-bordered text-middle">
                                    <tr>
                                        <th class="text-center"><input type="checkbox" ng-model='checkedAll' ng-change="selectAll()"/></th>
                                        <th class="text-center">Message ID</th>
                                        <th class="text-center">Tag</th>
                                        <th class="text-center">Key</th>
                                        <th class="text-center">StoreTime</th>
                                        <th class="text-center">Operation</th>
                                    </tr>
                                    <tr style="display: none" id="noMsgTip">
                                        <td colspan="6" style="text-align: center">{{'NO_MATCH_RESULT' | translate}}</td>
                                    </tr>
                                    <tr ng-repeat="item in messageShowList">
                                        <td class="text-center">
                                            <input type="checkbox" ng-model='item.checked' ng-change="selectItem()"/>
                                        </td>
                                        <td class="text-center">{{item.msgId}}</td>
                                        <td class="text-center">{{item.properties.TAGS}}</td>
                                        <td class="text-center">{{item.properties.KEYS}}</td>
                                        <td class="text-center">{{item.storeTimestamp | date:'yyyy-MM-dd HH:mm:ss'}}
                                        </td>
                                        <td class="text-center">
                                            <button class="btn btn-raised btn-sm btn-primary" type="button"
                                                    ng-click="queryDlqMessageDetail(item.msgId, selectedConsumerGroup)">
                                                {{'MESSAGE_DETAIL' | translate}}
                                            </button>
                                            <button class="btn btn-raised btn-sm btn-primary" type="button"
                                                    ng-click="resendDlqMessage(item, selectedConsumerGroup)">
                                                {{'RESEND_MESSAGE' | translate}}
                                            </button>
                                            <button class="btn btn-raised btn-sm btn-primary" type="button"
                                                    ng-click="exportDlqMessage(item.msgId, selectedConsumerGroup)">
                                                {{'EXPORT' | translate}}
                                            </button>
                                        </td>
                                    </tr>
                                </table>
                                <tm-pagination conf="paginationConf"></tm-pagination>
                            </div>
                        </md-content>
                    </md-tab>
                    <md-tab label="Message ID">
                        <h5 class="md-display-5">topic can't be empty if you producer client version>=v3.5.8</h5>
                        <md-content class="md-padding" style="min-height:600px">
                            <div class="row">
                                <form class="form-inline pull-left">
                                    <div class="form-group">
                                        <label>{{'CONSUMER' | translate}}:</label>
                                    </div>
                                    <div class="form-group ">
                                        <div style="width: 300px">
                                            <select name="mySelectGroup" chosen
                                                    ng-model="selectedConsumerGroup"
                                                    ng-options="item for item in allConsumerGroupList"
                                                    ng-change="onChangeQueryCondition()"
                                                    required>
                                                <option value=""></option>
                                            </select>
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label>MessageId:</label>
                                        <input class="form-control" style="width: 450px" type="text" ng-model="messageId"
                                               required/>
                                    </div>
                                    <button type="button" class="btn btn-raised btn-sm  btn-primary" data-toggle="modal"
                                            ng-click="queryDlqMessageByMessageId(messageId, selectedConsumerGroup)">
                                        <span class="glyphicon glyphicon-search"></span> {{ 'SEARCH' | translate}}
                                    </button>
                                </form>
                                <table class="table table-bordered text-middle">
                                    <tr>
                                        <th class="text-center">Message ID</th>
                                        <th class="text-center">Tag</th>
                                        <th class="text-center">Key</th>
                                        <th class="text-center">StoreTime</th>
                                        <th class="text-center">Operation</th>
                                    </tr>
                                    <tr ng-repeat="item in queryDlqMessageByMessageIdResult">
                                        <td class="text-center">{{item.msgId}}</td>
                                        <td class="text-center">{{item.properties.TAGS}}</td>
                                        <td class="text-center">{{item.properties.KEYS}}</td>
                                        <td class="text-center">{{item.storeTimestamp | date:'yyyy-MM-dd HH:mm:ss'}}
                                        </td>
                                        <td class="text-center">
                                            <button class="btn btn-raised btn-sm btn-primary" type="button"
                                                    ng-click="queryDlqMessageDetail(item.msgId, selectedConsumerGroup)">
                                                {{'MESSAGE_DETAIL' | translate}}
                                            </button>
                                            <button class="btn btn-raised btn-sm btn-primary" type="button"
                                                    ng-click="resendDlqMessage(item, selectedConsumerGroup)">
                                                {{'RESEND_MESSAGE' | translate}}
                                            </button>
                                            <button class="btn btn-raised btn-sm btn-primary" type="button"
                                                    ng-click="exportDlqMessage(item.msgId, selectedConsumerGroup)">
                                                {{'EXPORT' | translate}}
                                            </button>
                                        </td>
                                    </tr>
                                </table>
                            </div>
                        </md-content>
                    </md-tab>
                </md-tabs>
            </md-content>
        </div>

    </div>
</div>


<script type="text/ng-template" id="dlqMessageDetailViewDialog">
    <md-content class="md-padding">
        <div>
            <form id="addAppForm" name="addAppForm" class="form-horizontal" novalidate>
                <div class="form-group">
                    <label class="control-label col-sm-2">Message ID:</label>
                    <div class="col-sm-10">
                        <label class="form-control">{{ngDialogData.messageView.msgId}}</label>
                    </div>
                </div>
                <div class="form-group">
                    <label class="control-label col-sm-2">Topic:</label>
                    <div class="col-sm-10">
                        <label class="form-control">{{ngDialogData.messageView.topic}}</label>
                    </div>
                </div>
                <div class="form-group">
                    <label class="control-label col-sm-2">Properties:</label>
                    <div class="col-sm-10">
                        <textarea class="form-control"
                                  style="min-height:100px; resize: none"
                                  readonly>{{ngDialogData.messageView.properties}}</textarea>
                    </div>
                </div>
                <div class="form-group">
                    <label class="control-label col-sm-2">ReconsumeTimes:</label>
                    <div class="col-sm-10">
                        <label class="form-control">{{ngDialogData.messageView.reconsumeTimes}}</label>
                    </div>
                </div>
                <div class="form-group">
                    <label class="control-label col-sm-2">Tag:</label>
                    <div class="col-sm-10">
                        <label class="form-control">{{ngDialogData.messageView.properties.TAGS}}</label>
                    </div>
                </div>
                <div class="form-group">
                    <label class="control-label col-sm-2">Key:</label>
                    <div class="col-sm-10">
                        <label class="form-control">{{ngDialogData.messageView.properties.KEYS}}</label>
                    </div>
                </div>
                <div class="form-group">
                    <label class="control-label col-sm-2">Storetime:</label>
                    <div class="col-sm-10">
                        <label class="form-control">{{ngDialogData.messageView.storeTimestamp | date:'yyyy-MM-dd HH:mm:ss'}}</label>
                    </div>
                </div>
                <div class="form-group">
                    <label class="control-label col-sm-2">StoreHost:</label>
                    <div class="col-sm-10">
                        <label class="form-control">{{ngDialogData.messageView.storeHost}}</label>
                    </div>
                </div>
                <div class="form-group">
                    <label class="control-label col-sm-2">Message body:</label>
                    <div class="col-sm-10">
                        <textarea class="form-control"
                                  ng-model="ngDialogData.messageView.messageBody"
                                  style="min-height:100px; resize: none"
                                  readonly></textarea>
                    </div>
                </div>
            </form>
        </div>
    </md-content>
    <div class="modal-footer">
        <div class="ngdialog-buttons">
            <button type="button" class="ngdialog-button ngdialog-button-secondary"
                    ng-click="closeThisDialog('Cancel')">{{ 'CLOSE' | translate }}
            </button>
        </div>
    </div>
</script>

<script type="text/ng-template" id="operationResultDialog">
    <div class="modal-header">
        <h4 class="modal-title">Result</h4>
    </div>
    <div class="modal-body ">
        <form class="form-horizontal" novalidate>
            {{ngDialogData.result}}
        </form>
    </div>
    <div class="modal-footer">
        <div class="ngdialog-buttons">
            <button type="button" class="ngdialog-button ngdialog-button-secondary"
                    ng-click="closeThisDialog('Cancel')">{{ 'CLOSE' | translate }}
            </button>
        </div>
    </div>
</script>