@(rootAccountName: String)(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">Zones</li>
    </ul>
    <!-- END BREADCRUMB -->

    <!-- PAGE TITLE -->
    <div class="page-title">
        <h3><span class="fa fa-table"></span> Zones</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>

        <!-- START VERTICAL TABS -->
        <div class="panel panel-default panel-tabs">
            <ul class="nav nav-tabs bar_tabs">
                <li class="active"><a href="#myZones" data-toggle="tab" ng-click="myZonesAccess()">My Zones</a></li>
                <li><a id="tab2-button" href="#allZones" data-toggle="tab" ng-click="allZonesAccess()">All Zones</a></li>
                <li><a id="tab3-button" href="#deletedZones" data-toggle="tab">Abandoned Zones</a></li>
            </ul>

            <div class="panel-body tab-content">
                <div class="tab-pane active" id="myZones">
                    <div class="row">
                        <div class="col-md-12">

                            <!-- SIMPLE DATATABLE -->
                            <div class="panel panel-default">
                                <div class="panel-heading">
                                    <div class="row flex">
                                        <div class="btn-group col-md-9 flex-1">
                                            <button class="btn btn-default" ng-click="resetCurrentZone()" data-toggle="modal" data-target="#zone_connection_modal" id="open-zone-modal-button">
                                                <span class="fa fa-arrow-right"></span> Connect
                                            </button>
                                            <button id="zone-refresh-button" class="btn btn-default" ng-click="refreshZones()">
                                                <span class="fa fa-refresh"></span> Refresh
                                            </button>
                                        </div>
                                        <div class="col-md-3 pull-right">
                                            <!-- SEARCH BOX -->
                                            <form class="input-group remove-bottom-margin full-width" ng-submit="refreshZones()">
                                                <div class="input-group remove-bottom-margin">
                                                    <span class="input-group-btn">
                                                        <button id="zone-search-button" type="submit" class="btn btn-primary btn-left-round">
                                                            <span class="fa fa-search"></span>
                                                        </button>
                                                    </span>
                                                    <input ng-model="query" type="text" class="form-control zone-search-text"  placeholder="{{!searchByAdminGroup ? 'Zone Name' : 'Admin Group Name'}}"/>
                                                </div>
                                            </form>
                                            <!-- END SEARCH BOX -->
                                            <div class="flex">
                                                <label class="reduce-font-weight remove-bottom-margin flex-1">
                                                    <input class="isGroupSearch" type="checkbox" ng-model="searchByAdminGroup" ng-change="refreshZones()"> Search by admin group
                                                </label>
                                                <form action="" class="pull-right flex-1">
                                                    <div>
                                                        <label class="reduce-font-weight remove-bottom-margin">
                                                            <input type="checkbox" ng-model="includeReverse" ng-true-value="false" ng-false-value="true" ng-change="refreshZones()"> Hide PTR Zones
                                                        </label>
                                                    </div>
                                                </form>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div id="zone-list-table" class="panel-body">
                                    <p ng-if="!zonesLoaded">Loading zones...</p>
                                    <p ng-if="!hasZones && zonesLoaded">No zones found. You do not own any zones in VinylDNS. You can manage records in shared zones through <a href="../dnschanges">DNS Changes</a>.</p>
                                    <p ng-if="hasZones && zonesLoaded && !zones.length">No zones match the search criteria.</p>

                                    <!-- PAGINATION -->
                                    <div class="dataTables_paginate vinyldns_paginate paginate_left">
                                        <span class="vinyldns_page_number">{{ getZonesPageNumber("myZones") }}</span>
                                        <ul class="pagination">
                                            <li class="paginate_button previous">
                                                <a ng-if="prevPageEnabled('myZones')" ng-click="prevPageMyZones()">Previous</a>
                                            </li>
                                            <li class="paginate_button next">
                                                <a ng-if="nextPageEnabled('myZones')" ng-click="nextPageMyZones()">Next</a>
                                            </li>
                                        </ul>
                                    </div>
                                    <!-- END PAGINATION -->

                                    <table class="table" ng-if="zones.length">
                                        <thead>
                                        <tr>
                                            <th>Name</th>
                                            <th>Email</th>
                                            <th>Admin Group</th>
                                            <th>Status</th>
                                            @if(meta.sharedDisplayEnabled) {
                                            <th>Access</th>
                                            }
                                            <th>Actions</th>
                                        </tr>
                                        </thead>
                                        <tbody>
                                        <tr ng-repeat="zone in zones">
                                            <td class="wrap-long-text"><a ng-href="/zones/{{ zone.id }}" ng-bind="zone.name"></a></td>
                                            <td class="wrap-long-text" ng-bind="zone.email"></td>
                                            <td>
                                                <a ng-if="canAccessGroup(zone.adminGroupId)" ng-bind="zone.adminGroupName" href="/groups/{{zone.adminGroupId}}"></a>
                                                <span ng-if="!canAccessGroup(zone.adminGroupId)" ng-bind="zone.adminGroupName" style="line-height: 0"></span>
                                            </td>
                                            <td ng-bind="zone.status"></td>
                                            @if(meta.sharedDisplayEnabled) {
                                            <td>{{zone.shared ? "Shared" : "Private"}}</td>
                                            }
                                            <td>
                                                <div class="table-form-group">
                                                    <a id="zone-view-{{zone.name}}" type="button" class="btn btn-info btn-rounded"
                                                       ng-href="/zones/{{ zone.id }}">
                                                        View
                                                    </a>
                                                </div>
                                            </td>
                                        </tr>
                                        </tbody>
                                    </table>

                                    <!-- PAGINATION -->
                                    <div class="dataTables_paginate vinyldns_paginate paginate_left">
                                        <span class="vinyldns_page_number">{{ getZonesPageNumber("myZones") }}</span>
                                        <ul class="pagination">
                                            <li class="paginate_button previous">
                                                <a ng-if="prevPageEnabled('myZones')" ng-click="prevPageMyZones()">Previous</a>
                                            </li>
                                            <li class="paginate_button next">
                                                <a ng-if="nextPageEnabled('myZones')" ng-click="nextPageMyZones()">Next</a>
                                            </li>
                                        </ul>
                                    </div>
                                    <!-- END PAGINATION -->

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

                        </div>
                    </div>
                </div>
                <div class="modal fade" id="loader" tabindex="-1" role="dialog" >
                    <div class="spinner" ></div>
                </div>
                <div class="tab-pane" id="allZones">
                    <div class="row">
                        <div class="col-md-12">

                            <!-- SIMPLE DATATABLE -->
                            <div class="panel panel-default">
                                <div class="panel-heading">
                                    <div class="row flex">
                                        <div class="btn-group col-md-9 flex-1">
                                            <button id="zone-refresh-button" class="btn btn-default" ng-click="refreshZones()">
                                                <span class="fa fa-refresh"></span> Refresh
                                            </button>
                                        </div>
                                        <div class="col-md-3 pull-right">
                                            <!-- SEARCH BOX -->
                                            <form class="input-group remove-bottom-margin full-width" ng-submit="refreshZones()">
                                                <div class="input-group remove-bottom-margin">
                                                    <span class="input-group-btn">
                                                        <button id="all-zones-search-button" type="submit" class="btn btn-primary btn-left-round">
                                                            <span class="fa fa-search"></span>
                                                        </button>
                                                    </span>
                                                    <input ng-model="query" type="text" class="form-control zone-search-text"  placeholder="{{!searchByAdminGroup ? 'Zone Name' : 'Admin Group Name'}}"/>
                                                </div>
                                            </form>
                                            <!-- END SEARCH BOX -->
                                            <div class="flex">
                                                <label class="reduce-font-weight remove-bottom-margin flex-1">
                                                    <input class="isGroupSearch" type="checkbox" ng-model="searchByAdminGroup" ng-change="refreshZones()"> Search by admin group
                                                </label>
                                                <form action="" class="pull-right flex-1">
                                                    <div>
                                                        <label class="reduce-font-weight remove-bottom-margin">
                                                            <input type="checkbox" ng-model="includeReverse" ng-true-value="false" ng-false-value="true" ng-change="refreshZones()"> Hide PTR Zones
                                                        </label>
                                                    </div>
                                                </form>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div id="zone-list-table" class="panel-body">
                                    <p ng-if="!allZonesLoaded">Loading zones...</p>
                                    <p ng-if="allZonesLoaded && !allZones.length">No zones match the search criteria.</p>

                                    <!-- PAGINATION -->
                                    <div class="dataTables_paginate vinyldns_paginate paginate_left">
                                        <span class="vinyldns_page_number">{{ getZonesPageNumber("allZones") }}</span>
                                        <ul class="pagination">
                                            <li class="paginate_button previous">
                                                <a ng-if="prevPageEnabled('allZones')" ng-click="prevPageAllZones()">Previous</a>
                                            </li>
                                            <li class="paginate_button next">
                                                <a ng-if="nextPageEnabled('allZones')" ng-click="nextPageAllZones()">Next</a>
                                            </li>
                                        </ul>
                                    </div>
                                    <!-- END PAGINATION -->

                                    <table class="table" ng-if="allZones.length">
                                        <thead>
                                        <tr>
                                            <th>Name</th>
                                            <th>Email</th>
                                            <th>Admin Group</th>
                                            <th>Status</th>
                                            @if(meta.sharedDisplayEnabled) {
                                            <th>Access</th>
                                            }
                                            <th>Actions</th>
                                        </tr>
                                        </thead>
                                        <tbody>
                                        <tr ng-repeat="zone in allZones">
                                            <td class="wrap-long-text">
                                                <a ng-if="canAccessZone(zone.accessLevel)" ng-bind="zone.name" href="/zones/{{zone.id}}"></a>
                                                <span ng-if="!canAccessZone(zone.accessLevel)" ng-bind="zone.name"></span>
                                            </td>
                                            <td class="wrap-long-text" ng-bind="zone.email"></td>
                                            <td>
                                                <a ng-if="canAccessGroup(zone.adminGroupId)" ng-bind="zone.adminGroupName" href="/groups/{{zone.adminGroupId}}"></a>
                                                <span ng-if="!canAccessGroup(zone.adminGroupId)" ng-bind="zone.adminGroupName" style="line-height: 0"></span>
                                            </td>
                                            <td ng-bind="zone.status"></td>
                                            @if(meta.sharedDisplayEnabled) {
                                            <td>{{zone.shared ? "Shared" : "Private"}}</td>
                                            }
                                            <td>
                                                <div class="table-form-group">
                                                    <a ng-if="canAccessZone(zone.accessLevel)" type="button" class="btn btn-info btn-rounded"
                                                       ng-href="/zones/{{ zone.id }}">
                                                        View
                                                    </a>
                                                </div>
                                            </td>
                                        </tr>
                                        </tbody>
                                    </table>

                                    <!-- PAGINATION -->
                                    <div class="dataTables_paginate vinyldns_paginate paginate_left">
                                        <span class="vinyldns_page_number">{{ getZonesPageNumber("allZones") }}</span>
                                        <ul class="pagination">
                                            <li class="paginate_button previous">
                                                <a ng-if="prevPageEnabled('allZones')" ng-click="prevPageAllZones()">Previous</a>
                                            </li>
                                            <li class="paginate_button next">
                                                <a ng-if="nextPageEnabled('allZones')" ng-click="nextPageAllZones()">Next</a>
                                            </li>
                                        </ul>
                                    </div>
                                    <!-- END PAGINATION -->

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

                        </div>
                    </div>
                </div>
                <div class="tab-pane" id="deletedZones">
                    <div class="row">
                        <div class="col-md-12">
                            <!-- SIMPLE DATATABLE -->
                            <div class="panel panel-default">
                                <div class="panel-heading">
                                    <button  id="deleted-zone-refresh-button"  class="btn btn-default" ng-click="refreshZones()">
                                        <span class="fa fa-refresh"></span> Refresh
                                    </button>

                                    <!-- SEARCH BOX -->
                                    <div class="pull-right">
                                        <form class="input-group" ng-submit="refreshZones()">
                                            <div class="input-group">
                                                <span class="input-group-btn" >
                                                    <button id="my-deleted-zones-search-button" type="submit" class="btn btn-primary btn-left-round">
                                                        <span class="fa fa-search"></span>
                                                    </button>
                                                </span>
                                                <input id="deleted-zones-search-text" ng-model="query" type="text" class="form-control"  placeholder="Deleted Zone Name"/>
                                            </div>
                                        </form>
                                    </div>
                                </div>
                                <!-- END SEARCH BOX -->

                                <!-- DELETED ZONES TABS -->
                                <div class="panel-default panel-tabs">
                                        <span class="container-fluid" >
                                           <!-- MY DELETED ZONE PAGINATION -->
                                            <div class="dataTables_paginate vinyldns_paginate" ng-show="tab == 'myDeletedZones'" >
                                                <span class="vinyldns_page_number">{{ getZonesPageNumber("myDeletedZones") }}</span>
                                                <ul class="pagination">
                                                    <li class="vinyldns_paginate_button previous">
                                                        <a ng-if="prevPageEnabled('myDeletedZones')" ng-click="prevPageMyDeletedZones()">Previous</a>
                                                    </li>
                                                    <li class="vinyldns_paginate_button next">
                                                        <a ng-if="nextPageEnabled('myDeletedZones')" ng-click="nextPageMyDeletedZones()">Next</a>
                                                    </li>
                                                </ul>
                                            </div>
                                            <!-- MY DELETED ZONE END PAGINATION -->
                                            <!-- ALL DELETED ZONE PAGINATION -->
                                            <div class="dataTables_paginate vinyldns_paginate"  ng-show="tab == 'allDeletedZones'" >
                                                <span class="vinyldns_page_number">{{ getZonesPageNumber("allDeletedZones") }}</span>
                                                <ul class="pagination ">
                                                    <li class="vinyldns_paginate_button previous">
                                                        <a ng-if="prevPageEnabled('allDeletedZones')" ng-click="prevPageAllDeletedZones()">Previous</a>
                                                    </li>
                                                    <li class="vinyldns_paginate_button next">
                                                        <a ng-if="nextPageEnabled('allDeletedZones')" ng-click="nextPageAllDeletedZones()">Next</a>
                                                    </li>
                                                </ul>
                                            </div>
                                            <!--ALL DELETED ZONE END PAGINATION -->
                                            <ul class="nav nav-tabs bar_tabs" ng-init = "tab='myDeletedZones'">
                                                <li class = "active"><a ng-class="{active: tab == 'myDeletedZones'}" id = "myDeletedZone" href="#myDeletedZones" data-toggle="tab" ng-click="tab = 'myDeletedZones'; myZonesAccess()" >My Zones</a></li>
                                                <li><a ng-class="{active: tab == 'allDeletedZones'}" href="#allDeletedZones" data-toggle="tab"  ng-click="tab = 'allDeletedZones'; allZonesAccess()" >All Zones</a></li>
                                            </ul>
                                            <div class="tab-content">
                                                <div class="tab-pane active" id="myDeletedZones">
                                                    <div id="my-deleted-zone-list-table" class="panel-body">
                                                        <p ng-if="!myDeletedZonesLoaded">Loading my deleted zones...</p>
                                                        <p ng-if="myDeletedZonesLoaded && !myDeletedZones.length">No zones match the search criteria.</p>
                                                        <table class="table" ng-if="myDeletedZones.length">
                                                            <thead>
                                                            <tr>
                                                                <th>Name</th>
                                                                <th>Email</th>
                                                                <th>Admin Group</th>
                                                                <th>Created</th>
                                                                <th>Abandoned</th>
                                                                <th>Status</th>
                                                                <th>Abandoned By</th>
                                                                @if(meta.sharedDisplayEnabled) {
                                                                <th>Access</th>
                                                                }
                                                            </tr>
                                                            </thead>
                                                            <tbody>
                                                            <tr ng-repeat="deletedZone in myDeletedZones">
                                                                <td class="wrap-long-text" ng-bind="deletedZone.zoneChange.zone.name">
                                                                </td>
                                                                <td class="wrap-long-text" ng-bind="deletedZone.zoneChange.zone.email">
                                                                </td>
                                                                <td>
                                                                    <a ng-if="canAccessGroup(deletedZone.zoneChange.zone.adminGroupId)" ng-bind="deletedZone.adminGroupName"
                                                                       href="/groups/{{deletedZone.zoneChange.zone.adminGroupId}}"></a>
                                                                    <span ng-if="!canAccessGroup(deletedZone.zoneChange.zone.adminGroupId)" ng-bind="deletedZone.adminGroupName"
                                                                          style="line-height: 0"></span>
                                                                </td>
                                                                <td>
                                                                    {{deletedZone.zoneChange.zone.created}}
                                                                </td>
                                                                <td>
                                                                    {{deletedZone.zoneChange.zone.updated}}
                                                                </td>
                                                                <td ng-bind="deletedZone.zoneChange.zone.status"></td>
                                                                <td>
                                                                    {{deletedZone.userName}}
                                                                </td>
                                                                @if(meta.sharedDisplayEnabled) {
                                                                <td>{{deletedZone.zoneChange.zone.shared ? "Shared" : "Private"}}</td>
                                                                }
                                                            </tr>
                                                            </tbody>
                                                        </table>

                                                        <!-- PAGINATION -->
                                                        <div class="dataTables_paginate vinyldns_paginate">
                                                            <span class="vinyldns_page_number">{{ getZonesPageNumber("myDeletedZones") }}</span>
                                                            <ul class="pagination">
                                                                <li class="paginate_button previous">
                                                                    <a ng-if="prevPageEnabled('myDeletedZones')" ng-click="prevPageMyDeletedZones()">Previous</a>
                                                                </li>
                                                                <li class="paginate_button next">
                                                                    <a ng-if="nextPageEnabled('myDeletedZones')" ng-click="nextPageMyDeletedZones()">Next</a>
                                                                </li>
                                                            </ul>
                                                        </div>
                                                        <!-- END PAGINATION -->
                                                    </div>
                                                </div>
                                                <div class="tab-pane" id="allDeletedZones">
                                                    <div id="all-deleted-zone-list-table" class="panel-body">
                                                        <p ng-if="!allDeletedZonesLoaded">Loading all deleted zones...</p>
                                                        <p ng-if="allDeletedZonesLoaded && !allDeletedZones.length">No zones match the search criteria.</p>
                                                        <table class="table" ng-if="allDeletedZones.length">
                                                            <thead>
                                                            <tr>
                                                                <th>Name</th>
                                                                <th>Email</th>
                                                                <th>Admin Group</th>
                                                                <th>Created</th>
                                                                <th>Abandoned</th>
                                                                <th>Status</th>
                                                                <th>Abandoned By</th>
                                                                @if(meta.sharedDisplayEnabled) {
                                                                <th>Access</th>
                                                                }
                                                            </tr>
                                                            </thead>
                                                            <tbody>
                                                            <tr ng-repeat="deletedZone in allDeletedZones">
                                                                <td class="wrap-long-text" ng-bind="deletedZone.zoneChange.zone.name">
                                                                </td>
                                                                <td class="wrap-long-text" ng-bind="deletedZone.zoneChange.zone.email">
                                                                </td>
                                                                <td>
                                                                    <a ng-if="canAccessGroup(deletedZone.zoneChange.zone.adminGroupId)" ng-bind="deletedZone.adminGroupName"
                                                                       href="/groups/{{deletedZone.zoneChange.zone.adminGroupId}}"></a>
                                                                    <span ng-if="!canAccessGroup(deletedZone.zoneChange.zone.adminGroupId)" ng-bind="deletedZone.adminGroupName"
                                                                          style="line-height: 0"></span>
                                                                </td>
                                                                <td>
                                                                    {{deletedZone.zoneChange.zone.created}}
                                                                </td>
                                                                <td>
                                                                    {{deletedZone.zoneChange.zone.updated}}
                                                                </td>
                                                                <td ng-bind="deletedZone.zoneChange.zone.status"></td>
                                                                <td>
                                                                    {{deletedZone.userName}}
                                                                </td>
                                                                @if(meta.sharedDisplayEnabled) {
                                                                <td>{{deletedZone.zoneChange.zone.shared ? "Shared" : "Private"}}</td>
                                                                }
                                                            </tr>
                                                            </tbody>
                                                        </table>

                                                        <!-- PAGINATION -->
                                                        <div class="dataTables_paginate vinyldns_paginate">
                                                            <span class="vinyldns_page_number">{{ getZonesPageNumber("allDeletedZones") }}</span>
                                                            <ul class="pagination">
                                                                <li class="paginate_button previous">
                                                                    <a ng-if="prevPageEnabled('allDeletedZones')" ng-click="prevPageAllDeletedZones()">Previous</a>
                                                                </li>
                                                                <li class="paginate_button next">
                                                                    <a ng-if="nextPageEnabled('allDeletedZones')" ng-click="nextPageAllDeletedZones()">Next</a>
                                                                </li>
                                                            </ul>
                                                        </div>
                                                        <!-- END PAGINATION -->
                                                    </div>
                                                </div>
                                            </div>
                                        </span>
                                </div>
                                <!-- END DELETED ZONES TABS -->
                                <div class="panel-footer"></div>
                            </div>
                            <!-- END SIMPLE DATATABLE -->
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- END VERTICAL TABS -->
    </div>
    <!-- END PAGE CONTENT WRAPPER -->
</div>
<!-- END PAGE CONTENT -->

<zoneconnection></zoneconnection>
}

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

@main(rootAccountName)("ZonesController")("Zones")(content)(plugins)
