@(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">

        <!-- START BREADCRUMB -->
        <ul class="breadcrumb">
            <li><a href="/">Home</a></li>
            <li><a href="/zones">RecordSets</a></li>
        </ul>
        <!-- END BREADCRUMB -->

        <!-- PAGE TITLE -->
        <div class="page-title">
            <h3><span class="fa fa-search"></span> Global RecordSet Search
            </h3>
            <p>The Global RecordSet Search is a read-only view of the current disposition of records in VinylDNS.</p>
        </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>

            <div>
                <div>
                    <h5>
                        <a data-toggle="collapse" data-target="#collapseInstruction" aria-expanded="false" aria-controls="collapseInstruction">
                            <span class="badge">How to Search <span class="fa fa-chevron-down"></span></span>
                        </a>
                    </h5>
                </div>
                <div class="collapse" id="collapseInstruction">
                    <div class="well">
                        <p>The search is based on the fully qualified domain name (FQDN) of a record. You can do an exact match search or fuzzy match to lookup records.</p>
                        <p>
                            A minimum of <strong>two alphanumeric characters</strong> for the record name is <em>required</em> for searching. Also,
                            a search term cannot <strong>both start and end</strong> with a wildcard character.
                        </p>
                        <p>
                            <strong>Examples:</strong>
                            <ul>
                                <li>test.example.com. -&gt; test.example.com.</li>
                                <li>test.example.com -&gt; test.example.com.</li>
                                <li>test.* -&gt; test.example.com., test.example.net., test.net.</li>
                                <li>*example.com -&gt; one.example.com., test.example.com.</li>
                                <li>*example* -&gt; <strong>INVALID</strong></li>
                            </ul>
                        </p>
                        <hr/>
                        <h5>PTR Records</h5>
                        <p>For PTR records you can look up records by their IP address or by their FQDN. Compressed or expanded formats of IPv6 addresses are supported. </p>
                        <p>Partial matching of IP addresses is not supported, but partial matching of the FQDN is supported.</p>
                        <p>
                            <strong>Examples:</strong>
                            <ul>
                                <li>4.4.8.8.in-addr.arpa. -&gt; 4.4.8.8.in-addr.arpa.</li>
                                <li>*.4.8.8.in-addr.arpa. -&gt; 2.4.8.8.in-addr.arpa., 3.4.8.8.in-addr.arpa., 4.4.8.8.in-addr.arpa.</li>
                                <li>8.8.4.4 -&gt; 4.4.8.8.in-addr.arpa.</li>
                                <li>2001:db8::567:89ab -&gt; b.a.9.8.7.6.5.0.0.0.0.0.0.0.0.0.0.0.0.0.0.0.0.0.8.b.d.0.1.0.0.2.ip6.arpa.</li>
                            </ul>
                        </p>
                    </div>
                </div>
            </div>

        <!-- 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</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">Filters<i class="fa fa-chevron-down"></i></a>
                            <div class="dropdown-menu" aria-labelledby="dropdownMenu1">
                                <div class="filter-margin">
                                    Record Types
                                    <div>
                                        <ul class="record-type-filters">
                                            <li ng-repeat="recordType in readRecordTypes" style="list-style-type:none;"><input type="checkbox" ng-checked="selectedRecordTypes.indexOf(recordType) != -1" ng-click="toggleCheckedRecordType(recordType)"> {{recordType}}</li>
                                        </ul>
                                    </div>
                                </div>
                                <div class="filter-margin">
                                    Record Owner Group
                                    <div>
                                        <select class="form-control dropdown-bottom-margin" id="recordOwnerGroup" ng-model="ownerGroupFilter" ng-options="group.id as group.name for group in groups | orderBy: 'name'" ng-click="$event.stopPropagation();">
                                            <option value=""></option>
                                        </select>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="panel-body">
                <div class="vinyldns-panel-top">
                    <div class="btn-group">
                        <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="canCreateRecords" ng-click="createRecord(defaultTtl)"><span class="fa fa-plus"></span> Create Record Set</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 -->

                    <!-- MODAL BEGIN -->
                    <div class="modal fade" id="loader" tabindex="-1" role="dialog">
                        <div class="spinner" ></div>
                    </div>

                    <div class="modal fade" id="ShowNoRec" tabindex="-1" role="dialog">
                        <div class="modal-dialog modal-sm" role="document">
                            <div class="modal-content">
                                <div class="modal-body text-center">
                                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                                    <div class="loader-txt">
                                        <p> <br /><br />No records found.<br /><br /></p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- MODAL END -->

                    <table id="recordDataTable" class="table table-hover table-striped">
                        <thead>
                        <tr>
                            <th class="col-md-4">
                                <a class="fa-force-cursor" ng-click="toggleNameSort()">FQDN
                                    <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>Type</th>
                            <th>TTL</th>
                            <th>Record Data</th>
                            <th>Zone</th>
                            <th>Zone Access Type</th>
                            @if(meta.sharedDisplayEnabled) {
                                <th>Owner Group Name</th>
                            }
                            <th>Record History</th>
                        </tr>
                        </thead>
                        <tbody>

                        <tr ng-repeat="(recordName, record) in records track by $index">
                            <td>
                                <div class="wrap-long-text">
                                    {{record.fqdn}}
                                </div>
                            </td>
                            <td class="no-wrap">{{record.type}}</td>
                            <td class="no-wrap">{{record.ttl}}</td>
                            <td class="record-data wrap-long-text">
                                <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>
                            <td>{{record.zoneName}}</td>
                            <td ng-if="record.zoneShared">Shared</td>
                            <td ng-if="!record.zoneShared">Private</td>
                            @if(meta.sharedDisplayEnabled) {
                            <td>
                                <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>
                                <span><button class="btn btn-info btn-sm" ng-disabled="(record.ownerGroupName && !canAccessGroup(record.ownerGroupId))" ng-click="viewRecordHistory(record.fqdn, record.type, record.zoneId)">View History</button></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 -->

        </div>
        <!-- END PAGE CONTENT WRAPPER -->

    </div>
    <!-- END PAGE CONTENT -->

    <div class="modal fade in" id="record_history_modal">
        <div class="modal-dialog set-width">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span>
                    </button>
                    <div class="modal-title">Record History</div>
                </div>
                <div class="modal-body">
                    <!-- START SIMPLE DATATABLE -->
                    <div class="panel panel-default" id="record_change_history">
                        <div class="panel-heading">
                            <h3 class="panel-title">Record Change History</h3>
                        </div>
                        <div class="panel-body">
                            <div class="btn-group">
                                <button class="btn btn-default" ng-click="refreshRecordChangeHistory(recordFqdn, recordType)"><span class="fa fa-refresh"></span> Refresh</button>
                            </div>

                            <!-- PAGINATION -->
                            <div class="dataTables_paginate vinyldns_paginate">
                                <span class="vinyldns_page_number">{{ getRecordChangePageTitle() }}</span>
                                <ul class="pagination">
                                    <li class="paginate_button previous">
                                        <a ng-if="changeHistoryPrevPageEnabled()" ng-click="changeHistoryPrevPage()" class="paginate_button">Previous</a>
                                    </li>
                                    <li class="paginate_button next">
                                        <a ng-if="changeHistoryNextPageEnabled()" ng-click="changeHistoryNextPage()" 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">{{ getRecordChangePageTitle() }}</span>
                                <ul class="pagination">
                                    <li class="paginate_button previous">
                                        <a ng-if="changeHistoryPrevPageEnabled()" ng-click="changeHistoryPrevPage()" class="paginate_button">Previous</a>
                                    </li>
                                    <li class="paginate_button next">
                                        <a ng-if="changeHistoryNextPageEnabled()" ng-click="changeHistoryNextPage()" class="paginate_button">Next</a>
                                    </li>
                                </ul>
                            </div>
                            <!-- END PAGINATION -->

                        </div>
                        <div class="panel-footer"></div>
                    </div>
                    <!-- END SIMPLE DATATABLE -->
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                </div>
            </div>
        </div>
    </div>

    <recordmodal></recordmodal>
}

@plugins = {
<script type='text/javascript' src='/public/js/ui.js'></script>
}


@main(rootAccountName)("RecordSetsController")("RecordSets")(content)(plugins)
