<div ng-controller="Umbraco.Editors.Users.GroupsController as vm" class="clearfix">

    <umb-load-indicator ng-if="vm.loading"></umb-load-indicator>

    <umb-editor-sub-header>
            
        <!-- No selection -->
        <umb-editor-sub-header-content-left ng-if="vm.selection.length === 0">
            <umb-button
                type="button"
                button-style="success"
                action="vm.createUserGroup()"
                label="Create Group"
                label-key="actions_createGroup">
            </umb-button>
        </umb-editor-sub-header-content-left>

        <umb-editor-sub-header-content-right ng-if="vm.selection.length === 0">

            <umb-editor-sub-header-section>
            <div class="form-search -no-margin-bottom pull-right">
                <div class="inner-addon left-addon">
                    <i class="icon icon-search"></i>
                    <input class="form-control search-input"
                        type="text"
                        localize="placeholder"
                        placeholder="@placeholders_filter"
                        ng-model="vm.filter"
                        prevent-enter-submit
                        no-dirty-check>
                </div>
            </div>
            </umb-editor-sub-header-section>

        </umb-editor-sub-header-content-right>

        <!-- With selection -->
        <umb-editor-sub-header-content-left ng-if="vm.selection.length > 0">
            <umb-editor-sub-header-section>
                <umb-button
                    type="button"
                    label-key="buttons_clearSelection"
                    action="vm.clearSelection()"
                    size="xs">
                </umb-button>
            </umb-editor-sub-header-section>
            <umb-editor-sub-header-section>
                <strong>{{ vm.selection.length }} <localize key="general_of">of</localize> {{ vm.userGroups.length }} <localize key="general_selected">selected</localize></strong>
            </umb-editor-sub-header-section>
        </umb-editor-sub-header-content-left>

        <umb-editor-sub-header-content-right ng-if="vm.selection.length > 0">
            <umb-button
                type="button"
                label="Delete"
                icon="icon-trash"
                action="vm.deleteUserGroups()"
                size="xs">
            </umb-button>
        </umb-editor-sub-header-content-right>

    </umb-editor-sub-header>

    <div style="margin-bottom: 20px;" class="flex items-center">
        <div style="font-size: 16px;">
            <span class="bold"><localize key="general_groups">Groups</localize> </span> <span>({{vm.userGroups.length}})</span> 
        </div>
    </div>

    <div class="umb-list" ng-if="!vm.loading" ng-switch="">
        <div ng-repeat="group in vm.userGroups | filter:vm.filter" ng-switch="group.hasAccess">
            <div class="umb-list-item umb-list-item--disabled" ng-switch-when="false">
                <div style="margin-right: 25px;">
                    <div class="umb-list-checkbox"></div>
                </div>
                <umb-user-group-preview style="border-bottom: none; margin-bottom: 0; padding: 0;"
                                        icon="group.group.icon"
                                        name="group.group.name"
                                        sections="group.group.sections"
                                        content-start-node="group.group.contentStartNode"
                                        media-start-node="group.group.mediaStartNode">
                </umb-user-group-preview>
            </div>
            <a class="umb-list-item" ng-click="vm.clickUserGroup(group)" ng-class="{'umb-list-item--selected': group.selected}" href="" ng-switch-when="true">
                <div style="margin-right: 25px;">
                    <div class="umb-list-checkbox"
                         ng-hide="group.group.alias === 'admin' || group.group.alias === 'translator'"
                         ng-class="{'umb-list-checkbox--visible': vm.selection.length > 0}"
                         ng-click="vm.selectUserGroup(group, vm.selection, $event)" >
                        <umb-checkmark checked="group.selected"></umb-checkmark>
                    </div>
                </div>
                <umb-user-group-preview
                    style="border-bottom: none; margin-bottom: 0; padding: 0;"
                    icon="group.group.icon"
                    name="group.group.name"
                    sections="group.group.sections"
                    content-start-node="group.group.contentStartNode"
                    media-start-node="group.group.mediaStartNode">
                </umb-user-group-preview>
            </a>
        </div>
    </div>

</div>