@(implicit request: play.api.mvc.Request[Any], meta: models.Meta)

    <!-- START ACCORDION -->
    <!-- START RECENT RECORDSET CHANGES TABLE PANEL -->
<div class="panel panel-default x_panel" ng-init="sharedDisplayEnabled = @meta.sharedDisplayEnabled; defaultTtl = @meta.defaultTtl">
    <div class="panel-heading">
        <h3 class="panel-title">
            <a class="collapse-link" href data-toggle="collapse" data-target="#recordChangePreviewTableCollapse" aria-expanded="false" aria-controls="recordChangePreviewTableCollapse">
                <i class="fa fa-chevron-down"></i>
                    Recent Record Changes
            </a>
        </h3>
    </div>
    <div class="panel-collapse collapse in" id="recordChangePreviewTableCollapse">
    <div class="panel-body x_content panel-body-open">
        <button class="btn btn-default" ng-click="refreshRecordChangesPreview()"><span class="fa fa-refresh"></span> Refresh</button>
        <table id="recordChangePreviewTable" class="table table-condensed">
            <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 recordsetChangesPreview 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>
            <!-- <button type="button" class="btn btn-info btn-sm">View full change log</button> -->
    </div>
    </div>
</div>
    <!-- START RECENT RECORDSET CHANGES TABLE PANEL -->
    <!-- END ACCORDION -->

    <!-- START RECORD TABLE -->
<div class="panel panel-default">
    <div class="panel-heading">
        <div class="row">
            <div class="col-md-10">
                <span class="panel-title bolder-font-weight">Records - {{recordSetCount}}</span>
            </div>
            <div class="col-md-2 pull-right">
                <form class="input-group remove-bottom-margin" ng-submit="refreshRecords()">
                    <div class="input-group remove-bottom-margin">

                        <span class="input-group-btn">
                            <button id="record-search-button" type="submit" class="btn btn-primary"><span class="fa fa-search"></span></button>
                        </span>
                        <input id="record-search-text" ng-model="query" type="text" class="form-control" placeholder="Record Name">
                    </div>
                </form>
                <div class="dropdown">
                    <a class="record-type-filter-heading force-cursor dropdown-toggle" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">Filter By Record Type <i class="fa fa-chevron-down"></i></a>
                    <ul class="dropdown-menu record-type-filters" aria-labelledby="dropdownMenu1">
                        <li ng-repeat="recordType in readRecordTypes"><input type="checkbox" ng-checked="selectedRecordTypes.indexOf(recordType) != -1" ng-click="toggleCheckedRecordType(recordType)"> {{recordType}}</li>
                    </ul>
                </div>
            </div>
        </div>
    </div>

    <div class="panel-body">
        <div class="vinyldns-panel-top">
            <div class="btn-group">
                <span class="modal fade" id="loader" tabindex="-1" role="dialog" >
                            <span class="spinner" ></span>
                        </span>
                <button id="refresh-records-button" class="btn btn-default" ng-click="refreshRecords()"><span class="fa fa-refresh"></span> Refresh</button>
                <button id="create-record-button" class="btn btn-default" ng-if="canReadZone && (zoneInfo.accessLevel == 'Delete' || canCreateRecordsViaAcl())" ng-click="createRecord(defaultTtl)"><span class="fa fa-plus"></span> Create Record Set</button>
                <button id="zone-sync-button" class="btn btn-default mb-control" ng-if="zoneInfo.accessLevel=='Delete'" data-toggle="modal" data-target="#mb-sync"><span class="fa fa-exchange"></span> Sync Zone</button>
            </div>
        </div>

      <!-- PAGINATION -->
        <div class="dataTables_paginate vinyldns_paginate">
          <span class="vinyldns_page_number">{{ getRecordPageTitle() }}</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 -->

      <table id="recordDataTable" class="table table-hover table-striped">
            <thead>
                <tr>
                    <th class="col-md-4">
                        <a class="fa-force-cursor" ng-click="toggleNameSort()">Name
                            <div class="fa-chevron-icon">
                                <i class="fa fa-chevron-circle-up {{nameSortSymbolUp}}"></i>
                                <i class="fa fa-chevron-circle-down {{nameSortSymbolDown}}"></i>
                            </div>
                        </a>
                    </th>
                    <th>
                        <a class="fa-force-cursor" ng-click="toggleRecordTypeSort()">Type
                            <div class="fa-chevron-icon">
                                <i class="fa fa-chevron-circle-up {{recordTypeSortSymbolUp}}"></i>
                                <i class="fa fa-chevron-circle-down {{recordTypeSortSymbolDown}}"></i>
                            </div>
                        </a>
                    </th>
                    <th>TTL</th>
                    <th class="col-md-4">Record Data</th>
                    @if(meta.sharedDisplayEnabled) {
                        <th ng-if="zoneInfo.shared">Owner Group Name</th>
                        <th ng-if="zoneInfo.shared">OwnerShip Transfer Status</th>
                    }
                    <th>Actions</th>
                </tr>
            </thead>
            <tbody>
                <tr ng-repeat="(recordName, record) in records track by $index">
                    <td>
                        <div ng-if="record.isDotted && record.type != 'TXT' && record.type != 'SRV' && record.type != 'NAPTR'" class="text-danger wrap-long-text" data-toggle="tooltip" data-placement="top"
                        title="This is a dotted host!">
                            {{record.name}} <span class="fa fa-warning" />
                        </div>
                        <div class="wrap-long-text" ng-if="!record.isDotted || (record.type != 'TXT' || record.type != 'SRV' || record.type != 'NAPTR')">
                            {{record.name}}
                        </div>
                    </td>
                    <td>{{record.type}}</td>
                    <td>{{record.ttl}}</td>
                    <td class="record-data">
                        <span ng-if="record.accessLevel != 'NoAccess'">
                        <span ng-if="record.type == 'A'">
                            <ul class="table-cell-list">
                                <li class="wrap-long-text" ng-repeat="item in record.aRecordData track by $index"
                                    ng-if="!record.onlyFour || $index <= 3">{{item}}</li>
                                <span ng-if="record.onlyFour && record.aRecordData.length > 4">
                                    <a href ng-click="record.onlyFour=false">Show more...</a>
                                </span>
                                <span ng-if="!record.onlyFour">
                                    <a href ng-click="record.onlyFour=true">Show fewer...</a>
                                </span>
                            </ul>
                        </span>
                        <span ng-if="record.type == 'AAAA'">
                            <ul class="table-cell-list">
                                <li class="wrap-long-text" ng-repeat="item in record.aaaaRecordData track by $index"
                                    ng-if="!record.onlyFour || $index <= 3">{{item}}</li>
                                <span ng-if="record.onlyFour && record.aaaaRecordData.length > 4">
                                    <a href ng-click="record.onlyFour=false">Show more...</a>
                                </span>
                                <span ng-if="!record.onlyFour">
                                    <a href ng-click="record.onlyFour=true">Show fewer...</a>
                                </span>
                            </ul>
                        </span>
                        <span ng-if="record.type == 'CNAME'">{{ record.cnameRecordData }}</span>
                        <span ng-if="record.type == 'DS'">
                            <ul class="table-cell-list">
                                <li class="wrap-long-text" ng-repeat="item in record.dsItems track by $index"
                                    ng-if="!record.onlyFour || $index <= 3">
                                    Keytag: {{ item.keytag }} | Algorithm: {{ item.algorithm }} | Digest Type: {{ item.digesttype }} | Digest: {{ item.digest }}
                                </li>
                                <span ng-if="record.onlyFour && record.mxItems.length > 4">
                                    <a href ng-click="record.onlyFour=false">Show more...</a>
                                </span>
                                <span ng-if="!record.onlyFour">
                                    <a href ng-click="record.onlyFour=true">Show fewer...</a>
                                </span>
                            </ul>
                        </span>
                        <span ng-if="record.type == 'MX'">
                            <ul class="table-cell-list">
                                <li class="wrap-long-text" ng-repeat="item in record.mxItems track by $index"
                                    ng-if="!record.onlyFour || $index <= 3">
                                    Preference: {{ item.preference }} | Exchange: {{ item.exchange }}
                                </li>
                                <span ng-if="record.onlyFour && record.mxItems.length > 4">
                                    <a href ng-click="record.onlyFour=false">Show more...</a>
                                </span>
                                <span ng-if="!record.onlyFour">
                                    <a href ng-click="record.onlyFour=true">Show fewer...</a>
                                </span>
                            </ul>
                        </span>
                        <span ng-if="record.type == 'NS'">
                            <ul class="table-cell-list">
                                <li class="wrap-long-text" ng-repeat="item in record.nsRecordData track by $index"
                                    ng-if="!record.onlyFour || $index <= 3">{{item}}</li>
                                <span ng-if="record.onlyFour && record.nsRecordData.length > 4">
                                    <a href ng-click="record.onlyFour=false">Show more...</a>
                                </span>
                                <span ng-if="!record.onlyFour">
                                    <a href ng-click="record.onlyFour=true">Show fewer...</a>
                                </span>
                            </ul>
                        </span>
                        <span ng-if="record.type == 'PTR'">
                            <ul class="table-cell-list">
                                <li class="wrap-long-text" ng-repeat="item in record.ptrRecordData track by $index"
                                    ng-if="!record.onlyFour || $index <= 3">{{item}}</li>
                                <span ng-if="record.onlyFour && record.ptrRecordData.length > 4">
                                    <a href ng-click="record.onlyFour=false">Show more...</a>
                                </span>
                                <span ng-if="!record.onlyFour">
                                    <a href ng-click="record.onlyFour=true">Show fewer...</a>
                                </span>
                            </ul>
                        </span>
                        <span ng-if="record.type == 'SOA'">
                            <table>
                                <tr>
                                    <td class="record-data-label"> Mname: </td>
                                    <td class="wrap-long-text"> {{ record.soaMName }} </td>
                                </tr>
                                <tr>
                                    <td class="record-data-label"> Rname: </td>
                                    <td class="wrap-long-text"> {{ record.soaRName }} </td>
                                </tr>
                                <tr>
                                    <td class="record-data-label"> Serial: </td>
                                    <td class="wrap-long-text"> {{ record.soaSerial }} </td>
                                </tr>
                                <tr>
                                    <td class="record-data-label"> Refresh: </td>
                                    <td class="wrap-long-text"> {{ record.soaRefresh }} </td>
                                </tr>
                                <tr>
                                    <td class="record-data-label"> Retry: </td>
                                    <td class="wrap-long-text"> {{ record.soaRetry }} </td>
                                </tr>
                                <tr>
                                    <td class="record-data-label"> Expire: </td>
                                    <td class="wrap-long-text"> {{ record.soaExpire }} </td>
                                </tr>
                                <tr>
                                    <td class="record-data-label"> Minimum:&emsp; </td>
                                    <td class="wrap-long-text"> {{ record.soaMinimum }} </td>
                                </tr>
                            </table>
                        </span>
                        <span ng-if="record.type == 'SPF'">
                            <ul class="table-cell-list">
                                <li class="wrap-long-text" ng-repeat="item in record.spfRecordData track by $index"
                                    ng-if="!record.onlyFour || $index <= 3">{{item}}</li>
                                <span ng-if="record.onlyFour && record.spfRecordData.length > 4">
                                    <a href ng-click="record.onlyFour=false">Show more...</a>
                                </span>
                                <span ng-if="!record.onlyFour">
                                    <a href ng-click="record.onlyFour=true">Show fewer...</a>
                                </span>
                            </ul>
                        </span>
                        <span ng-if="record.type == 'SRV'">
                            <ul class="table-cell-list">
                                <li class="wrap-long-text" ng-repeat="item in record.srvItems track by $index"
                                ng-if="!record.onlyFour || $index <= 3">
                                    Priority: {{ item.priority }} | Weight: {{ item.weight }} | Port: {{ item.port }}
                                    | Target: {{ item.target }}
                                </li>
                                <span ng-if="record.onlyFour && record.srvItems.length > 4">
                                    <a href ng-click="record.onlyFour=false">Show more...</a>
                                </span>
                                <span ng-if="!record.onlyFour">
                                    <a href ng-click="record.onlyFour=true">Show fewer...</a>
                                </span>
                            </ul>
                        </span>
                        <span ng-if="record.type == 'NAPTR'">
                            <ul class="table-cell-list">
                                <li class="wrap-long-text" ng-repeat="item in record.naptrItems track by $index"
                                ng-if="!record.onlyFour || $index <= 3">
                                    Order: {{ item.order }} | Preference: {{ item.preference }} | Flags: {{ item.flags }}
                                    | Service: {{ item.service }} | Regexp: {{ item.regexp }} | Replacement: {{ item.replacement }}
                                </li>
                                <li ng-if="record.onlyFour && record.naptrItems.length > 4">
                                    <a href ng-click="record.onlyFour=false">more...</a>
                                </li>
                                <li ng-if="!record.onlyFour">
                                    <a href ng-click="record.onlyFour=true">less...</a>
                                </li>
                            </ul>
                        </span>
                        <span ng-if="record.type == 'SSHFP'">
                            <ul class="table-cell-list">
                                <li class="wrap-long-text" ng-repeat="item in record.sshfpItems track by $index"
                                ng-if="!record.onlyFour || $index <= 3">
                                    Algorithm: {{ sshfpAlgorithms[item.algorithm-1].name }}
                                    | Type: {{ sshfpTypes[item.type-1].name }}
                                    | Fingerprint: {{ item.fingerprint }}
                                </li>
                                <span ng-if="record.onlyFour && record.sshfpItems.length > 4">
                                    <a href ng-click="record.onlyFour=false">Show more...</a>
                                </span>
                                <span ng-if="!record.onlyFour">
                                    <a href ng-click="record.onlyFour=true">Show fewer...</a>
                                </span>
                            </ul>
                        </span>
                        <span ng-if="record.type == 'TXT'">
                            <ul class="table-cell-list">
                                <li class="wrap-long-text" ng-repeat="item in record.textRecordData track by $index"
                                    ng-if="!record.onlyFour || $index <= 3">{{item}}</li>
                                <span ng-if="record.onlyFour && record.textRecordData.length > 4">
                                    <a href ng-click="record.onlyFour=false">Show more...</a>
                                </span>
                                <span ng-if="!record.onlyFour">
                                    <a href ng-click="record.onlyFour=true">Show fewer...</a>
                                </span>
                            </ul>
                        </span>
                        </span>
                    </td>
                    @if(meta.sharedDisplayEnabled) {
                        <td ng-if="zoneInfo.shared">
                            <a ng-if="record.ownerGroupName && canAccessGroup(record.ownerGroupId)" ng-bind="record.ownerGroupName" href="/groups/{{record.ownerGroupId}}"></a>
                            <span ng-if="record.ownerGroupName && !canAccessGroup(record.ownerGroupId)" ng-bind="record.ownerGroupName" ></span>                            <span ng-if="!record.ownerGroupId">Unowned</span>
                            <span ng-if="record.ownerGroupId && !record.ownerGroupName" class="text-danger" data-toggle="tooltip" data-placement="top"
                                  title="Group with ID {{record.ownerGroupId}} no longer exists."><span class="fa fa-warning"></span> Group deleted</span>
                        </td>
                        <td ng-if="zoneInfo.shared">
                            <span class="label label-success"
                                  ng-if= "record.recordSetGroupChange.ownerShipTransferStatus == 'ManuallyApproved' ||
                                   record.recordSetGroupChange.ownerShipTransferStatus == 'AutoApproved'">Approved</span>
                            <span class="label label-danger"
                                  ng-if= "record.recordSetGroupChange.ownerShipTransferStatus == 'ManuallyRejected'">Rejected</span>
                            <span ng-if= "record.recordSetGroupChange.ownerShipTransferStatus == 'None'"></span>
                            <span class="label label-default"
                                  ng-if= "record.recordSetGroupChange.ownerShipTransferStatus == 'Cancelled'">Cancelled</span>
                            <span class="label label-info"
                                  ng-if= "record.recordSetGroupChange.ownerShipTransferStatus == 'PendingReview'">Pending Action</span>
                        </td>
                    }
                    <td>
                        <span ng-if="(record.canBeEdited && record.accessLevel != 'NoAccess' && record.accessLevel != 'Read')">
                            <div class="table-form-group">
                                <span><button class="btn btn-info btn-sm" ng-click="editRecord(record)">Update</button></span>
                                <span ng-if="record.accessLevel == 'Delete'"><button id="delete-record-{{record.name}}-button" class="btn btn-danger btn-sm btn-rounded" ng-click="deleteRecord(record)">Delete</button></span>
                                <span ng-if="zoneInfo.shared && record.ownerGroupId == undefined && record.canBeEdited ">
                                    <button class="btn btn-info btn-sm" ng-click="requestOwnerShip(record)">Request</button>
                                </span>
                            </div>
                        </span>
                        <span ng-if="zoneInfo.shared && record.ownerGroupId != undefined && record.canBeEdited"
                                ng-switch="record.isCurrentRecordSetOwner">
                            <span ng-switch-when="false">
                                <button class="btn btn-info btn-sm" ng-click="requestOwnerShipTransfer(record, true)">Request</button>
                            </span>
                            <span ng-switch-when="true" ng-if= record.recordSetGroupChange.ownerShipTransferStatus=="PendingReview">
                                <button class="btn btn-info btn-sm" ng-click="requestOwnerShipTransfer(record, false)">Close Request</button>
                            </span>
                        </span>
                    </td>
                </tr>
            </tbody>
        </table>

        <!-- PAGINATION -->
        <div class="dataTables_paginate vinyldns_paginate">
            <span class="vinyldns_page_number">{{ getRecordPageTitle() }}</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 class="panel-footer"></div>
</div>
    <!-- END RECORD TABLE -->

    <!-- MESSAGE MODAL-->
<div class="fade in modal" data-sound="alert" id="mb-sync">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
              <h4>Sync Zone?</h4>
            </div>
            <div class="modal-body">
                <p>Are you sure you want to sync {{ zoneInfo.name }}? This zone will be unavailable for
                    changes until the zone sync has completed.
                </p>
            </div>
            <div class="modal-footer">
                <div class="pull-right">
                    <button id="zone-sync-yes-button" class="btn btn-info" data-dismiss="modal" ng-click="syncZone()">Yes</button>
                    <button class="btn btn-primary" data-dismiss="modal">No</button>
                </div>
            </div>
        </div>
    </div>
</div>
    <!-- END MESSAGE MODAL-->
