import { getLabelText } from '/components/common/utils.js?v=3.9'
import VueSelect from "/Components/Common/VueSelect.js?v=3.9"
import InputSearch from "/Components/Common/InputSearch.js?v=3.9"
import InputText from "/Components/Common/InputText.js?v=3.9"
import ModalPopUp from '/Components/Common/ModalPopUp.js?v=3.9'
import Pager from "/Components/Common/Pager.js?v=3.9"
import SearchPanel from "/Components/Common/SearchPanelWrapper.js?v=3.9"
import OperationsPanel from "/Components/Common/OperationsPanelWrapper.js?v=3.9"
import NoRecords from "/Components/Common/NoRecords.js?v=3.9"
import Loading from "/Components/Common/Loading.js?v=3.9"

export default {
    props: {
        readOnly: { type: Boolean, required: true },
        isSubReseller: { type: Boolean, required: true },
        isProviderLogin: { type: Boolean, required: true },
        isLoggedInAsReseller: { type: Boolean, required: true },
        isLoggedInAsCustomer: { type: Boolean, required: true },
        showLogonName: { type: Boolean, required: true },
        exchManage: { type: Boolean, required: true },
        lyncManage: { type: Boolean, required: true },
        o365Manage: { type: Boolean, required: true },
        spManage: { type: Boolean, required: true },
        shManage: { type: Boolean, required: true },
        crmManage: { type: Boolean, required: true },
        adManage: { type: Boolean, required: true },
        rdsManage: { type: Boolean, required: true },
        wfManage: { type: Boolean, required: true },
        dcId: { type: Number, required: true },
        hostedOrgId: { type: Number, required: true },
        packageTypeId: { type: Number, required: true },
        serviceHostingId: { type: Number, required: true },
        showADUserEdit: { type: Boolean, required: true },
        showADUserRemove: { type: Boolean, required: true },
        allowAddUser: { type: Boolean, required: true },
        allowGroupAction: { type: Boolean, required: true },
        allowToExportUser: { type: Boolean, required: true },
        allowToExportLockedUser: { type: Boolean, required: true },
        sendEmailOptionChecked: { type: Boolean, required: true },
        isEgyptBenyaTechPlatform: { type: Boolean, required: true }
    },
    components: {
        VueSelect,
        InputSearch,
        InputText,
        Pager,
        SearchPanel,
        OperationsPanel,
        NoRecords,
        ModalPopUp,
        Loading
    },
    data() {
        return {
            isLoading: true,
            searchContainerDivClass: "col-md-3 col-sm-6 col-xs-12",
            records: [],
            owners: {},
            domains: {},
            services: {},
            countries: {},
            logonHours: {},
            selectedLogonHours: '',
            userTypes: {},
            search: {
                hOrgId: this.hostedOrgId,
                selectedOwner: '',
                selectedDomain: '0',
                selectedService: '0',
                selectedCountry: '0',
                selectedUserType: '-1',
                orgName: '',
                displayName: '',
                upnEmail: '',
                customerId: '',
                customerName: '',
                customerCompanyName: '',
                domainName: '',
                samAccountName: '',
                address: '',
                city: '',
                state: '',
                zip: '',
                phone: '',
                jobTitle: '',
                company: '',
                department: '',
                office: '',
                selectedStatus: '0',
                selectedLockStatus: '-1',
                packageTypeId: this.packageTypeId,
                isADSyncEnabled: false,

                pageIndex: 1,
                pageSize: gridPageSize,
                sortExp: 'DisplayName',
                sortDir: 'Asc',
            },
            showClearButton: false,

            isManageOrg: false,
            isOrgId: false,
            displayName: '',
            passPolicy: '',
            passMinLength: 0,
            logonHoursId: "-1",

            password: '',
            confirmPassword: '',
            sendEmail: this.sendEmailOptionChecked,
            emailAddress: '',

            //***** START: Modal Popup *******
            showPassModal: false,
            modalTitle: '',
            parentContext: {},  //params to execute callback method related to current operation
            //***** END: Modal Popup *******
        }
    },
    methods: {
        inputSearchChangeHandler: function (obj) {
            this.search[obj.fieldName] = obj.searchValue;
            this.showClearButton = obj.submit;

            if (obj.submit == true)
                this.doSearch();
        },
        sortBy: function (exp) {
            if (this.search.sortExpression != exp) {
                this.search.sortExpression = exp;
                this.search.sortDir = "Asc";
            }
            else
                this.search.sortDir = this.search.sortDir == "Asc" ? "Desc" : "Asc";

            this.doSearch();
        },
        ownerChangeHandler: async function (obj) {

            this.search.selectedOwner = obj.selectedValue;
            setOwnerCookie(obj.selectedValue);
        },
        domainChangeHandler: function (obj) {
            this.search.selectedDomain = obj.selectedValue;
        },
        userTypeChangeHandler: function (obj) {
            this.search.selectedUserType = obj.selectedValue;
        },
        serviceChangeHandler: function (obj) {
            this.search.selectedService = obj.selectedValue;
        },
        countryChangeHandler: function (obj) {
            this.search.selectedCountry = obj.selectedValue;
        },
        clearPopUpControls: function () {
            this.templateId = '0';
        },
        mpModelEventHandler: function (obj) {
            this.clearPopUpControls();
            this.showPassModal = false;
        },
        showPasswordChangePopUp: function (adUserId, customerId, companyId, userName, displayName, hostedOrgId) {

            let postRequest = { ...fetchPost };
            let params = {

                CompanyId: companyId,
                HostedOrgId: hostedOrgId,
                AdUserId: adUserId

            };

            postRequest.body = JSON.stringify(params);

            fetch("/PCC/DC/ListADUsers.aspx/GetPasswordPolicyAndLength", postRequest)
                .then(response => response.json()).then((data) => {
                    //alert(data.d)
                    var resp = JSON.parse(data.d);
                    this.passPolicy = resp.PasswordPolicy;
                    this.passMinLength = resp.PasswordLength;
                    // displaySuccessMsg(data.d);

                }).catch(function (e) {
                    displayErrorMsg(e);
                });

            this.showPassModal = true;
            this.displayName = displayName;
            //this.passPolicy = passwordPolicy;
            //this.passMinLength = passwordLength;
            this.password = '';
            this.confirmPassword = '';
            this.sendEmail = this.sendEmailOptionChecked;
            this.emailAddress = '';

            this.parentContext = { ADUserId: adUserId, CustomerId: customerId, CompanyId: companyId, UserName: userName, DisplayName: displayName };

        },
        generatePassword: function () {
            GeneratePasswords('txtPWD', 'txtCPWD', this.passMinLength);
            this.password = document.getElementById('txtPWD').value;
            this.confirmPassword = document.getElementById('txtCPWD').value;
        },
        showPassword: function () {
            _showPassword('txtPWD', 'txtCPWD', 'cbShowPassword');
        },
        changePassword: function (obj) {

            var vm = this;

            if (vm.password != vm.confirmPassword) {

                alert(this.getLabelText('DGN1110005'));
                vm.showPassModal = true;
                $('#' + obj.id).modal('show');
                return;
            }
            else if (vm.password == '') {
                alert(this.getLabelText('EM000001'));
                vm.showPassModal = true;
                $('#' + obj.id).modal('show');
            }
            else {
                let postRequest = { ...fetchPost };
                let params = {
                    "ADUserId": obj.parentContext.ADUserId,
                    "CustomerId": obj.parentContext.CustomerId,
                    "CompanyId": obj.parentContext.CompanyId,
                    "UserName": obj.parentContext.UserName,
                    "DisplayName": obj.parentContext.DisplayName,
                    "Password": vm.password,
                    "SendEmail": vm.sendEmail,
                    "EmailAddress": vm.emailAddress
                }

                postRequest.body = JSON.stringify(params);

                fetch("/PCC/DC/ListADUsers.aspx/ChangePassword", postRequest)
                    .then(response => response.json()).then((data) => {
                        if (data.d == true || data.d == 'true') {
                            //$('#' + obj.id).modal('hide'); 

                            displaySuccessMsg(this.getLabelText('EGN0000011'));
                        }

                    }).catch(function (e) {

                        displayErrorMsg(e);
                    });

                vm.showPassModal = false;
            }

        },
        addUpdateADUser: function (obj) {
            $('.page-loader-wrapper').show();

            var vm = this;
            var url = "/PCC/DC/AddADUser.aspx";

            if (this.hostedOrgId > 0 && this.dcId > 0 && this.packageTypeId > 0)
                url = "/PCC/DC/AddADUser.aspx?DCId=" + this.dcId + "&OrgId=" + this.hostedOrgId + "&SubId=" + this.serviceHostingId + "&PTypeId=" + this.packageTypeId;
            else if (vm.records.length > 0) {
                var sameOrg = true;
                var hOId = vm.records["0"]["HostedOrgId"];
                for (let i = 0; i < vm.records.length; i++) {
                    if (vm.records[i]["HostedOrgId"] != hOId) {
                        sameOrg = false;
                        break;
                    }
                }

                if (sameOrg)
                    url = "/PCC/DC/AddADUser.aspx?OrgId=" + hOId + "&M=1"
            }
            else if (this.hostedOrgId > 0)
                url = "/PCC/DC/AddADUser.aspx?OrgId=" + this.hostedOrgId + "&M=1"

            if (obj != '')
                url += (url.indexOf('?') >= 0 ? "&Tab=" : "?Tab=") + obj;

            window.location.href = url;

        },
        exportToExcel: function () {
            var vm = this;

            let postRequest = { ...fetchPost };
            postRequest.body = JSON.stringify(vm.search);

            fetch("/PCC/DC/ListADUsers.aspx/ExportToExcel", postRequest)
                .then(response => response.json()).then((data) => {
                    if (data && data.d && data.d != '')
                        window.open('/DownloadHandler.ashx', "_blank");

                })
                .catch(function (e) {
                    displayErrorMsg(e);
                });

        },
        confirmActionRemoveAll: function (obj) {

            let selectedRecords = (obj != '' ? this.records.filter(a => a.ADUserId == obj) : this.records.filter(a => a.IsItemSelected));

            if (selectedRecords == null || selectedRecords == undefined || selectedRecords.length <= 0) {
                alert(this.getLabelText('SelectUsers'));
            }
            else {

                this.parentContext = { selectedRecords: selectedRecords, op: "remove" };

                if (confirm(this.getLabelText('USM0168') + ". \n" + this.getLabelText('CBE001').replace("%operand%", "")))
                    this.removeAll(this.parentContext);

            }

        },
        removeAll: function (obj) {

            let postRequest = { ...fetchPost };
            let params = {
                data: {
                    selectedItems: obj.selectedRecords
                },
            };

            postRequest.body = JSON.stringify(params);

            fetch("/PCC/DC/ListADUsers.aspx/RemoveAllUsers", postRequest)
                .then(response => response.json()).then((data) => {

                    this.doSearch();
                    displaySuccessMsg(data.d);

                }).catch(function (e) {

                    displayErrorMsg(e);
                });

        },
        enableAll: function (obj) {

            let selectedRecords = (obj != '' ? this.records.filter(a => a.ADUserId == obj) : this.records.filter(a => a.IsItemSelected));

            if (selectedRecords == null || selectedRecords == undefined || selectedRecords.length <= 0) {
                alert(this.getLabelText('SelectUsers'));
            }
            else {

                let postRequest = { ...fetchPost };
                let params = {
                    data: {
                        selectedItems: selectedRecords,
                    }
                };

                postRequest.body = JSON.stringify(params);

                fetch("/PCC/DC/ListADUsers.aspx/EnableAllUsers", postRequest)
                    .then(response => response.json()).then((data) => {

                        this.doSearch();
                        displaySuccessMsg(data.d);

                    }).catch(function (e) {
                        displayErrorMsg(e);
                    });
            }
        },
        disableAll: function (obj) {

            let selectedRecords = (obj != '' ? this.records.filter(a => a.ADUserId == obj) : this.records.filter(a => a.IsItemSelected));

            if (selectedRecords == null || selectedRecords == undefined || selectedRecords.length <= 0) {
                alert(this.getLabelText('SelectUsers'));
            }
            else {

                let postRequest = { ...fetchPost };
                let params = {
                    data: {
                        selectedItems: selectedRecords,
                    }
                };

                postRequest.body = JSON.stringify(params);

                fetch("/PCC/DC/ListADUsers.aspx/DisableAllUsers", postRequest)
                    .then(response => response.json()).then((data) => {

                        this.doSearch();
                        displaySuccessMsg(data.d);

                    }).catch(function (e) {
                        displayErrorMsg(e);
                    });
            }
        },
        unlockAll: function (obj) {

            let selectedRecords = (obj != '' ? this.records.filter(a => a.ADUserId == obj) : this.records.filter(a => a.IsItemSelected));

            if (selectedRecords == null || selectedRecords == undefined || selectedRecords.length <= 0) {
                alert(this.getLabelText('SelectUsers'));
            }
            else {
                let postRequest = { ...fetchPost };
                let params = {
                    data: {
                        selectedItems: selectedRecords,
                    }
                };

                postRequest.body = JSON.stringify(params);

                fetch("/PCC/DC/ListADUsers.aspx/UnlockAllUsers", postRequest)
                    .then(response => response.json()).then((data) => {

                        this.doSearch();
                        displaySuccessMsg(data.d);

                    }).catch(function (e) {
                        displayErrorMsg(e);
                    });
            }
        },
        exportLockedExpired: function () {
            var vm = this;

            let postRequest = { ...fetchPost };
            postRequest.body = JSON.stringify(vm.search);

            fetch("/PCC/DC/ListADUsers.aspx/ExportLockedExpired", postRequest)
                .then(response => response.json()).then((data) => {
                    if (data && data.d && data.d != '')
                        window.open('/DownloadHandler.ashx', "_blank");

                })
                .catch(function (e) {
                    displayErrorMsg(e);
                });

        },
        loginHoursChangeHandler: function (obj) {
            this.selectedLogonHours = obj.selectedValue;

            let selectedRecords = this.records.filter(a => a.IsItemSelected);

            if (selectedRecords == null || selectedRecords == undefined || selectedRecords.length <= 0) {
                alert(this.getLabelText('SelectUsers'));
            }
            else {

                //this.logonHoursId = obj.selectedValue;

                let postRequest = { ...fetchPost };
                let params = {
                    data: {
                        selectedItems: selectedRecords.map(it => ({ "userLDAP": it.UserLDAP, "adUserId": it.ADUserId, "hostedOrgId": it.HostedOrgId, "UPName": it.UPName })),
                    },
                    logonHoursTemplateId: this.selectedLogonHours,
                };
                //console.log(params);
                postRequest.body = JSON.stringify(params);

                fetch("/PCC/DC/ListADUsers.aspx/SetLogonHours", postRequest)
                    .then(response => response.json()).then((data) => {

                        this.doSearch();
                        displaySuccessMsg(data.d);

                    }).catch(function (e) {
                        displayErrorMsg(e);
                    });
            }
        },
        listOwners: async function () {

            var vm = this;

            await fetch("/webservices/machpanelservice.asmx/GetOwners", fetchGet)
                .then(response => response.json()).then((data) => {

                    vm.owners = JSON.parse(data.d);
                    vm.search.selectedOwner = vm.owners.initialValue;

                })

        },
        listADDomains: async function () {

            var vm = this;

            await fetch("/webservices/machpanelservice.asmx/GetDCs", fetchGet)
                .then(response => response.json()).then((data) => {

                    vm.domains = JSON.parse(data.d);
                    this.search.selectedDomain = this.domains.initialValue;

                });

        },
        listServices: async function () {

            var vm = this;

            await fetch("/webservices/machpanelservice.asmx/FillSubscriptionOptionsForDC", fetchGet)
                .then(response => response.json()).then((data) => {

                    vm.services = JSON.parse(data.d);
                    this.search.selectedService = this.services.initialValue;

                });

        },
        listCountries: async function () {

            var vm = this;

            await fetch("/webservices/machpanelservice.asmx/FillCountries", fetchGet)
                .then(response => response.json()).then((data) => {

                    vm.countries = JSON.parse(data.d);
                    this.search.selectedCountry = this.countries.initialValue;

                });

        },
        listLogonHoursTemplates: async function () {
            var vm = this;

            await fetch("/PCC/DC/ListADUsers.aspx/GetLogonHoursTemplates", fetchGet)
                .then(response => response.json()).then((data) => {

                    vm.logonHours = JSON.parse(data.d);
                    vm.selectedLogonHours = vm.logonHours.initialValue;
                });

        },
        listUserTypes: async function () {
            var vm = this;

            await fetch("/PCC/DC/ListADUsers.aspx/GetuserTypes", fetchGet)
                .then(response => response.json()).then((data) => {

                    vm.userTypes = JSON.parse(data.d);
                    vm.selectedUserType = vm.userTypes.initialValue;
                });

        },
        listADUsers: async function () {

            var vm = this;
            vm.isLoading = true;
            let postRequest = { ...fetchPost };
            postRequest.body = JSON.stringify(vm.search);

            await fetch("/PCC/DC/ListADUsers.aspx/GetADUsersList", postRequest)
                .then(response => response.json()).then((data) => {
                    vm.records = JSON.parse(data.d)

                    vm.records.map(obj => ({ ...obj, IsItemSelected: false }));

                });
            vm.isLoading = false;
        },
        doSearch: function () {
            clearAllMsgs();
            var vm = this;
            this.listADUsers().catch(function (e) {
                vm.records = [];
                vm.totalRecords = 0;
                vm.isLoading = false;
                displayErrorMsg(e);
            });

        },
        doClearSearch: async function () {

            this.search.selectedDomain = this.domains.initialValue;
            this.search.selectedService = this.services.initialValue;
            this.search.hOrgId = this.hostedOrgId;
            this.search.packageTypeId = this.packageTypeId;
            this.search.selectedUserType = this.userTypes.initialValue;
            this.search.orgName = '';
            this.search.domainName = '';
            this.search.displayName = '';
            this.search.upnEmail = '';
            this.search.customerId = '';
            this.search.customerName = '';
            this.search.samAccountName = '';
            this.search.customerCompanyName = '';
            this.search.address = '';
            this.search.city = '';
            this.search.state = '';
            this.search.zip = '';
            this.search.phone = '';
            this.search.jobTitle = '';
            this.search.company = '';
            this.search.department = '';
            this.search.office = '';
            this.search.isADSyncEnabled = false;
            this.search.selectedStatus = '0';
            this.search.selectedLockStatus = '-1';

            this.search.pageIndex = 1;

            this.doSearch();

        },
        getLabelText,
        pagerChangeHandler: function (o) {
            this.search.pageIndex = o.pageIndex;
            this.search.pageSize = o.pageSize;
            this.doSearch();
        },
        checkAll: function (checked) {
            this.records.map(obj => obj.IsItemSelected = checked);
        },
        showActionButton: function () {
            return this.records.find(obj => obj.IsItemSelected);
        },
        checkAllChecked: function () {
            return !this.records.find(obj => !obj.IsItemSelected);
        },
        gobackURL: function () {
            if (this.serviceHostingId > 0) {
                if (this.packageTypeId > 0) {
                    if (this.packageTypeId == 23)
                        window.location.href = "/RCC/Clients/WFH.aspx?SubId=" + this.serviceHostingId + "&TIndex=4";
                    else if (this.packageTypeId == 22)
                        window.location.href = "/RCC/RDS/Manage.aspx?SubId=" + this.serviceHostingId + "&TIndex=3";
                }

                window.location.href = "/RCC/Clients/AD.aspx?SubId=" + this.serviceHostingId + "&TIndex=4";
            }
        }
    },
    created: function () {

        this.isManageOrg = (window.location.href.toLowerCase().indexOf("manageorg") >= 0);
        this.isOrgId = (window.location.href.toLowerCase().indexOf("orgid=") >= 0);

        var vm = this;

        this.listOwners().then(this.listADDomains).then(this.listServices).then(this.listCountries).then(this.listLogonHoursTemplates).then(this.listUserTypes)
            .then(this.listADUsers).catch(function (e) {
                vm.records = [];
                vm.totalRecords = 0;
                vm.isLoading = false;
                displayErrorMsg(e);
            });

    },
    template: ` 
<div class="col-xs-12">
    <div class="card">
        <div class="body">
            <div class="row">

                <div class="col-xs-12" v-if="serviceHostingId > 0">
                    <a @click.prevent="gobackURL()" class="btn btn-primary waves-effect pull-right m-t--4px">{{getLabelText("gobackHosting")}}</a>
                </div>

                <OperationsPanel v-if="allowAddUser || showADUserEdit || showADUserRemove">

                    <button ID="Btn_AddUser" class="btn btn-primary waves-effect btnAction" v-if="!readOnly && !isEgyptBenyaTechPlatform && allowAddUser" @click.prevent="addUpdateADUser('');">{{getLabelText("DEV1101")}}</button>
                    <button ID="Btn_AddBulkUser" class="btn btn-primary waves-effect btnAction" v-if="!readOnly && !isEgyptBenyaTechPlatform && allowAddUser" @click.prevent="addUpdateADUser('2');">{{getLabelText("strAddBulkUsers")}}</button>
                    <button ID="Btn_UpdateBulkUser" class="btn btn-primary waves-effect btnAction" v-if="!readOnly  && !isEgyptBenyaTechPlatform  && showADUserEdit" @click.prevent="addUpdateADUser('3');">{{getLabelText("strUpdateBulkUsers")}}</button>
                    <a v-bind:href="'/PCC/DC/ADUserGroupActions.aspx' + (hostedOrgId <= 0 ? '' : '?OrgId=' + hostedOrgId)" class="btn btn-primary waves-effect btnAction" v-if="!readOnly && allowGroupAction && !isEgyptBenyaTechPlatform">{{getLabelText("String7772")}}</a>
                    <button ID="Btn_ExportUserToExcel" class="btn btn-primary waves-effect" v-if="allowToExportUser" @click.prevent="exportToExcel();">{{getLabelText("Ex001")}}</button>
                    <button ID="Btn_RemoveAll" class="btn btn-primary waves-effect btnAction" v-if="!readOnly && showADUserRemove" @click.prevent="confirmActionRemoveAll('')" v-show="showActionButton()">{{getLabelText("GN0000278")}}</button>
                    <button ID="Btn_Enable" class="btn btn-primary waves-effect btnAction" @click.prevent="enableAll('');" v-if="!readOnly && showADUserEdit" v-show="showActionButton()">{{getLabelText("GN00001024")}}</button>
                    <button ID="Btn_Disable" class="btn btn-primary waves-effect btnAction" @click.prevent="disableAll('');" v-if="!readOnly && showADUserEdit" v-show="showActionButton()">{{getLabelText("GN00001025")}}</button>
                    <button ID="Btn_Unlock" class="btn btn-primary waves-effect btnAction" @click.prevent="unlockAll('');" v-if="!readOnly && showADUserEdit" v-show="showActionButton()">{{getLabelText("GN0000630")}}</button>
                    <button ID="Btn_ExportLockedExpiredUsers" v-if="isManageOrg && allowToExportLockedUser" Class="btn btn-primary waves-effect" @click.prevent="exportLockedExpired();">{{getLabelText("ExportLockedExpiredUsers")}}</button>

                    <div class="row" v-if="logonHours.show">
                        <div class="col-sm-3 col-xs-12 p-l-0" v-if="showADUserEdit" v-show="showActionButton()">
                            <VueSelect :id="'selectedLogonHours'" :options="logonHours.items" class="col-sm-3 col-xs-12" :selectedValue="selectedLogonHours" @selectchange="loginHoursChangeHandler" />
                        </div>
                    </div>

                </OperationsPanel>

                <SearchPanel :id="'adusers-list'" :showClearButton="showClearButton" @onSearch="doSearch" @onClear="doClearSearch">

                    <div :class="searchContainerDivClass" v-if="owners.show && hostedOrgId <= 0">
                        <div class="form-group form-float">
                            <VueSelect :options="owners.items" :selectedValue="this.search.selectedOwner" @selectchange="ownerChangeHandler" />
                        </div>
                    </div>

                    <div :class="searchContainerDivClass" v-if="domains.show && isProviderLogin && hostedOrgId <= 0">
                        <div class="form-group form-float">
                            <VueSelect :id="'selectedDomain'" :options="domains.items" :selectedValue="this.search.selectedDomain" @selectchange="domainChangeHandler" />
                        </div>
                    </div>

                    <div :class="searchContainerDivClass" v-if="services.show">
                        <div class="form-group form-float">
                            <VueSelect :id="'selectedService'" :options="services.items" :selectedValue="this.search.selectedService" @selectchange="serviceChangeHandler" />
                        </div>
                    </div>

                    <div :class="searchContainerDivClass" v-if="countries.show">
                        <div class="form-group form-float">
                            <VueSelect :id="'selectedCountry'" :options="countries.items" :selectedValue="this.search.selectedCountry" @selectchange="countryChangeHandler" />
                        </div>
                    </div>

                    <InputSearch :searchValue="search.orgName" fieldName="orgName" :fieldLabel="getLabelText('DGN1110608')" v-if="hostedOrgId <= 0" :containerDivClass="searchContainerDivClass" @inputSearchChange="inputSearchChangeHandler" />
                    <InputSearch :searchValue="search.displayName" fieldName="displayName" :fieldLabel="getLabelText('GN00001113')" :containerDivClass="searchContainerDivClass" @inputSearchChange="inputSearchChangeHandler" />
                    <InputSearch :searchValue="search.upnEmail" fieldName="upnEmail" :fieldLabel="getLabelText('UPNorEmail')" :containerDivClass="searchContainerDivClass" @inputSearchChange="inputSearchChangeHandler" />
                    <InputSearch :searchValue="search.customerId" fieldName="customerId" fieldDataType="Number" v-if="!isLoggedInAsCustomer && hostedOrgId <= 0" :fieldLabel="getLabelText('GN0000715')" :containerDivClass="searchContainerDivClass" @inputSearchChange="inputSearchChangeHandler" />
                    <InputSearch :searchValue="search.customerName" fieldName="customerName" :fieldLabel="getLabelText('GN0000268')" v-if="!isLoggedInAsCustomer && hostedOrgId <= 0" :containerDivClass="searchContainerDivClass" @inputSearchChange="inputSearchChangeHandler" />
                    <InputSearch :searchValue="search.customerCompanyName" fieldName="customerCompanyName" :fieldLabel="getLabelText('GN00001077')" v-if="!isLoggedInAsCustomer && hostedOrgId <= 0" :containerDivClass="searchContainerDivClass" @inputSearchChange="inputSearchChangeHandler" />
                    <InputSearch :searchValue="search.domainName" fieldName="domainName" :fieldLabel="getLabelText('GN000125')" v-if="hostedOrgId <= 0" :containerDivClass="searchContainerDivClass" @inputSearchChange="inputSearchChangeHandler" />
                    <InputSearch :searchValue="search.samAccountName" fieldName="samAccountName" :fieldLabel="getLabelText('strSAMAccountName')" v-if="showLogonName" :containerDivClass="searchContainerDivClass" @inputSearchChange="inputSearchChangeHandler" />
                    <InputSearch :searchValue="search.address" fieldName="address" :fieldLabel="getLabelText('strAddress')" :containerDivClass="searchContainerDivClass" @inputSearchChange="inputSearchChangeHandler" />
                    <InputSearch :searchValue="search.city" fieldName="city" :fieldLabel="getLabelText('GN0000880')" :containerDivClass="searchContainerDivClass" @inputSearchChange="inputSearchChangeHandler" />
                    <InputSearch :searchValue="search.state" fieldName="state" :fieldLabel="getLabelText('DEV1130')" :containerDivClass="searchContainerDivClass" @inputSearchChange="inputSearchChangeHandler" />
                    <InputSearch :searchValue="search.zip" fieldName="zip" :fieldLabel="getLabelText('GN00001081')" :containerDivClass="searchContainerDivClass" @inputSearchChange="inputSearchChangeHandler" />
                    <InputSearch :searchValue="search.phone" fieldName="phone" :fieldLabel="getLabelText('GN00012')" :containerDivClass="searchContainerDivClass" @inputSearchChange="inputSearchChangeHandler" />
                    <InputSearch :searchValue="search.jobTitle" fieldName="jobTitle" :fieldLabel="getLabelText('DGN1110358')" :containerDivClass="searchContainerDivClass" @inputSearchChange="inputSearchChangeHandler" />
                    <InputSearch :searchValue="search.company" fieldName="company" :fieldLabel="getLabelText('GN00001134')" :containerDivClass="searchContainerDivClass" @inputSearchChange="inputSearchChangeHandler" />
                    <InputSearch :searchValue="search.department" fieldName="department" :fieldLabel="getLabelText('GN0000374')" :containerDivClass="searchContainerDivClass" @inputSearchChange="inputSearchChangeHandler" />
                    <InputSearch :searchValue="search.office" fieldName="office" :fieldLabel="getLabelText('DGN1110359')" :containerDivClass="searchContainerDivClass" @inputSearchChange="inputSearchChangeHandler" />

                    <div :class="searchContainerDivClass">
                        <div class="form-group form-float">
                            <select id="selectedStatus" v-model="search.selectedStatus" class="vue-select">
                                <option value="0">{{ getLabelText('SelectStatus') }}</option>
                                <option value="1">{{ getLabelText('USM0166') }}</option>
                                <option value="2">{{ getLabelText('USM0165') }}</option>
                                <option value="3">{{ getLabelText('LoginDisabled') }}</option>
                                <option value="4">{{ getLabelText('LoginEnabled') }}</option>
                                <option value="5">{{ getLabelText('M0125') }}</option>
                            </select>
                        </div>
                    </div>

                    <div :class="searchContainerDivClass">
                        <div class="form-group form-float">
                            <select id="selectedLockStatus" v-model="search.selectedLockStatus" class="vue-select">
                                <option value="-1">{{ getLabelText('strSelectLockStatus') }}</option>
                                <option value="1">{{ getLabelText('strLock') }}</option>
                                <option value="0">{{ getLabelText('strUnlock') }}</option>
                            </select>
                        </div>
                    </div>

                    <div :class="searchContainerDivClass" v-if="userTypes.show">
                        <div class="form-group form-float">
                            <VueSelect :id="'selectedUserType'" :options="userTypes.items" :selectedValue="this.search.selectedUserType" @selectchange="userTypeChangeHandler" />
                        </div>
                    </div>

                    <div :class="searchContainerDivClass">
                        <label for="isADSyncEnabled" class="checkbox-inline">
                            <input type="checkbox" id="isADSyncEnabled" v-model="search.isADSyncEnabled" />{{getLabelText('ADSyncEnabledOnly')}}
                        </label>
                    </div>

                     

                </SearchPanel>

                 <div class="col-xs-12" v-if="isLoading">
                            <Loading/>
                        </div>
                    <div class="col-xs-12" v-else>
                    <table class="table table-bordered table-striped table-hover" v-if="records.length >0">
                        <tbody>
                            <tr>
                                <th class="col-xs-1 align-center" v-if="!(readOnly || isSubReseller) && (allowAddUser || showADUserEdit || showADUserRemove)">
                                    <input type="checkbox" id="CheckAll" :checked="checkAllChecked()" @change="checkAll($event.target.checked);" />
                                    <label for="CheckAll"></label>
                                </th>
                                <th class="col-xs-1">{{getLabelText("String385")}}</th>
                                <th class="col-xs-3"><a href="#" @click.prevent="sortBy('DisplayName')">{{getLabelText("strUser")}}</a></th>
                                <th class="col-xs-4">{{getLabelText("DGN1110431")}}</th>
                                <th class="col-xs-1" v-if="hostedOrgId <= 0">{{getLabelText("M0091")}}</th>
                                <th class="col-xs-1">{{getLabelText("GN0000360")}}</th>
                            </tr>
                            <tr v-for="usr in records">
                                <td class="align-center" v-if="!(readOnly || isSubReseller) && (allowAddUser || showADUserEdit || showADUserRemove)">
                                    <input type="checkbox" v-bind:id="'cb_' + usr.ADUserId" v-model="usr.IsItemSelected" />
                                    <label v-bind:for="'cb_' + usr.ADUserId"></label>
                                </td>

                                <td v-if="!usr.Status">{{ getLabelText('M0125') }}</td>
                                <td v-else-if="usr.UserDisabled">{{ getLabelText('GN0000860') }}</td>
                                <td v-else>{{ getLabelText('GN0000222') }}</td>

                                <td v-if="usr.LoginDisable || usr.UserDisabled">{{usr.DisplayName}} [{{usr.UPName}}]</td>
                                <td v-else-if="hostedOrgId > 0 && dcId > 0 && packageType <= 0"><a v-bind:href="'/PCC/DC/EditADUser.aspx?UId=' + usr.ADUserId + '&DCId=' + dcId + '&OrgId=' + hostedOrgId + '&SubId=' + serviceHostingId + '&PTypeId=' + packageTypeId + '&m=ul'">{{usr.DisplayName}} [{{usr.UPName}}]</a></td>
                                <td v-else><a v-bind:href="'/PCC/DC/EditADUser.aspx?UId=' + usr.ADUserId + '&OrgId=' + hostedOrgId + '&m=ul'">{{usr.DisplayName}} [{{usr.UPName}}]</a></td>

                                <td>
                                    <table class="table small">
                                        <tbody>
                                            <tr v-if="showLogonName">
                                                <td class="row-label col-sm-6 col-xs-12">{{getLabelText("String436")}}:</td>
                                                <td class="col-sm-6 col-xs-12"> {{usr.LogonName}}</td>
                                            </tr>
                                            <tr v-if="!isOrgId">
                                                <td class="row-label col-sm-6 col-xs-12">{{getLabelText("DGN1110608")}}:</td>
                                                <td class="col-sm-6 col-xs-12">{{usr.OrganizationName}}</td>
                                            </tr>
                                            <tr v-if="!isOrgId">
                                                <td class="row-label col-sm-6 col-xs-12">{{getLabelText("DGN1110433")}}:</td>
                                                <td class="col-sm-6 col-xs-12">{{usr.ADDomainName}}</td>
                                            </tr>
                                              <tr v-if="userTypes.show">
                                                <td class="row-label col-sm-6 col-xs-12">{{getLabelText("UserType")}}:</td>
                                                <td class="col-sm-6 col-xs-12"> {{usr.AccountType}}</td>
                                            </tr>
                                            <tr v-if="!isOrgId && !isLoggedInAsCustomer">
                                                <td class="row-label col-sm-6 col-xs-12">{{getLabelText("GN0000850")}}:</td>
                                                <td class="col-sm-6 col-xs-12"><a v-bind:href="'/RCC/Clients/ClientDetail.aspx?CID=' + usr.CustomerId"># {{usr.CustDisplayName}}</a></td>
                                            </tr>
                                            <tr>
                                                <td class="row-label col-sm-6 col-xs-12">{{getLabelText("strLogonHoursTemplate")}}:</td>
                                                <td class="col-sm-6 col-xs-12" v-if="usr.LogonHoursTemplate != ''">{{usr.LogonHoursTemplate}}</td>
                                                <td class="col-sm-6 col-xs-12" v-else>N/A</td>
                                            </tr>
                                            <tr>
                                                <td class="row-label col-sm-6 col-xs-12">{{getLabelText("strLocked")}}:</td>
                                                <td class="col-sm-6 col-xs-12" v-if="!usr.Locked">{{getLabelText("GN0000005")}}</td>
                                                <td class="col-sm-6 col-xs-12" v-else>{{getLabelText("GN0000004")}}</td>
                                            </tr>
                                        </tbody>
                                    </table>
                                </td>
                                <td class="align-center" v-if="hostedOrgId <= 0">

                                    <ul class="option-menu" v-if="exchManage && (usr.EXServiceData != '' || usr.MailUserId != '')">
                                        <li class="dropdown">
                                            <a href="javascript:void(0);" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
                                                <span v-if="usr.EXServiceData != ''" ID="Img_ExchangeSubs1" class="icon-exchange mp-icons" data-toggle="tooltip" data-placement="top" title="" data-original-title='{{getLabelText("ExchangeSubscribed")}}' data-html="true"></span>
                                                <span v-else-if="usr.MailUserId" ID="Img_ExchangeSubs2" class="icon-client mp-icons" data-toggle="tooltip" data-placement="top" title="" data-original-title='{{getLabelText("MailUser")}}' data-html="true"></span>
                                            </a>
                                            <ul v-if="usr.EXServiceData != ''" class="dropdown-menu pull-right">
                                                <li v-if="!usr.UserDisabled"><a v-bind:href="'/RCC/Exchange/ExAccountDetail.aspx?oID=' + usr.EXServiceData.split('^')[2] + '&CS=' + usr.EXServiceData.split('^')[1] + '&ad=' + usr.ADUserId">{{ usr.EXServiceData.split('^')[0] }}</a></li>
                                                <li v-else>{{ usr.EXServiceData.split('^')[0] }}</li>
                                            </ul>
                                            <ul v-if="usr.MailUserId != ''" class="dropdown-menu pull-right">
                                                <li v-if="!usr.UserDisabled"><a v-bind:href="'/RCC/Exchange/ExAccountDetail.aspx?oID=' + usr.MailUserId.split('^')[1] + '&MU=' + usr.MailUserId.split('^')[0] + '&ad=' + usr.ADUserId">{{ usr.UPName }}</a></li>
                                                <li v-else>{{ usr.UPName }}</li>
                                            </ul>&nbsp;
                                        </li>
                                    </ul>

                                    <ul class="option-menu" v-if="usr.OCSServiceData != '' && lyncManage">
                                        <li class="dropdown">
                                            <a href="javascript:void(0);" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
                                                <span ID="Img_SubsOCS" class="icon-skype4b mp-icons" data-toggle="tooltip" data-placement="top" title="" data-original-title='{{getLabelText("SFBSubscribed")}}' data-html="true"></span>
                                            </a>
                                            <ul class="dropdown-menu pull-right">
                                                <li><a v-bind:href="'/RCC/OCS/OCSAccountDetail.aspx?oID=' + usr.OCSServiceData.split('^')[1] + '&CS=' + usr.OCSServiceData.split('^')[2] + '&ad=' + usr.ADUserId">{{ usr.OCSServiceData.split('^')[0] }}</a></li>
                                            </ul>&nbsp;
                                        </li>
                                    </ul>

                                    <ul class="option-menu" v-if="usr.CSPServiceData != '' && o365Manage">
                                        <li class="dropdown">
                                            <a href="javascript:void(0);" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
                                                <span ID="Img_O365Subs" class="icon-o365 mp-icons" data-toggle="tooltip" data-placement="top" title="" data-original-title='{{getLabelText("O365TenantActivated")}}' data-html="true"></span>
                                            </a>
                                            <ul class="dropdown-menu pull-right">
                                                <li v-for="sub in usr.CSPServiceData.split(', ')"><a v-if="sub != ''" v-bind:href="'/RCC/O365/TenantDetail.aspx?TId=' + sub.split('^')[1] + '&UID=' + sub.split('^')[2] + '&ad=' + usr.ADUserId">{{ sub.split('^')[0] }}</a></li>
                                            </ul>&nbsp;
                                        </li>
                                    </ul>

                                    <ul class="option-menu" v-if="usr.SPServiceData != '' && spManage">
                                        <li class="dropdown">
                                            <a href="javascript:void(0);" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
                                                <span ID="Img_SharepointSubs" class="icon-sharepoint mp-icons" data-toggle="tooltip" data-placement="top" title="" data-original-title='{{getLabelText("SharePointSubscribed")}}' data-html="true"></span>
                                            </a>
                                            <ul class="dropdown-menu pull-right">
                                                <li v-for="sub in usr.SPServiceData.split(', ')"><a v-if="sub != ''" v-bind:href="'/RCC/SharePoint/SPAccountDetail.aspx?OID=' + sub.split('^')[2] + '&CS=' + sub.split('^')[3] + '&ad=' + usr.ADUserId">{{ sub.split('^')[0] }} - {{ sub.split('^')[1] }}</a></li>
                                            </ul>&nbsp;
                                        </li>
                                    </ul>

                                    <ul class="option-menu" v-if="usr.SHServiceData != '' && shManage">
                                        <li class="dropdown">
                                            <a href="javascript:void(0);" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
                                                <span ID="Img_SHSubs" class="icon-data-center mp-icons" data-toggle="tooltip" data-placement="top" title="" data-original-title='{{getLabelText("DBSubscribed")}}' data-html="true"></span>
                                            </a>
                                            <ul class="dropdown-menu pull-right">
                                                <li v-for="sub in usr.SHServiceData.split(', ')"><a v-if="sub != ''" v-bind:href="'/RCC/Hostmatic/Databases.aspx?DomainId=' + sub.split('^')[0] + '&dbo=3&UId=' + sub.split('^')[1]">{{ sub.split('^')[3] }} - {{ sub.split('^')[2] }}</a></li>
                                            </ul>&nbsp;
                                        </li>
                                    </ul>

                                    <ul class="option-menu" v-if="usr.CRMServiceData != '' && crmManage">
                                        <li class="dropdown">
                                            <a href="javascript:void(0);" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
                                                <span ID="Img_CRMSubs" class="icon-crm mp-icons" data-toggle="tooltip" data-placement="top" title="" data-original-title='{{getLabelText("CRMSubscribed")}}' data-html="true"></span>
                                            </a>
                                            <ul class="dropdown-menu pull-right">
                                                <li v-for="sub in usr.CRMServiceData.split(', ')"><a v-if="sub != ''" v-bind:href="'/RCC/CRM/CRMAccountDetail.aspx?OID=' + sub.split('^')[3] + '&CS=' + sub.split('^')[2] + '&ad=' + usr.ADUserId">{{ sub.split('^')[0] }} - {{ sub.split('^')[1] }}</a></li>
                                            </ul>&nbsp;
                                        </li>
                                    </ul>

                                    <ul class="option-menu" v-if="usr.ADServiceData != '' && adManage">
                                        <li class="dropdown">
                                            <a href="javascript:void(0);" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
                                                <span ID="Img_SubsAD" class="icon-active-directory mp-icons" data-toggle="tooltip" data-placement="top" title="" data-original-title='{{getLabelText("ADActivated")}}' data-html="true"></span>
                                            </a>
                                            <ul class="dropdown-menu pull-right">
                                                <li v-for="sub in usr.ADServiceData.split(', ')"><a v-if="sub != ''" v-bind:href="'/RCC/Clients/AD.aspx?SubId=' + sub.split('^')[0] + '&TIndex=4'">{{ sub.split('^')[0] }} - {{ sub.split('^')[1] }}</a></li>
                                            </ul>&nbsp;
                                        </li>
                                    </ul>

                                    <ul class="option-menu" v-if="usr.WFHServiceData != '' && wfManage">
                                        <li class="dropdown">
                                            <a href="javascript:void(0);" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
                                                <span ID="Img_SubsWFH" class="icon-work-folder mp-icons" data-toggle="tooltip" data-placement="top" title="" data-original-title='{{getLabelText("WFHActivated")}}' data-html="true"></span>
                                            </a>
                                            <ul class="dropdown-menu pull-right">
                                                <li v-for="sub in usr.WFHServiceData.split(', ')"><a v-if="sub != ''" v-bind:href="'/RCC/Clients/WFH.aspx?SubId=' + sub.split('^')[0] + '&TIndex=4'">{{ sub.split('^')[0] }} - {{ sub.split('^')[1] }}</a></li>
                                            </ul>&nbsp;
                                        </li>
                                    </ul>

                                    <ul class="option-menu" v-if="usr.RDSServiceData != '' && rdsManage">
                                        <li class="dropdown">
                                            <a href="javascript:void(0);" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
                                                <span ID="Img_SubsRDS" class="icon-virtual-machine mp-icons" data-toggle="tooltip" data-placement="top" title="" data-original-title='{{getLabelText("strRDSServiceEnabled")}}' data-html="true"></span>
                                            </a>
                                            <ul class="dropdown-menu pull-right">
                                                <li v-for="sub in usr.RDSServiceData.split(', ')"><a v-if="sub != ''" v-bind:href="'/RCC/RDS/Manage.aspx?SubId=' + sub.split('^')[0] + '&TIndex=3'">{{ sub.split('^')[0] }} - {{ sub.split('^')[1] }}</a></li>
                                            </ul>&nbsp;
                                        </li>
                                    </ul>
                                </td>
                                <td class="align-center">
                                    <ul class="option-menu Div_OpsRow">
                                        <li class="dropdown">
                                            <a href="javascript:void(0);" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
                                                <i class="material-icons">menu</i>
                                            </a>
                                            <ul class="dropdown-menu pull-right">

                                               <li v-if="usr.SyncEnabled && !usr.LoginDisable && !usr.UserDisabled && (usr.OnPremisesUserSID == 'null' || usr.OnPremisesUserSID == '') && (usr.Status != '0') && showADUserEdit">
                                                    <a v-if="hostedOrgId > 0 && dcId > 0 && packageType <= 0" v-bind:href="'/PCC/DC/EditADUser.aspx?UId=' + usr.ADUserId + '&DCId=' + dcId + '&OrgId=' + hostedOrgID + '&SubId=' + serviceHostingId + '&PTypeId=' + packageTypeId" class="btnAction waves-effect waves-block">{{ getLabelText('GN0000276') }}</a>
                                                    <a v-else v-bind:href="'/PCC/DC/EditADUser.aspx?UId=' + usr.ADUserId + '&OrgId=' + hostedOrgId" class="btnAction waves-effect waves-block">{{ getLabelText('GN0000276') }}</a>
                                               </li>
                                                <li v-if="!readOnly && !usr.LoginDisable && !usr.UserDisabled && showADUserEdit && usr.LogonName != ''">
                                                    <a target="_blank" v-bind:href="'/PCC/DC/AddADUser.aspx?UId=' + usr.ADUserId" class="btnAction waves-effect waves-block">{{ getLabelText('DGN1110198') }}</a>
                                                </li>
                                                <li v-if="!readOnly && !usr.LoginDisable && !usr.UserDisabled && (!usr.SyncEnabled || (usr.SyncEnabled && (usr.OnPremisesUserSID == 'null' || usr.OnPremisesUserSID == ''))) && usr.LogonName != '' && (usr.Status != '0') && showADUserEdit">
                                                    <a @click.prevent="showPasswordChangePopUp(usr.ADUserId, usr.CustomerId, usr.CompanyId, usr.UPName, usr.DisplayName, usr.HostedOrgId);" class="btnAction waves-effect waves-block">{{ getLabelText('M0087') }}</a>
                                                </li>
                                                <li v-if="!readOnly && !usr.LoginDisable && (!usr.SyncEnabled || (usr.SyncEnabled && (usr.OnPremisesUserSID == 'null' || usr.OnPremisesUserSID == ''))) && usr.LogonName != '' && usr.Status != '0' && showADUserEdit">
                                                    <a @click.prevent="disableAll(usr.ADUserId)" v-if="!usr.UserDisabled && !usr.LoginDisable" class="btnAction waves-effect waves-block">{{ getLabelText('GN00001025') }}</a>
                                                    <a @click.prevent="enableAll(usr.ADUserId)" v-else class="btnAction waves-effect waves-block">{{ getLabelText('GN00001024') }}</a>
                                                </li>
                                                <li v-if="!readOnly && !usr.LoginDisable && !usr.UserDisabled && usr.LogonName != '' && (usr.Status != '0')">
                                                    <a @click.prevent="unlockAll(usr.ADUserId)" class="btnAction waves-effect waves-block">{{ getLabelText('GN0000630') }}</a>
                                                </li>
                                                <li v-if="!readOnly && (usr.Status != '0' || !usr.UserDisabled) && showADUserRemove">
                                                    <a @click.prevent="confirmActionRemoveAll(usr.ADUserId)" class="btnAction waves-effect waves-block">{{ getLabelText('GN0000278') }}</a>
                                                </li>
                                            </ul>
                                        </li>
                                    </ul>
                                </td>
                            </tr>
                            <Pager :totalRecords="this.records[0].MaxID" :pageSize="this.search.pageSize" :currentPage="this.search.pageIndex" @pagerChange="pagerChangeHandler" />
                        </tbody>
                    </table>
                    <NoRecords v-else />
                </div>

                <ModalPopUp v-if="showPassModal" id="changePasswordModal" :parentContext="parentContext" :modalTitle="getLabelText('M0087')"  @onYes="changePassword" @onNo="mpModelEventHandler" :yesButtonText="getLabelText('GN0000858')" :noButtonText="getLabelText('GN0000572')">

                    <div class="row">
                        <div class="col-sm-3 col-xs-12 row-label">
                            {{getLabelText("GN00001113")}}:
                        </div>
                        <div class="col-sm-4 col-xs-12">
                            {{this.displayName}}
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-xs-3 row-label"><label>{{ '* ' + getLabelText('DGN1110554') }}:</label></div>
                        <div class="col-xs-4">                                             
                            <div class="form-group">
                                <div class="form-line">
                                    <input id="txtPWD" type="password" v-model="password" class="form-control" />
                                </div>
                            </div>
                            <input id="cbShowPassword" type="checkbox" @click="showPassword()" />    
                            <label>{{ getLabelText('FAM0049') }}</label>
                        </div>
                        <div class="col-xs-5">
                            <button ID="Btn_Generate" class="btn btn-primary waves-effect" @click.prevent="generatePassword();">{{getLabelText("SMI0195")}}</button>
                            <div v-html="passPolicy"  class="help-text sm"></div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-xs-3 row-label"><label>{{ '* ' + getLabelText('GN0001196') }}:</label></div>
                        <div class="col-xs-4"> 
                            <div class="form-group">
                                <div class="form-line">                                             
                                    <input id="txtCPWD" type="password" v-model="confirmPassword" class="form-control" />
                                </div>
                            </div>
                        </div>                 
                    </div>  
                    <div class="row">
                        <div class="col-xs-3 row-label"><label>{{ '* ' + getLabelText('GN0000752') }}:</label></div>
                        <div class="col-xs-4"> 
                            <div class="form-group">
                                <input type="checkbox" v-model="sendEmail" /> 
                            </div>
                        </div>                 
                    </div>
                    <div class="row" v-if="sendEmail">
                        <div class="col-xs-3 row-label"><label>{{ '* ' + getLabelText('GN0000491') }}:</label></div>
                        <div class="col-xs-4">   
                            <InputText id="txtSendEmail" v-model:fieldValue="emailAddress" />
                        </div>                 
                    </div>
                </ModalPopUp>

            </div>
        </div>
    </div>
</div>
`
}
