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

<!-- START SIMPLE DATATABLE -->
<div class="panel panel-default">
    <div class="panel-heading">
        <h3 class="panel-title">All Record Changes</h3>
    </div>
    <div class="panel-body">
        <div class="btn-group">
            <button class="btn btn-default" ng-click="refreshRecordChanges()"><span class="fa fa-refresh"></span> Refresh</button>
        </div>

        <!-- PAGINATION -->
        <div class="dataTables_paginate vinyldns_paginate">
            <span class="vinyldns_page_number">{{ getChangePageTitle() }}</span>
            <ul class="pagination">
                <li class="paginate_button previous">
                    <a ng-if="changePrevPageEnabled()" ng-click="changePrevPage()" class="paginate_button">Previous</a>
                </li>
                <li class="paginate_button next">
                    <a ng-if="changeNextPageEnabled()" ng-click="changeNextPage()" class="paginate_button">Next</a>
                </li>
            </ul>
        </div>
        <!-- END PAGINATION -->

        <table id="changeDataTable" class="table table-hover table-striped">
            <thead>
                <tr>
                    <th>Time</th>
                    <th class="col-md-5">Recordset Name</th>
                    <th>Recordset Type</th>
                    <th>Change Type</th>
                    <th>User</th>
                    <th>Status</th>
                    <th>Additional Info</th>
                </tr>
            </thead>
            <tbody>
                <tr ng-repeat="change in recordsetChanges track by $index">
                    <td>{{change.created}}</td>
                    <td class="wrap-long-text">{{change.recordSet.name}}</td>
                    <td>{{change.recordSet.type}}</td>
                    <td>{{change.changeType}}</td>
                    <td>{{change.userName}}</td>
                    <td>
                        <span class="label label-{{ getRecordChangeStatusLabel(change.status) }}">{{ change.status }}</span>
                    </td>
                    <td class="col-md-3 wrap-long-text">
                        {{change.systemMessage}}
                        <div ng-if="change.status !='Failed'">
                            <a ng-if="change.changeType =='Create'" ng-click="viewRecordInfo(change.recordSet)" class="force-cursor">View created recordset</a>
                            <a ng-if="change.changeType =='Delete'" ng-click="viewRecordInfo(change.recordSet)" class="force-cursor">View deleted recordset</a>

                            <div><a ng-if="change.changeType =='Update'" ng-click="viewRecordInfo(change.recordSet)" class="force-cursor">View new recordset</a></div>
                            <div><a ng-if="change.changeType =='Update'" ng-click="viewRecordInfo(change.updates)" class="force-cursor">View old recordset</a></div>
                        </div>
                    </td>
                </tr>
            </tbody>

        </table>

        <!-- PAGINATION -->
        <div class="dataTables_paginate vinyldns_paginate">
            <span class="vinyldns_page_number">{{ getChangePageTitle() }}</span>
            <ul class="pagination">
                <li class="paginate_button previous">
                    <a ng-if="changePrevPageEnabled()" ng-click="changePrevPage()" class="paginate_button">Previous</a>
                </li>
                <li class="paginate_button next">
                    <a ng-if="changeNextPageEnabled()" ng-click="changeNextPage()" class="paginate_button">Next</a>
                </li>
            </ul>
        </div>
        <!-- END PAGINATION -->

    </div>
    <div class="panel-footer"></div>
</div>
    <!-- END SIMPLE DATATABLE -->
