@(implicit request: play.api.mvc.Request[Any])

<!-- START SIMPLE DATATABLE -->
<div class="panel panel-default">
    <div class="panel-heading">
        <h3 class="panel-title">Zone Change History</h3>
    </div>
    <div class="panel-body">
        <div class="btn-group">
            <button class="btn btn-default" ng-click="refreshZoneChange()"><span class="fa fa-refresh"></span> Refresh</button>
        </div>

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

        <table id="zoneChangeDataTable" class="table table-hover table-striped">
            <thead>
                <tr>
                    <th>User name</th>
                    <th>Email</th>
                    <th>Access</th>
                    <th>Created</th>
                    <th>Updated</th>
                    <th>Change type</th>
                    <th>Admin group</th>
                    <th>ACL</th>
                </tr>
            </thead>
            <tbody>
                <tr  ng-repeat="zoneChange in zoneChanges track by $index">
                    <td>{{ zoneChange.userName }}</td>
                    <td>{{ zoneChange.zone.email }}</td>
                    <td>{{ zoneChange.zone.shared ? "Shared" : "Private" }}</td>
                    <td>{{ zoneChange.zone.created }}</td>
                    <td>{{ zoneChange.zone.updated }}</td>
                    <td>{{ zoneChange.changeType == "AutomatedSync" ? "Automated Sync" : zoneChange.changeType }}</td>
                    <td ng-switch="zoneChange.zone.adminGroupName || '_undefined_'">
                        <p ng-switch-when="_undefined_">Group has been deleted now.</p>
                        <a ng-switch-default ng-bind="zoneChange.zone.adminGroupName" href="/groups/{{zoneChange.zone.adminGroupId}}"></a>
                    </td>
                    </td>
                    <td>
                        <button class="btn btn-info btn-sm"
                                 ng-if="zoneChange.zone.acl.rules.length != 0"
                                 ng-click="refreshAclRule($index)">ACL Rules
                        </button>
                    </td>
                </tr>
            </tbody>
        </table>

        <!-- PAGINATION -->
        <div class="dataTables_paginate vinyldns_paginate">
            <span class="vinyldns_page_number">{{ getZoneHistoryPageNumber() }}</span>
            <ul class="pagination">
                <li class="paginate_button previous">
                    <a ng-if="prevPageEnabled()" ng-click="prevPageZoneHistory()" class="paginate_button">Previous</a>
                </li>
                <li class="paginate_button next">
                    <a ng-if="nextPageEnabled()" ng-click="nextPageZoneHistory()" class="paginate_button">Next</a>
                </li>
            </ul>
        </div>
        <!-- END PAGINATION -->
    </div>
</div>
<div class="panel-footer"></div>
    <!-- END SIMPLE DATATABLE -->

<!-- THE ACL RULE MODAL FORM STARTS -->
<form name="aclModalViewForm" role="form" class="form-horizontal" novalidate>
    <modal modal-id="aclModalView" modal-title="{{ aclRulesModal.title }}">
        <modal-body>
                <table id="aclRuleTable" class="table table-hover table-striped">
                    <thead>
                    <tr>
                        <th>User/Group</th>
                        <th>Access Level</th>
                        <th>Record Types</th>
                        <th>Record Mask</th>
                        <th>Description</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr  ng-repeat="rule in allAclRules track by $index">
                        <td class="wrap-long-text">
                            <a ng-if="rule.groupId != undefined" href="/groups/{{rule.groupId}}">
                                {{rule.groupName}}
                            </a>
                            <span ng-if="rule.groupId == undefined">
                                {{rule.userName}}
                            </span>
                        </td>
                        <td>
                            {{rule.accessLevel}}
                        </td>
                        <td>
                            <span ng-if="rule.recordTypes.length == 0">All Types</span>
                            <ul class="table-cell-list">
                                <li ng-repeat="item in rule.recordTypes">
                                    {{item}}
                                </li>
                            </ul>
                        </td>
                        <td class="wrap-long-text">
                            {{rule.recordMask}}
                        </td>
                        <td class="wrap-long-text">
                            {{rule.description}}
                        </td>
                    </tr>
                    </tbody>
                </table>
        </modal-body>
        <modal-footer>
                <span>
                    <button type="button" class="btn btn-default" data-dismiss="modal" ng-click="closeAclModalView()">Close</button>
                </span>
        </modal-footer>
    </modal>
</form>
<!-- THE ACL RULE MODAL FORM ENDS -->






