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

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

    <form name="editUserForm" novalidate val-form-manager>

        <umb-editor-view ng-if="!vm.loading">

            <umb-editor-header name="vm.userGroup.name"
                               alias="vm.userGroup.alias"
                               alias-locked="vm.userGroup.isSystemUserGroup"
                               icon="vm.userGroup.icon"
                               hide-description="true"
                               on-back="vm.goToPage(vm.breadcrumbs[0])"
                               show-back-button="vm.showBackButton">
            </umb-editor-header>

            <umb-editor-container>

                <div class="umb-packages-view-wrapper" style="padding: 0;">

                    <div class="umb-package-details">

                        <div class="umb-package-details__main-content">

                            <umb-box>

                                <umb-box-header title-key="user_assignAccess"></umb-box-header>

                                <umb-box-content class="block-form">

                                    <umb-control-group style="margin-bottom: 20px;" label="@main_sections" description="@user_sectionsHelp">
                                        <umb-node-preview style="max-width: 100%;"
                                                          ng-repeat="section in vm.userGroup.sections"
                                                          icon="section.icon"
                                                          name="section.name"
                                                          allow-remove="true"
                                                          on-remove="vm.removeSection($index)">
                                        </umb-node-preview>

                                        <button type="button"
                                                class="umb-node-preview-add"
                                                style="max-width: 100%;"
                                                ng-click="vm.openSectionPicker()">
                                            <localize key="general_add">Add</localize>
                                        </button>
                                    </umb-control-group>

                                    <umb-control-group style="margin-bottom: 20px;" label="@user_startnode" description="@user_startnodehelp">
                                        <umb-node-preview ng-if="vm.userGroup.contentStartNode.id"
                                                          style="max-width: 100%;"
                                                          icon="vm.userGroup.contentStartNode.icon"
                                                          name="vm.userGroup.contentStartNode.name"
                                                          allow-edit="true"
                                                          allow-remove="true"
                                                          on-edit="vm.openContentPicker()"
                                                          on-remove="vm.clearStartNode('content')">
                                        </umb-node-preview>


                                        <button type="button"
                                                ng-if="!vm.userGroup.contentStartNode"
                                                class="umb-node-preview-add"
                                                style="max-width: 100%;"
                                                ng-click="vm.openContentPicker()">
                                            <localize key="general_add">Add</localize>
                                        </button>

                                    </umb-control-group>

                                    <umb-control-group label="@user_mediastartnode" description="@user_mediastartnodehelp">

                                        <umb-node-preview ng-if="vm.userGroup.mediaStartNode.id"
                                                          style="max-width: 100%;"
                                                          icon="vm.userGroup.mediaStartNode.icon"
                                                          name="vm.userGroup.mediaStartNode.name"
                                                          allow-edit="true"
                                                          allow-remove="true"
                                                          on-edit="vm.openMediaPicker()"
                                                          on-remove="vm.clearStartNode('media')">
                                        </umb-node-preview>


                                        <button type="button"
                                                ng-if="!vm.userGroup.mediaStartNode"
                                                class="umb-node-preview-add"
                                                style="max-width: 100%;"
                                                ng-click="vm.openMediaPicker()">
                                            <localize key="general_add">Add</localize>
                                        </button>

                                    </umb-control-group>

                                </umb-box-content>
                            </umb-box>

                            <umb-box>
                                <umb-box-header title-key="user_permissionsDefault"></umb-box-header>
                                <umb-box-content class="block-form">
                                    <umb-control-group ng-repeat="(category, permissions) in vm.userGroup.defaultPermissions"
                                                       label="{{ category }}">
                                        <umb-toggle-group items="permissions"></umb-toggle-group>
                                    </umb-control-group>
                                </umb-box-content>
                            </umb-box>

                            <umb-box>
                                <umb-box-header title-key="user_permissionsGranular"></umb-box-header>
                                <umb-box-content class="block-form">
                                    <umb-control-group label="Nodes" description="@user_permissionsGranularHelp">

                                        <umb-node-preview ng-repeat="node in vm.userGroup.assignedPermissions"
                                                          style="max-width: 100%;"
                                                          icon="node.icon"
                                                          name="node.name"
                                                          permissions="node.allowedPermissions"
                                                          allow-remove="true"
                                                          on-remove="vm.removeAssignedPermissions($index)"
                                                          allow-edit="true"
                                                          on-edit="vm.setPermissionsForNode(node)">
                                        </umb-node-preview>

                                        <button type="button"
                                                class="umb-node-preview-add"
                                                style="max-width: 100%;"
                                                ng-click="vm.openGranularPermissionsPicker()">
                                            <localize key="general_add">Add</localize>
                                        </button>
                                    </umb-control-group>

                                </umb-box-content>
                            </umb-box>

                        </div>

                        <div class="umb-package-details__sidebar">

                            <umb-box>
                                <umb-box-header title-key="sections_users"></umb-box-header>
                                <umb-box-content>

                                    <umb-user-preview ng-repeat="user in vm.userGroup.users"
                                                      name="user.name"
                                                      avatars="user.avatars"
                                                      allow-remove="true"
                                                      on-remove="vm.removeUser($index)">
                                    </umb-user-preview>

                                    <button type="button"
                                            class="umb-node-preview-add"
                                            ng-click="vm.openUserPicker()">
                                        <localize key="general_add">Add</localize>
                                    </button>

                                </umb-box-content>
                            </umb-box>

                        </div>

                    </div>

                </div>


            </umb-editor-container>

            <umb-editor-footer>

                <umb-editor-footer-content-left>

                    <umb-breadcrumbs ancestors="vm.breadcrumbs"
                                     allow-on-open="true"
                                     on-open="vm.goToPage(ancestor)">
                    </umb-breadcrumbs>

                </umb-editor-footer-content-left>

                <umb-editor-footer-content-right>

                    <umb-button ng-if="model.infiniteMode"
                                type="button"
                                button-style="link"
                                label-key="general_close"
                                shortcut="esc"
                                action="model.close(model)">
                    </umb-button>

                    <umb-button type="button"
                                action="vm.save()"
                                state="vm.page.saveButtonState"
                                button-style="success"
                                shortcut="ctrl+s"
                                label="Save"
                                label-key="{{vm.page.submitButtonLabelKey}}">
                    </umb-button>

                </umb-editor-footer-content-right>

            </umb-editor-footer>

        </umb-editor-view>

    </form>

</div>
