@(rootAccountName: String, rootAccountCanReview: Boolean, dnsChangeNotices: DnsChangeNotices)(implicit request: play.api.mvc.Request[Any], customLinks: models.CustomLinks, meta: models.Meta)

@content = {
<!-- PAGE CONTENT -->
<div class="right_col" role="main" ng-init="notices = @dnsChangeNotices.notices;">

    <!-- BREADCRUMB -->
    <ul class="breadcrumb">
        <li><a href="/">Home</a></li>
        <li><a href="/dnschanges">DNS Changes</a></li>
        <li class="active">{{batch.id}}</li>
    </ul>
    <!-- END BREADCRUMB -->

    <!-- PAGE TITLE -->
    <div class="page-title">
        <h3>
            <span class="fa fa-list-ol"></span> DNS Change
            <span ng-if="batch.status == 'Complete'" class="label label-success">{{batch.status}}</span>
            <span ng-if="batch.status == 'Failed'" class="label label-danger">{{batch.status}}</span>
            <span ng-if="batch.status == 'PartialFailure'" class="label label-warning">Partial Failure</span>
            <span ng-if="batch.status == 'PendingProcessing'" class="label label-info">Pending Processing</span>
            <span ng-if="batch.status == 'PendingReview'" class="label label-warning">Pending Review</span>
            <span ng-if="batch.status == 'Rejected'" class="label label-danger">{{batch.status}}</span>
            <span ng-if="batch.status == 'Scheduled'" class="label label-info">{{batch.status}}</span>
            <span ng-if="batch.status == 'Cancelled'" class="label label-default">{{batch.status}}</span>
        </h3>
    </div>
    <!-- END PAGE TITLE -->


    <!-- PAGE CONTENT WRAPPER -->
    <div class="page-content-wrap">
        <div class="alert-wrapper">
            <div ng-repeat="alert in alerts">
                <notification ng-model="alert"></notification>
            </div>
        </div>

        <notice ng-model="notice" ng-if="notice"></notice>

        <div class="row">
            <div class="col-md-12">
                <p><strong>ID:</strong> {{batch.id}}
                    <span class="small-copy-button" ng-click="copyToClipboard()"
                          data-toggle="tooltip" data-placement="top" title="Copy Batch ID to clipboard">
                        <i class="fa fa-clone"></i>
                    </span>
                    <button class="btn-right-corner" ng-click="exportToCSV(batch.id)">Export CSV</button>
                </p>
                <p><strong>Submitted:</strong> {{batch.createdTimestamp}}</p>
                <p ng-if="'@rootAccountName' != batch.userName"><strong>Submitter:</strong> {{batch.userName}}</p>
                <p ng-if="batch.comments"><strong>Description:</strong> {{batch.comments}}</p>
                @if(meta.sharedDisplayEnabled) {
                    <p ng-if="batch.ownerGroupName"><strong>Record Owner Group:</strong> {{batch.ownerGroupName}}</p>
                    <p ng-if="batch.ownerGroupId && !batch.ownerGroupName">
                        <strong>Record Owner Group:</strong>
                        <span class="text-danger" data-toggle="tooltip" data-placement="top"
                              title="Group with ID {{batch.ownerGroupId}} no longer exists.">
                            <span class="fa fa-warning"></span> Group deleted
                        </span>
                    </p>
                }

                <p ng-if="batch.scheduledTime"><strong>Request Date/Time:</strong> {{batch.scheduledTime}}</p>

                <p ng-if="batch.approvalStatus == 'PendingReview'"><strong>Review Status: </strong><span class="label label-warning">Pending Review</span></p>
                <p ng-if="batch.approvalStatus == 'ManuallyApproved'"><strong>Review Status: </strong><span class="label label-success">Approved</span></p>
                <p ng-if="batch.approvalStatus == 'ManuallyRejected'"><strong>Review Status: </strong><span class="label label-danger">Rejected</span></p>
                <p ng-if="batch.approvalStatus == 'Cancelled'"><strong>Review Status: </strong><span class="label label-default">Cancelled</span></p>

                <div ng-if="batch.approvalStatus == 'ManuallyApproved' || batch.approvalStatus == 'ManuallyRejected'">
                    <p ng-if="batch.reviewerUserName"><strong>Reviewer:</strong> {{batch.reviewerUserName}}</p>
                    <p ng-if="batch.reviewerId && !batch.reviewerUserName">
                        <strong>Reviewer:</strong>
                        <span class="text-danger" data-toggle="tooltip" data-placement="top"
                              title="Reviewer with ID {{batch.reviewerId}} no longer exists.">
                                <span class="fa fa-warning"></span> Reviewer deleted
                            </span>
                    </p>
                    <p><strong>Review Comment:</strong> {{batch.reviewComment}}</p>
                    <p><strong>Review Time:</strong> {{batch.reviewTimestamp}}</p>
                </div>

            </div>
        </div>
        <br>
        <div class="row">
            <div class="col-md-12">
                <!-- SIMPLE DATABLE -->
                <div class="panel panel-default">
                    <div class="panel-heading">
                        <h3 class="panel-title">Changes</h3>
                    </div>
                    <div class="panel-body">
                        <!-- SEARCH BOX -->
                        <div class="clearfix">
                            <div class="btn-group">
                                <button class="btn btn-default" ng-click="refresh()"><span class="fa fa-refresh"></span> Refresh</button>
                                <button ng-if="batch.approvalStatus == 'PendingReview' && '@rootAccountName' == batch.userName" class="btn btn-default" ng-click="cancelChange()">
                                    Cancel Changes
                                </button>
                            </div>
                            <form class="input-group pull-right col-md-3">
                                <div class="input-group">
                                    <span class="input-group-btn">
                                        <button id="batch-change-search-button" type="submit" class="btn btn-primary btn-left-round">
                                            <span class="fa fa-search"></span>
                                        </button>
                                    </span>
                                    <input ng-model="query" type="text" class="form-control"/>
                                </div>
                            </form>
                        </div>
                        <!-- END SEARCH BOX -->
                        <table class="table">
                            <thead>
                            <tr>
                                <th>Change Type</th>
                                <th>Input Name</th>
                                <th>Recordset Name</th>
                                <th>Zone Name</th>
                                <th>Record Type</th>
                                <th class="col-md-2">Record Data</th>
                                <th>TTL</th>
                                <th>Status</th>
                                <th class="col-md-2">Additional Info</th>
                            </tr>
                            </thead>
                            <tbody>
                            <tr ng-repeat="change in batch.changes|filter:query" ng-class="{changeError: change.outstandingErrors}">
                                <td ng-bind="change.changeType"></td>
                                <td class="wrap-long-text">{{change.inputName}}</td>
                                <td class="wrap-long-text">{{change.recordName}}</td>
                                <td class="wrap-long-text">{{change.zoneName}}</td>
                                <td>{{change.type}}</td>
                                <!--record data name based on record type-->
                                    <td ng-if="change.type=='A'||change.type=='AAAA'" class="wrap-long-text">
                                        {{change.record.address}}
                                    </td>
                                    <td ng-if="change.type=='CNAME'">
                                        {{change.record.cname}}
                                    </td>
                                    <td ng-if="change.type=='PTR'">
                                        {{change.record.ptrdname}}
                                    </td>
                                    <td ng-if="change.type=='TXT'" class="wrap-long-text">
                                        {{change.record.text}}
                                    </td>
                                    <td ng-if="change.type=='MX'">
                                        <ul>
                                            <li class="wrap-long-text">Preference: {{change.record.preference}}</li>
                                            <li class="wrap-long-text">Exchange: {{change.record.exchange}}</li>
                                        </ul>
                                    </td>
                                    <td ng-if="change.type=='NS'">
                                        {{change.record.nsdname}}
                                    </td>
                                    <td ng-if="change.type=='NAPTR'">
                                        <ul>
                                            <li class="wrap-long-text">Order: {{change.record.order}}</li>
                                            <li class="wrap-long-text">Preference: {{change.record.preference}}</li>
                                            <li class="wrap-long-text">Flags: {{change.record.flags}}</li>
                                            <li class="wrap-long-text">Service: {{change.record.service}}</li>
                                            <li class="wrap-long-text">Regexp: {{change.record.regexp}}</li>
                                            <li class="wrap-long-text">Replacement: {{change.record.replacement}}</li>
                                        </ul>
                                    </td>
                                    <td ng-if="change.type=='SRV'">
                                        <ul>
                                            <li class="wrap-long-text">Priority: {{change.record.priority}}</li>
                                            <li class="wrap-long-text">Weight: {{change.record.weight}}</li>
                                            <li class="wrap-long-text">Port: {{change.record.port}}</li>
                                            <li class="wrap-long-text">Target: {{change.record.target}}</li>
                                        </ul>
                                    </td>
                                <!--end record data name based on record type-->
                                <td>{{change.ttl}}</td>
                                <td>
                                    <span ng-if="change.status =='Complete'" class="label label-success">{{change.status}}</span>
                                    <span ng-if="change.status =='Pending'" class="label label-info">{{change.status}}</span>
                                    <span ng-if="change.status =='NeedsReview'" class="label label-warning">Needs Review</span>
                                    <span ng-if="change.status =='Failed'" class="label label-danger">{{change.status}}</span>
                                    <span ng-if="change.status =='Rejected'" class="label label-danger">{{change.status}}</span>
                                    <span ng-if="change.status == 'Cancelled'" class="label label-default">{{batch.status}}</span>
                                </td>
                                <td class="wrap-long-text">
                                    <div ng-if="batch.approvalStatus != 'AutoApproved'
                                             && change.status != 'Rejected'
                                             && change.status != 'Cancelled'">
                                        <p ng-repeat="error in change.validationErrors">
                                        {{error.message ? error.message : error}} </p>{{change.systemMessage}}</div>
                                    <div ng-if="batch.approvalStatus =='ManuallyRejected' || batch.approvalStatus =='Cancelled'">
                                    </div>
                                    <div ng-if="change.systemMessage == undefined && batch.approvalStatus == 'AutoApproved'
                                             && change.status =='Complete'">
                                        ℹ️ No further action is required.
                                    </div>
                                    <div ng-if="(change.systemMessage != '' && change.systemMessage != undefined)  && batch.approvalStatus == 'AutoApproved'
                                             && change.status =='Complete'">
                                        ℹ️ {{change.systemMessage}}
                                    </div>
                                    <div ng-if="(change.systemMessage != '' && change.systemMessage != undefined)  && change.status =='Failed'">
                                        {{change.systemMessage}}
                                    </div>
                                </td>
                            </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
                @if(rootAccountCanReview) {
                    <div ng-if="batch.approvalStatus == 'PendingReview'" class="panel panel-default">
                        <div class="panel-heading">
                            <h3 class="panel-title">Review DNS Change</h3>
                        </div>
                        <div class="panel-body">
                            <label>Review Comment (optional):</label> <textarea ng-model="$parent.reviewComment" class="form-control" rows="3"></textarea>
                        </div>
                        <div class="panel-footer clearfix">
                            <div ng-if="!reviewType" class="pull-right">
                                <button class="btn btn-success" ng-click="approve()">Approve</button>
                                <button class="btn btn-danger" ng-click="reject()">Reject</button>
                            </div>
                            <div ng-if="reviewType" class="pull-right">
                                <span>{{ reviewConfirmationMsg }}</span>
                                <button class="btn btn-default" ng-click="cancelReview()">Cancel Review</button>
                                <button ng-if="reviewType == 'approve'" class="btn btn-success" ng-click="confirmApprove()">Confirm Approval</button>
                                <button ng-if="reviewType == 'reject'" class="btn btn-danger" ng-click="confirmReject()">Confirm Rejection</button>
                            </div>
                        </div>
                    </div>
                }
                </div>
            </div>
        </div>
    </div>
<modal modal-id="cancel_batch_change" modal-title="Cancel DNS Change" modal-size="modal-sm">
    <modal-body>
        <p>Are you sure you want to cancel this DNS Change?</p>
    </modal-body>
    <modal-footer>
            <span>
                <button class="btn btn-default" ng-click="cancelCancel()">Decline</button>
                <button class="btn btn-success" ng-click="confirmCancel()">Confirm</button>
            </span>
    </modal-footer>
</modal>
</div>
}

@plugins = {}

@main(rootAccountName)("DnsChangeDetailController")("DNS Change")(content)(plugins)
