<div class="m-t-lg m-b">
  <button type="button" class="btn btn-warning" ng-click="addGroup()">
    <i class="fa fa-plus m-r"></i>
    <span translate>{{ 'app.admin.members.group_form.add_a_group' }}</span>
  </button>
  <div class="form-group pull-right">
    <div class="input-group">
      <span class="input-group-addon"><i class="fa fa-filter"></i></span>
      <select ng-model="groupFiltering" class="form-control">
        <option ng-repeat="status in filterDisabled" value="{{status}}" translate>{{ 'app.admin.members.group_form.status_'+status }}</option>
      </select>
    </div>
  </div>
</div>

<table class="table">
    <thead>
    <tr>
        <th style="width: 75%;" translate>{{ 'app.admin.members.group_form.group_name' }}</th>
        <th style="width: 25%"></th>
    </tr>
    </thead>
    <tbody>
    <tr ng-repeat="group in groups | filterDisabled:groupFiltering" ng-class="{'disabled-line' : group.disabled && groupFiltering === 'all'}">
        <td>
            <span editable-text="group.name" e-cols="200" e-name="name" e-form="rowform" e-required>
                {{group.name}}
            </span>
        </td>
        <td>
            <!-- form -->
            <form editable-form name="rowform" onbeforesave="saveGroup($data, group.id)" ng-show="rowform.$visible" class="form-buttons form-inline" shown="inserted == group">
                <button type="submit" ng-disabled="rowform.$waiting" class="btn btn-warning">
                    <i class="fa fa-check"></i>
                </button>
                <button type="button" ng-disabled="rowform.$waiting" ng-click="cancelGroup(rowform, $index)" class="btn btn-default">
                    <i class="fa fa-times"></i>
                </button>
            </form>
            <div class="buttons" ng-hide="rowform.$visible || group.slug === 'admins'">
                <button class="btn btn-default" ng-click="rowform.$show()">
                    <i class="fa fa-edit"></i> <span class="hidden-xs hidden-sm" translate>{{ 'app.shared.buttons.edit' }}</span>
                </button>
                <button class="btn btn-default" ng-click="toggleDisableGroup($index)">
                    <span ng-hide="group.disabled"><i class="fa fa-eye-slash"></i> <span translate>{{ 'app.admin.members.group_form.disable' }}</span></span>
                    <span ng-show="group.disabled"><i class="fa fa-eye"></i> <span translate>{{ 'app.admin.members.group_form.enable' }}</span></span>
                </button>
                <button class="btn btn-danger" ng-click="removeGroup($index)">
                    <i class="fa fa-trash-o"></i>
                </button>
            </div>
        </td>
    </tr>
    </tbody>
</table>