<div class="usersManager">
    <div ng-show="!$ctrl.isEditing">
        <div piwik-content-intro>
            <h2
                piwik-enriched-headline
                help-url="https://matomo.org/docs/manage-users/"
                feature-name="Users Management"
            >
                {{:: 'UsersManager_ManageUsers'|translate }}
            </h2>

            <p>
                {{:: 'UsersManager_ManageUsersDesc'|translate }}
            </p>

            <div class="row add-user-container">
                <div class="col s12">
                    <div class="input-field">
                        <a class="btn add-new-user" ng-click="$ctrl.isEditing = true; $ctrl.userBeingEdited = null;">
                            {{:: 'UsersManager_AddUser'|translate }}
                        </a>
                    </div>
                    <div class="input-field" ng-if="$ctrl.currentUserRole !== 'superuser'">
                        <a class="btn add-existing-user" ng-click="$ctrl.showAddExistingUserModal();">
                            {{:: 'UsersManager_AddExistingUser'|translate }}
                        </a>
                    </div>
                </div>
            </div>

            <piwik-paged-users-list
                on-edit-user="$ctrl.onEditUser(user)"
                on-change-user-role="$ctrl.onChangeUserRole(users, role)"
                on-delete-user="$ctrl.onDeleteUser(users)"
                on-search-change="$ctrl.searchParams = params; $ctrl.fetchUsers();"
                initial-site-id="$ctrl.initialSiteId"
                initial-site-name="$ctrl.initialSiteName"
                is-loading-users="$ctrl.isLoadingUsers"
                current-user-role="$ctrl.currentUserRole"
                access-levels="$ctrl.accessLevels"
                filter-access-levels="$ctrl.filterAccessLevels"
                search-params="$ctrl.searchParams"
                users="$ctrl.users"
                total-entries="$ctrl.totalEntries"
            ></piwik-paged-users-list>
        </div>
    </div>

    <!-- TODO: whether a user is being edited should be part of the URL -->
    <div ng-if="$ctrl.isEditing">
        <piwik-user-edit-form
            on-done-editing="$ctrl.onDoneEditing(isUserModified);"
            user="$ctrl.userBeingEdited"
            current-user-role="$ctrl.currentUserRole"
            allow-superuser-edit="$ctrl.isCurrentUserSuperUser"
            access-levels="$ctrl.accessLevels"
            filter-access-levels="$ctrl.filterAccessLevels"
            initial-site-id="$ctrl.initialSiteId"
            initial-site-name="$ctrl.initialSiteName"
        ></piwik-user-edit-form>
    </div>

    <div class="add-existing-user-modal modal">
        <div class="modal-content">
            <h3>{{:: 'UsersManager_AddExistingUser'|translate }}</h3>
            <p>{{:: 'UsersManager_EnterUsernameOrEmail'|translate }}:</p>
            <div
                piwik-field
                name="add-existing-user-email"
                uicontrol="text"
                ng-model="$ctrl.addNewUserLoginEmail"
            >
            </div>
        </div>
        <div class="modal-footer">
            <a href="" class="modal-action modal-close btn" ng-click="$ctrl.addExistingUser()">{{:: 'General_Add'|translate }}</a>
            <a href="" class="modal-action modal-close modal-no" ng-click="$ctrl.addNewUserLoginEmail = null;">{{:: 'General_Cancel'|translate }}</a>
        </div>
    </div>
</div>