@(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">Groups</li>
    </ul>
    <!-- END BREADCRUMB -->

    <!-- PAGE TITLE -->
    <div class="page-title"><h3><span class="fa fa-group"></span> Groups</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="#myGroups" data-toggle="tab">My Groups</a></li>
                <li><a id="tab2-button" href="#allGroups" data-toggle="tab">All Groups</a></li>
            </ul>

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

                            <!-- SIMPLE DATATABLE -->
                            <div class="panel panel-default">
                                <div class="panel-heading">
                                    <div class="btn-group">
                                        <button id="open-group-modal-button" class="btn btn-default" ng-click="openModal($event);">
                                            <span class="fa fa-plus"></span> New Group
                                        </button>
                                        <button id="refresh-group-button" class="btn btn-default" ng-click="refresh();">
                                            <span class="fa fa-refresh"></span> Refresh
                                        </button>
                                    </div>

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

                                </div>
                                <div id="group-list" class="panel-body">
                                    <p ng-if="!groupsLoaded">Loading groups...</p>
                                    <p ng-if="haveNoGroups(groups.items.length)">You don't have any groups yet.</p>
                                    <p ng-if="$scope.groupsLoaded && searchCriteria(groups.items.length)">No groups match the search criteria.</p>

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

                                    <table class="table datatable_simple" ng-if="groups.items.length">
                                        <thead>
                                        <tr>
                                            <th>Group Name</th>
                                            <th>Email</th>
                                            <th>Description</th>
                                            <th>Actions</th>
                                        </tr>
                                        </thead>
                                        <tbody>
                                        <tr ng-repeat="group in groups.items | orderBy:'+name'">
                                            <td class="wrap-long-text">
                                                <a ng-href="/groups/{{group.id}}">{{group.name}}</a>
                                            </td>
                                            <td class="wrap-long-text">{{group.email}}</td>
                                            <td class="wrap-long-text">{{group.description}}</td>
                                            <td>
                                                <div class="table-form-group">
                                                    <a class="btn btn-info btn-rounded" ng-href="/groups/{{group.id}}">
                                                        View</a>
                                                    <a ng-if="groupAdmin(group)" class="btn btn-warning btn-rounded" ng-click="editGroup(group);">
                                                        Edit</a>
                                                    <button ng-if="groupAdmin(group)" id="delete-group-{{group.name}}" class="btn btn-danger btn-rounded" ng-click="confirmDeleteGroup(group);">
                                                        Delete</button>
                                                </div>
                                            </td>
                                        </tr>
                                        </tbody>
                                    </table>
                                    <!-- PAGINATION -->
                                    <div class="dataTables_paginate vinyldns_paginate">
                                        <span class="vinyldns_page_number">{{ getGroupsPageNumber("myGroups") }}</span>
                                        <ul class="pagination">
                                            <li class="paginate_button previous">
                                                <a ng-if="prevPageEnabled('myGroups')" ng-click="prevPageMyGroups()">Previous</a>
                                            </li>
                                            <li class="paginate_button next">
                                                <a ng-if="nextPageEnabled('myGroups')" ng-click="nextPageMyGroups()">Next</a>
                                            </li>
                                        </ul>
                                    </div>
                                    <!-- END PAGINATION -->
                                </div>
                            </div>
                            <!-- END SIMPLE DATATABLE -->

                        </div>
                    </div>
                </div>
                <div class="tab-pane" id="allGroups">
                    <div class="row">
                        <div class="col-md-12">

                            <!-- SIMPLE DATATABLE -->
                            <div class="panel panel-default">
                                <div class="panel-heading">
                                    <div class="btn-group">
                                        <button id="open-group-modal-button" class="btn btn-default" ng-click="openModal($event);">
                                            <span class="fa fa-plus"></span> New Group
                                        </button>
                                        <button id="refresh-group-button" class="btn btn-default" ng-click="refresh();">
                                            <span class="fa fa-refresh"></span> Refresh
                                        </button>
                                    </div>

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

                                </div>
                                <div id="group-list" class="panel-body">
                                    <p ng-if="!allGroupsLoaded">Loading groups...</p>
                                    <p ng-if="$scope.allGroupsLoaded && searchCriteria(allGroups.items.length)">No groups match the search criteria.</p>

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

                                    <table class="table datatable_simple" ng-if="allGroup.items.length">
                                        <thead>
                                        <tr>
                                            <th>Group Name</th>
                                            <th>Email</th>
                                            <th>Description</th>
                                            <th>Actions</th>
                                        </tr>
                                        </thead>
                                        <tbody>
                                        <tr ng-repeat="group in allGroup.items | orderBy:'+name'">
                                            <td class="wrap-long-text">
                                                <a ng-href="/groups/{{group.id}}">{{group.name}}</a>
                                            </td>
                                            <td class="wrap-long-text">{{group.email}}</td>
                                            <td class="wrap-long-text">{{group.description}}</td>
                                            <td>
                                                <div class="table-form-group">
                                                    <a class="btn btn-info btn-rounded" ng-href="/groups/{{group.id}}">
                                                        View</a>
                                                    <a ng-if="groupAdmin(group)" class="btn btn-warning btn-rounded" ng-click="editGroup(group);">
                                                        Edit</a>
                                                    <button ng-if="groupAdmin(group)" id="delete-group-{{group.name}}" class="btn btn-danger btn-rounded" ng-click="confirmDeleteGroup(group);">
                                                        Delete</button>
                                                </div>
                                            </td>
                                        </tr>
                                        </tbody>
                                    </table>
                                    <!-- PAGINATION -->
                                    <div class="dataTables_paginate vinyldns_paginate">
                                        <span class="vinyldns_page_number">{{ getGroupsPageNumber("allGroups") }}</span>
                                        <ul class="pagination">
                                            <li class="paginate_button previous">
                                                <a ng-if="prevPageEnabled('allGroups')" ng-click="prevPageAllGroups()">Previous</a>
                                            </li>
                                            <li class="paginate_button next">
                                                <a ng-if="nextPageEnabled('allGroups')" ng-click="nextPageAllGroups()">Next</a>
                                            </li>
                                        </ul>
                                    </div>
                                    <!-- END PAGINATION -->
                                </div>
                            </div>
                            <!-- END SIMPLE DATATABLE -->

                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- END VERTICAL TABS -->

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

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

<!-- CREATE GROUP MODAL -->
<div class="modal" id="modal_new_group" tabindex="-1" role="dialog" aria-labelledby="largeModalHead" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <form class="form-horizontal" name="createGroupForm" ng-submit="createGroupForm.$valid &&
        createGroup(currentGroup.name, currentGroup.email, currentGroup.description);"
              novalidate>
            <div class="modal-content" id="group-form">
                <div class="modal-header">
                    <button type="button" class="close" ng-click="closeModal($evt);"><span aria-hidden="true">&times;</span><span class="sr-only">
                      Close</span></button>
                    <h4 class="modal-title" id="largeModalHead">Create a Group</h4>
                </div>
                <div class="modal-body">
                    <div class="panel-header">
                        <p>
                            Groups simplify setup and access to resources in Vinyl.  A Group consists of one or more members,
                            who are registered users of Vinyl.  Any member in the group can be designated as a Group Admin, which
                            allows that member full administrative access to the group, including deleting the group.
                        </p>
                    </div>
                    <div class="panel-body">
                        <modal-element label="Name" invalid-when="createGroupForm.$submitted && createGroupForm.name.$invalid">
                            <input id="group-name"
                                   name="name"
                                   class="form-control"
                                   ng-model="currentGroup.name"
                                   type="text"
                                   required>
                            </input>
                            <span class="help-block">
                                This should be a single word name used for the groups.  Use hyphens if needed, no spaces.
                            </span>
                        </modal-element>
                        <modal-element label="Email" invalid-when="createGroupForm.$submitted && createGroupForm.email.$invalid">
                            <input id="group-email"
                                   name="email"
                                   class="form-control"
                                   ng-model="currentGroup.email"
                                   type="text"
                                   required>
                            </input>
                          <div>
                            <div>
                                <h5>
                                    <a data-toggle="collapse" data-target="#collapseNewGroupInstruction" aria-expanded="false"
                                       aria-controls="collapseInstruction">
                                        <span class="badge" id="validDomainsNewGroup"ng-show="validEmailDomains && validEmailDomains.length>0">Valid Domains for Email <span class="fa fa-chevron-down"></span></span>
                                    </a>
                                </h5>
                            </div>
                            <div class="collapse" id="collapseNewGroupInstruction">
                                <div class="well">
                                    <p>
                                        List Of Valid Email Domains:
                                    <li ng-repeat="validDomains in validEmailDomains">
                                         {{validDomains}}
                                    </li>
                                    </p>
                                    <hr/>
                                </div>
                            </div>
                          </div>
                            <span class="help-block">The email distribution list for the group.</span>
                        </modal-element>
                        <modal-element label="Description">
                            <input id="group-description"
                                   name="description"
                                   class="form-control"
                                   ng-model="currentGroup.description"
                                   type="text">
                            </input>
                            <span class="help-block">
                              A short description of the group, if more info is needed other than the name.
                            </span>
                        </modal-element>
                    </div>
                </div>
                <div class="modal-footer">
                    <button id="clear-group-button" type="button" class="btn btn-default pull-left" ng-click="reset()">Clear Form</button>
                    <button id="create-group-button" class="btn btn-primary pull-right">Create</button>
                    <button type="button" class="btn btn-default" ng-click="closeModal($evt);">Close</button>
                </div>
            </div>
        </form>
    </div>
</div>
<!-- END CREATE GROUP MODAL -->

<!-- EDIT GROUP MODAL -->
<div class="modal" id="modal_edit_group" tabindex="-1" role="dialog" aria-labelledby="largeModalHead" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <form class="form-horizontal" name="submitEditGroupForm" ng-submit="submitEditGroupForm.$valid &&
        submitEditGroup(currentGroup.name, currentGroup.email, currentGroup.description);"
              novalidate>
            <div class="modal-content" id="edit-group-form">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" ng-click="closeEditModal()"><span aria-hidden="true">&times;</span><span class="sr-only">
                      Close</span></button>
                    <h4 class="modal-title" id="largeModalHead">Edit Group Details</h4>
                </div>
                <div class="modal-body">
                    <div class="panel-body">
                        <modal-element label="Name" invalid-when="submitEditGroupForm.$submitted && submitEditGroupForm.name.$invalid">
                            <input id="edit-group-name"
                                   name="name"
                                   class="form-control"
                                   ng-model="currentGroup.name"
                                   ng-change="checkForChanges()"
                                   type="text"
                                   required>
                            </input>
                            <span class="help-block">
                                This should be a single word name used for the groups.  Use hyphens if needed, no spaces.
                            </span>
                        </modal-element>
                        <modal-element label="Email" invalid-when="submitEditGroupForm.$submitted && submitEditGroupForm.email.$invalid">
                            <input id="edit-group-email"
                                   name="email"
                                   class="form-control"
                                   ng-model="currentGroup.email"
                                   ng-change="checkForChanges()"
                                   type="text"
                                   required>
                            </input>
                            <div>
                                <h5>
                                    <a data-toggle="collapse" data-target="#collapseEditGroupInstruction" aria-expanded="false" aria-controls="collapseInstruction">
                                        <span class="badge" id="validDomainsEditGroup" ng-show="validEmailDomains && validEmailDomains.length>0">Valid Domains for Email <span class="fa fa-chevron-down"></span></span>
                                    </a>
                                </h5>
                            </div>
                            <div class="collapse" id="collapseEditGroupInstruction">
                                <div class="well">
                                    <p>
                                        List Of Valid Email Domains:
                                    <li ng-repeat="validDomains in validEmailDomains">
                                        {{validDomains}}
                                    </li>
                                    </p>
                                    <hr/>
                                </div>
                            </div>
                            <span class="help-block">The email distribution list for the group.</span>
                        </modal-element>
                        <modal-element label="Description">
                            <input id="edit-group-description"
                                   name="description"
                                   class="form-control"
                                   ng-model="currentGroup.description"
                                   ng-change="checkForChanges()"
                                   type="text">
                            </input>
                            <span class="help-block">
                              A short description of the group, if more info is needed other than the name.
                            </span>
                        </modal-element>
                    </div>
                </div>
                <div class="modal-footer">
                    <button id="edit-group-button" class="btn btn-primary pull-right" ng-disabled="submitEditGroupForm.$invalid || !hasChanges">Update</button>
                    <button type="button" class="btn btn-default" data-dismiss="modal" ng-click="closeEditModal()">Close</button>
                </div>
            </div>
        </form>
    </div>
</div>
<!-- END EDIT GROUP MODAL -->

<!-- DELETE GROUP MODAL -->
<form name="deleteGroupForm" ng-submit="deleteGroup()" role="form" class="form-horizontal" novalidate>
    <modal modal-id="delete_group_modal" modal-title="Delete a Group">
        <modal-body>
            <modal-element label="Group Name">
                <div class="form-control-static">
                    <span ng-bind="currentGroup.name" name="nameval" />
                </div>
            </modal-element>
            <modal-element label="Email">
                <div class="form-control-static">
                    <span ng-bind="currentGroup.email" name="emailval" />
                </div>
            </modal-element>
            <modal-element label="Description">
                <div class="form-control-static">
                    <span ng-bind="currentGroup.description" name="emailval" />
                </div>
            </modal-element>
        </modal-body>
        <modal-footer>
            <span>
                <span class="text-danger">Are you sure you want to delete this group?&nbsp;</span>
                <button id="delete-group-confirm" class="btn btn-danger pull-right noty_message" ng-click="submitDeleteGroup()">Yes</button>
                <button type="button" class="btn btn-default" data-dismiss="modal" ng-click="cancel()">No</button>
            </span>
        </modal-footer>
    </modal>
</form>
<!-- END DELETE GROUP MODAL -->
}

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

@main(rootAccountName)("GroupsController")("Groups")(content)(plugins)
