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

@content = {
<!-- PAGE CONTENT -->
<div class="right_col" role="main">

    <!-- BREADCRUMB -->
    <ul class="breadcrumb">
        <li><a href="/">Home</a></li>
        <li class="active">DNS Changes</li>
    </ul>
    <!-- END BREADCRUMB -->

    <!-- PAGE TITLE -->
    <div class="page-title"><h3><span class="fa fa-list-ol"></span> DNS Changes</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>

        @if(rootAccountCanReview) {
        <div class="panel panel-default panel-tabs">
            <ul class="nav nav-tabs bar_tabs">
                <li class="active"><a href="#myRequests" data-toggle="tab" ng-click="getAllRequests(false)">My Requests</a></li>
                <li><a href="#allRequests" data-toggle="tab" ng-click="getAllRequests(true)">All Requests</a></li>
            </ul>

            <div class="panel-body tab-content">
                <div class="tab-pane active" id="myRequests">
                    <div class="row">
                        <div class="col-md-12">
                            <div class="row">
            <div class="col-md-12">
                }
                <!-- SIMPLE DATABLE -->
                <div class="panel panel-default">
                    <div class="panel-heading vinyldns-panel-top">
                        <div class="btn-group">
                            <a href="/dnschanges/new" class="btn btn-default"><span class="fa fa-plus"></span> New DNS Change</a>
                        </div>
                        <div class="col-md-4 pull-right">
                            <form ng-hide="!ignoreAccess" class="input-group full-width remove-bottom-margin" ng-submit="refreshBatchChanges()">
                                <div class="input-group remove-bottom-margin">
                                    <span class="input-group-btn">
                                        <button id="user-name-search-button" type="submit" class="btn btn-primary"><span class="fa fa-search"></span></button>
                                    </span>
                                    <input id="user-name-search-text" type="text" ng-model="submitterName" class="form-control" placeholder="Search by submitter">
                                </div>
                            </form>
                            <div ng-hide="!ignoreAccess" class="dropdown">
                                <a class="record-type-filter-heading force-cursor dropdown-toggle force-a-color " id="batch-dropdown-menu" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">Filters<i class="fa fa-chevron-down"></i></a>
                                <div class="dropdown-menu increase-dropdown-width" aria-labelledby="batch-dropdown-menu">
                                    <button type="button" class="close pull-right" aria-label="Close"><span aria-hidden="true">×</span></button>
                                    <form class="px-4 py-3 filter-margin dt-filter">
                                        <div class="form-group set-flex">
                                            <label class="control-label">Date Time Range</label>
                                            <div class="input-group">
                                                <input type="text" name="dateTimeRange" id="dt-range-txt-box" class="form-control" />
                                                <div class="input-group-addon">{{ getLocalTimeZone() }}</div>
                                            </div>
                                        </div>
                                        <button ng-click="resetDateTimeFilter()" type="submit" class="btn btn-primary">Reset</button>
                                    </form>
                                </div>
                            </div>
                            <div class="batch-filter">
                                <form action="">
                                    <div ng-class="ignoreAccess?'checkbox no-margin':'checkbox float-right'">
                                        <label>
                                            <input type="checkbox" ng-model="approvalStatus" ng-true-value="'PendingReview'" ng-change="refreshBatchChanges()"> View Open Requests Only
                                        </label>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                    <div class="panel-body">

                        <!-- PAGINATION -->
                        <div class="dataTables_paginate vinyldns_paginate">
                            <span class="vinyldns_page_number">{{ getPageTitle() }}</span>
                            <ul class="pagination">
                                <li class="paginate_button previous">
                                    <a type="button" ng-if="prevPageEnabled()" ng-click="prevPage()">Previous</a>
                                </li>
                                <li class="paginate_button next">
                                    <a type="button" ng-if="nextPageEnabled()" ng-click="nextPage()">Next</a>
                                </li>
                            </ul>
                        </div>
                        <!-- END PAGINATION -->

                        <table class="table">
                            <thead>
                                <tr>
                                    <th>Submitted</th>
                                    <th ng-if="ignoreAccess">Submitter</th>
                                    <th>ID</th>
                                    <th>Change Count</th>
                                    <th>Status</th>
                                    <th class="col-md-3">Description</th>
                                    <th>Action</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr ng-repeat="batchChange in batchChanges|filter:query">
                                    <td ng-bind="batchChange.createdTimestamp"></td>
                                    <td ng-if="ignoreAccess" ng-bind="batchChange.userName"></td>
                                    <td>
                                        <a href="/dnschanges/{{batchChange.id}}">{{batchChange.id}}</a>
                                        <span class="small-copy-button" ng-click="copyToClipboard(batchChange.id)"
                                              data-toggle="tooltip" data-placement="top" title="Copy Batch ID to clipboard">
                                            <i class="fa fa-clone"></i>
                                        </span>
                                    </td>
                                    <td ng-bind="batchChange.totalChanges"></td>
                                    <td>
                                        <span ng-if="batchChange.status == 'Complete'" class="label label-success">{{batchChange.status}}</span>
                                        <span ng-if="batchChange.status == 'Failed'" class="label label-danger">{{batchChange.status}}</span>
                                        <span ng-if="batchChange.status == 'PartialFailure'" class="label label-warning">Partial Failure</span>
                                        <span ng-if="batchChange.status == 'PendingProcessing'" class="label label-info">Pending Processing</span>
                                        <span ng-if="batchChange.status == 'PendingReview'" class="label label-warning">Pending Review</span>
                                        <span ng-if="batchChange.status == 'Rejected'" class="label label-danger">{{batchChange.status}}</span>
                                        <span ng-if="batchChange.status == 'Scheduled'" class="label label-info">{{batchChange.status}}</span>
                                        <span ng-if="batchChange.status == 'Cancelled'" class="label label-default">{{batchChange.status}}</span>
                                    </td>
                                    <td ng-bind="batchChange.comments" class="col-md-3"></td>
                                    <td>
                                        <a type="button" class="btn btn-info btn-rounded"
                                           ng-href="/dnschanges/{{ batchChange.id }}">
                                            View
                                        </a>
                                        <a type="button" ng-if="canCancelBatchChange(batchChange, '@rootAccountName')" class="btn btn-warning btn-rounded"
                                           ng-click="cancelChange(batchChange)">
                                            Cancel
                                        </a>
                                    </td>
                                    <modal modal-id="cancel_batch_change" modal-title="Cancel DNS Change" modal-size="modal-md">
                                        <modal-body>
                                            <p>Are you sure you want to cancel DNS Change {{ currentBatchChange.id }}?</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>
                                </tr>
                            </tbody>
                        </table>

                        <!-- PAGINATION -->
                        <div class="dataTables_paginate vinyldns_paginate">
                            <span class="vinyldns_page_number">{{ getPageTitle() }}</span>
                            <ul class="pagination">
                                <li class="paginate_button previous">
                                    <a ng-if="prevPageEnabled()" ng-click="prevPage()">Previous</a>
                                </li>
                                <li class="paginate_button next">
                                    <a ng-if="nextPageEnabled()" ng-click="nextPage()">Next</a>
                                </li>
                            </ul>
                        </div>
                        <!-- END PAGINATION -->

                    </div>
                </div>
                @if(rootAccountCanReview){
            </div>
        </div>
        </div>
        }
                        </div>
                    </div>
                </div>
            </div>
    </div>
</div>
}

@plugins = {}

@main(rootAccountName)("DnsChangesController")("DNS Changes")(content)(plugins)