<div class="content-page">
<!--
  Licensed to the Apache Software Foundation (ASF) under one or more
  contributor license agreements.  See the NOTICE file distributed with
  this work for additional information regarding copyright ownership.
  The ASF licenses this file to You under the Apache License, Version 2.0
  (the "License"); you may not use this file except in compliance with
  the License.  You may obtain a copy of the License at
  
  http://www.apache.org/licenses/LICENSE-2.0
  
  Unless required by applicable law or agreed to in writing, software
  distributed under the License is distributed on an "AS IS" BASIS,
  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  See the License for the specific language governing permissions and
  limitations under the License.
-->
  <div id="intro-page">
    <page-title title=" Groups" icon="&#128101;"></page-title>

  </div>
  <bsmodal id="newGroup" title="New Group" close="hideModal"
    closelabel="Cancel" extrabutton="newGroupDialog"
    extrabuttonlabel="Add" ng-model="dialog" ng-cloak>
  <fieldset>
    <div class="control-group">
      <label for="title">Title</label>
      <div class="controls">
        <input type="text" id="title" ng-pattern="titleRegex"
          ng-attr-title="{{titleRegexDescription}}" required
          ng-model="newGroup.title" class="input-xlarge" ug-validate />
        <a class="help_tooltip"
          ng-mouseover="help.sendTooltipGA('group title box')"
          ng-show="help.helpTooltipsEnabled" href="#"
          ng-attr-tooltip="{{tooltip_details_title}}"
          tooltip-placement="right">(?)</a>
      </div>
    </div>
    <div class="control-group">
      <label for="path">Path</label>
      <div class="controls">
        <input id="path" type="text"
          ng-attr-title="{{pathRegexDescription}}"
          placeholder="ex: /mydata" ng-pattern="pathRegex" required
          ng-model="newGroup.path" class="input-xlarge" ug-validate /> <a
          class="help_tooltip"
          ng-mouseover="help.sendTooltipGA('group path box')"
          ng-show="help.helpTooltipsEnabled" href="#"
          ng-attr-tooltip="{{tooltip_details_path}}"
          tooltip-placement="right">(?)</a>
      </div>
    </div>
  </fieldset>
  </bsmodal>

  <bsmodal id="deleteGroup" title="Delete Group" close="hideModal"
    closelabel="Cancel" extrabutton="deleteGroupsDialog"
    extrabuttonlabel="Delete" ng-cloak>
  <p>Are you sure you want to delete the group(s)?</p>
  </bsmodal>


  <section class="row-fluid">
    <div id="intro-list" class="span3 user-col">
      <div class="button-toolbar span12">
        <a title="Select All" class="btn btn-primary select-all toolbar"
          ng-show="hasGroups"
          ng-click="selectAllEntities(groupsCollection._list,this,'groupBoxesSelected',true)">
          <i class="pictogram">&#8863;</i>
        </a>
        <button title="Delete" class="btn btn-primary toolbar"
          ng-disabled="!hasGroups || !valueSelected(groupsCollection._list)"
          ng-click="showModal('deleteGroup')">
          <i class="pictogram">&#9749;</i>
        </button>
        <button title="Add" class="btn btn-primary toolbar"
          ng-click="showModal('newGroup')">
          <i class="pictogram">&#57347;</i>
        </button>
        <a class="help_tooltip"
          ng-mouseover="help.sendTooltipGA('users list')"
          ng-show="help.helpTooltipsEnabled" href="#"
          ng-attr-tooltip="{{tooltip_groups_add_remove_buttons}}"
          tooltip-placement="right">(?)</a>
      </div>
      <ul class="user-list">
        <li
          ng-class="selectedGroup._data.uuid === group._data.uuid ? 'selected' : ''"
          ng-repeat="group in groupsCollection._list"
          ng-click="selectGroup(group._data.uuid)"><input
          type="checkbox" ng-value="group._data.uuid"
          ng-checked="group.checked" ng-model="group.checked">
          <a href="javaScript:void(0)">{{group.get('title')}}</a> <br />
          <span ng-if="group.get('path')" class="label">Path:</span>/{{group.get('path')}}
        </li>
      </ul>


      <div style="padding: 10px 5px 10px 5px">
        <button class="btn btn-primary" ng-click="getPrevious()"
          style="display: {{previous_display">< Previous</button>
        <button class="btn btn-primary" ng-click="getNext()"
          style="display: {{next_display">Next ></button>
      </div>
    </div>

    <div id="{{help.showTabsId}}" class="span9 tab-content"
      ng-show="selectedGroup.get">
      <div class="menu-toolbar">
        <ul class="inline">
          <li class="tab"
            ng-class="currentGroupsPage.route === '/groups/details' ? 'selected' : ''"><div
              class="btn btn-primary toolbar">
              <a class="btn-content"
                ng-click="selectGroupPage('/groups/details')"><i
                class="pictogram">&#59170;</i>Details</a> <a
                class="help_tooltip"
                ng-mouseover="help.sendTooltipGA('groups details tab')"
                ng-show="help.helpTooltipsEnabled" href="#"
                ng-attr-tooltip="{{tooltip_groups_details_tab}}"
                tooltip-placement="right">(?)</a>
            </div></li>
          <li class="tab"
            ng-class="currentGroupsPage.route === '/groups/members' ? 'selected' : ''"><div
              class="btn btn-primary toolbar">
              <a class="btn-content"
                ng-click="selectGroupPage('/groups/members')"><i
                class="pictogram">&#128101;</i>Users</a> <a
                class="help_tooltip"
                ng-mouseover="help.sendTooltipGA('groups users tab')"
                ng-show="help.helpTooltipsEnabled" href="#"
                ng-attr-tooltip="{{tooltip_groups_users_tab}}"
                tooltip-placement="right">(?)</a>
            </div></li>
          <li class="tab"
            ng-class="currentGroupsPage.route === '/groups/activities' ? 'selected' : ''"><div
              class="btn btn-primary toolbar">
              <a class="btn-content"
                ng-click="selectGroupPage('/groups/activities')"><i
                class="pictogram">&#59194;</i>Activities</a> <a
                class="help_tooltip"
                ng-mouseover="help.sendTooltipGA('groups activities tab')"
                ng-show="help.helpTooltipsEnabled" href="#"
                ng-attr-tooltip="{{tooltip_groups_activities_tab}}"
                tooltip-placement="right">(?)</a>
            </div></li>
          <li class="tab"
            ng-class="currentGroupsPage.route === '/groups/roles' ? 'selected' : ''"><div
              class="btn btn-primary toolbar">
              <a class="btn-content"
                ng-click="selectGroupPage('/groups/roles')"><i
                class="pictogram">&#127758;</i>Roles &amp; Permissions</a> <a
                class="help_tooltip"
                ng-mouseover="help.sendTooltipGA('groups role tab')"
                ng-show="help.helpTooltipsEnabled" href="#"
                ng-attr-tooltip="{{tooltip_groups_roles_tab}}"
                tooltip-placement="right">(?)</a>
            </div></li>
        </ul>
      </div>
      <span ng-include="currentGroupsPage.template"></span>
  </section>
</div>