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

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 },
        hostedOrgId: { type: Number, required: true },
        packageTypeId: { type: Number, required: true },
        serviceHostingId: { type: Number, required: true },
        showDeleteOption: { type: Boolean, required: true },
        isEgyptBenyaTechPlatform: { type: Boolean, required: true }
    },
    components: {
        VueSelect,
        InputSearch,
        Pager,
        SearchPanel,
        OperationsPanel,
        NoRecords,
        ModalPopUp,
        Loading
    },
    data() {
        return {
            isLoading: true,
            searchContainerDivClass: "col-md-3 col-sm-6 col-xs-12",
            orgs: [],
            owners: {},
            templates: {},
            domains: {},
            subscriptions: {},
            search: {
                selectedOwner: '',
                selectedDomain: '0',
                selectedSubs: '0',
                orgName: '',
                domainName: '',
                customerId: '',
                customerName: '',
                companyName: '',
                hostedOrgId: this.hostedOrgId,
                serviceHostingId: this.serviceHostingId,
                packageTypeId: this.packageTypeId,
                pageIndex: 1,
                pageSize: gridPageSize,
                sortExp: 'OrganizationName',
                sortDir: 'Asc',
            },
            showClearButton: false,
            templateId: '0',
            //***** START: Modal Popup *******
            showModal: 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);
        },
        doSearch: function () {
            clearAllMsgs();
           
            var vm = this;
            this.listADOrganizations().catch(function (e) {
                vm.orgs = [];
                vm.totalRecords = 0;
                vm.isLoading = false;
                displayErrorMsg(e);
            });
        },
        doClearSearch: async function () {
           
            this.search.selectedDomain = this.domains.initialValue;
            this.search.selectedSubs = this.subscriptions.initialValue;
            this.search.orgName = '';
            this.search.domainName = '';
            this.search.customerId = '';
            this.search.customerName = '';
            this.search.companyName = '';
            this.search.hostedOrgId = this.hostedOrgId;
            this.search.serviceHostingId = this.serviceHostingId;
            this.search.packageTypeId = this.packageTypeId;

            this.search.pageIndex = 1;

            this.doSearch();

        },
        domainChangeHandler: function (obj) {
            this.search.selectedDomain = obj.selectedValue;
        },
        subsChangeHandler: function (obj) {
            this.search.selectedSubs = obj.selectedValue;
        },
        listADOrganizations: async function () {

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

            await fetch("/PCC/DC/ListADOrgs.aspx/GetADOrgsList", postRequest)
                .then(response => response.json()).then((data) => {

                    vm.orgs = JSON.parse(data.d)
                    vm.orgs.map(obj => ({ ...obj, IsItemSelected: false }));

                });
            vm.isLoading = false;                  
            //setTimeout(function () {
            AdminBSBThemeChanges();
            $('.subsTD').removeClass('align-center');
            ////$.AdminBSB.dropdownMenu.activate();
            //}, 300);
                
        },
        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;

                })
            
        },
        disableADSyncAll: function () {
            let selectedRecords = this.orgs.filter(a => a.IsItemSelected);

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

                var vm = this;

                let postRequest = { ...fetchPost };

                let params = {
                    data: {
                        selectedItems: selectedRecords.map(it => ({ "organizationName": it.OrganizationName, "hostedOrgID": it.HostedOrgID })),
                    },
                }

                postRequest.body = JSON.stringify(params);

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

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


                    }).catch(function (e) {
                        displayErrorMsg(e);
                    });
            }
        },
        clearPopUpControls: function () {
            this.templateId = '0';
        },
        mpModelEventHandler: function (obj) {
            if (obj.submit == true) {
                if (obj.parentContext.op == "enable") {
                    this.enableADSyncAll(this.parentContext);
                }
            }

            this.clearPopUpControls();
            this.showModal = false;
        },
        confirmActionEnableADSync: function () {
            let selectedRecords = this.orgs.filter(a => a.IsItemSelected);

            if (selectedRecords == null || selectedRecords == undefined || selectedRecords.length <= 0) {
                alert(this.getLabelText('strPleaseSelectOrganization'));
            }
            else {
                this.ListADSyncTemplates();
                this.showModal = true;
                this.parentContext = { selectedRecords: selectedRecords, op: "enable" };
                this.modalTitle = this.getLabelText('Dev453');
            }
        },
        enableADSyncAll: function (obj) {

            var vm = this;

            let postRequest = { ...fetchPost };
            let params = {
                data: {
                    selectedItems: obj.selectedRecords.map(it => ({ "organizationName": it.OrganizationName, "hostedOrgID": it.HostedOrgID })),
                },
                templateId: vm.templateId,
            };

            postRequest.body = JSON.stringify(params);

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

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

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

        },
        confirmActionRemove: function (e) {

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

            if (selectedRecords == null || selectedRecords == undefined || selectedRecords.length <= 0) {
                alert(this.getLabelText('strPleaseSelectOrganization'));
            }
            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) {

            var vm = this;

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

            postRequest.body = JSON.stringify(params);

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

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

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

        },
        syncAll: function () {
            let selectedRecords = this.orgs.filter(a => a.IsItemSelected);

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

                var vm = this;

                let postRequest = { ...fetchPost };
                let params = {
                    data: {
                        selectedItems: selectedRecords.map(it => ({ "organizationName": it.OrganizationName, "hostedOrgID": it.HostedOrgID })),
                    },
                };
                postRequest.body = JSON.stringify(params);

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

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


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

            var url = "";

            let postRequest = { ...fetchPost };
            let params = {
                dcId: this.search.selectedDomain
            };

            postRequest.body = JSON.stringify(params);

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

                    window.location.href = data.d;

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

        },
        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;

                })
                
        },
        listSubscriptions: async function () {

            var vm = this;

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

                    vm.subscriptions = JSON.parse(data.d);
                    this.search.selectedSubs = this.subscriptions.initialValue;

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

            fetch("/PCC/DC/ListADOrgs.aspx/GetADSyncTemplates", fetchGet)
                .then(response => response.json()).then((data) => {

                    vm.templates = JSON.parse(data.d);

                    if (data.d.length == undefined || data.d.length == null || data.d.length <= 2) {
                        this.showModal = false;
                        throw new Error('ADSync template not found. Please add ADSync template first.');
                    }
                    else
                        vm.templateId = this.templates.initialValue;

                })
                .catch(function (e) {
                    displayErrorMsg(e);
                });
        },
        getLabelText,
        pagerChangeHandler: function (o) {
            this.search.pageIndex = o.pageIndex;
            this.search.pageSize = o.pageSize;
            this.doSearch();
        },
        checkAll: function (checked) {
            this.orgs.map(obj => obj.IsItemSelected = checked);
           
        },
        showActionButton: function () {         
            return this.orgs.find(obj => obj.IsItemSelected);
        },
        checkAllChecked: function () {
            return !this.orgs.find(obj => !obj.IsItemSelected);
        }
    },
    created: async function () {
        var vm = this;

        await this.listOwners().then(this.listADDomains).then(this.listSubscriptions).then(this.listADOrganizations).catch(function (e) {
            
            vm.orgs = [];
            vm.totalRecords = 0;
            vm.isLoading = false;
            displayErrorMsg(e);
        });

    },
    computed: {
        isAllowed() {
            return this.isProviderLogin && (this.packageTypeId != 22 && this.packageTypeId != 23);
        }
    },    
    template: ` 
<div class="col-xs-12">
        <div class="card">
            <div class="body">
                <div class="row">

                    <OperationsPanel v-show="isAllowed">
                        <button id="Btn_AddOU" class="btn btn-primary waves-effect btnAction" v-if="!readOnly && !isEgyptBenyaTechPlatform" @click.prevent="newADOrg();">{{getLabelText("String433")}}</button>
                        <button id="btnDisableAll" @click.prevent="disableADSyncAll(false);" class="btn btn-primary waves-effect btnAction" v-if="!readOnly" v-show="showActionButton()">{{ getLabelText('AD123') }}</button>
                        <button id="btnEnableAll" @click.prevent="confirmActionEnableADSync" class="btn btn-primary waves-effect btnAction" v-if="!readOnly" v-show="showActionButton()">{{getLabelText("AD124")}}</button>
                        <button id="btnRemoveAll" @click.prevent="confirmActionRemove" class="btn btn-primary waves-effect btnAction" v-if="!readOnly && showDeleteOption && !isEgyptBenyaTechPlatform" v-show="showActionButton()">{{getLabelText("GN0000278")}}</button>
                        <button id="btnSyncAll" @click.prevent="syncAll();" class="btn btn-primary waves-effect btnAction" v-if="!readOnly" v-show="showActionButton()">{{getLabelText("USM0163")}}</button>
                    </OperationsPanel>

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

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

                        <InputSearch :searchValue="search.orgName" fieldName="orgName" :fieldLabel="getLabelText('DGN1110608')" :containerDivClass="searchContainerDivClass" @inputSearchChange="inputSearchChangeHandler" />
                        <InputSearch :searchValue="search.domainName" fieldName="domainName" :fieldLabel="getLabelText('GN000125')" :containerDivClass="searchContainerDivClass" @inputSearchChange="inputSearchChangeHandler" />
                        <InputSearch :searchValue="search.customerId" fieldName="customerId" v-if="!isLoggedInAsCustomer" :fieldLabel="getLabelText('GN0000715')" :containerDivClass="searchContainerDivClass" @inputSearchChange="inputSearchChangeHandler" />
                        <InputSearch :searchValue="search.customerName" fieldName="customerName" v-if="!isLoggedInAsCustomer" :fieldLabel="getLabelText('GN0000268')" :containerDivClass="searchContainerDivClass" @inputSearchChange="inputSearchChangeHandler" />
                        <InputSearch :searchValue="search.companyName" fieldName="companyName" v-if="!isLoggedInAsCustomer" :fieldLabel="getLabelText('GN00001077')" :containerDivClass="searchContainerDivClass" @inputSearchChange="inputSearchChangeHandler" />

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

                        <div :class="searchContainerDivClass" v-if="subscriptions.show">
                            <div class="form-group form-float">
                                <VueSelect :options="subscriptions.items" :selectedValue="this.search.selectedSubs" @selectchange="subsChangeHandler" />
                            </div>
                        </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="orgs.length > 0">
                            <tbody>
                                <tr>
                                    <th class="col-xs-1 align-center" v-if="!isLoggedInAsCustomer && !(readOnly || isSubReseller) && (packageTypeId != 22 && packageTypeId != 23)">
                                        <input type="checkbox" id="CheckAll" :checked="checkAllChecked()" @change="checkAll($event.target.checked);" />
                                    </th>
                                    <th class="col-xs-5"><a href="#" @click.prevent="sortBy('OrganizationName')">{{getLabelText("DGN1110357")}}</a></th>
                                    <th class="col-xs-5">{{getLabelText("DGN1110431")}}</th>
                                    <th class="col-xs-1 align-center" v-if="!readOnly && (packageTypeId != 22 && packageTypeId != 23)">{{getLabelText("GN0000360")}}</th>
                                </tr>
                                <tr v-for="org in orgs">
                                    <td class="align-center" v-if="!isLoggedInAsCustomer && !(readOnly || isSubReseller) && (packageTypeId != 22 && packageTypeId != 23)">
                                        <input type="checkbox" v-bind:id="org.HostedOrgID" v-model="org.IsItemSelected" />
                                    </td>

                                    <td>
                                        <table class="table small">
                                            <tbody>
                                                <tr>
                                                    <td class="row-label col-sm-5 col-xs-12">{{getLabelText("OrganizationName")}}:</td>
                                                    <td class="col-sm-7 col-xs-12">{{org.OrganizationName}}</td>
                                                </tr>
                                                <tr>
                                                    <td class="row-label col-sm-5 col-xs-12">{{getLabelText("USM0181")}}:</td>
                                                    <td class="col-sm-7 col-xs-12" v-if="org.OrgGUID != ''">{{org.OrgGUID}}</td>
                                                    <td class="col-sm-7 col-xs-12" v-else>{{org.OrganizationInternalName}}</td>
                                                </tr>
                                                <tr v-if="isAllowed">
                                                    <td class="row-label col-sm-5 col-xs-12">{{getLabelText("GN0000636")}}:</td>

                                                    <td v-if="!readOnly && (packageTypeId != 22 && packageTypeId != 23)">
                                                        <a v-bind:href="'/PCC/DC/ManageOrg.aspx?OrgId='+org.HostedOrgID+'&TI=1'">{{org.Users}}</a>
                                                    </td>

                                                    <td v-else class="col-sm-7 col-xs-12"><a v-bind:href="'/PCC/DC/ListADUsers.aspx?DCId='+org.ADDomainId+'&OrgId='+org.HostedOrgID">{{org.Users}}</a></td>
                                                </tr>
                                                <tr v-if="(packageTypeId != 22 && packageTypeId != 23)">
                                                    <td class="row-label col-sm-5 col-xs-12">{{getLabelText("M0091")}}:</td>
                                                    <td class="col-sm-7 col-xs-12 subsTD">
                                                        <ul class="option-menu" v-if="org.ExchangeSubs > 0">
                                                        <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_ExchangeSubs" class="icon-exchange mp-icons" data-toggle="tooltip" data-placement="top" title="" data-original-title="" data-html="true"></span>
                                                            </a>
                                                            <ul class="dropdown-menu pull-right">
                                                                <li><a ID="LB_ExchOrgs" class=" waves-effect waves-block" v-bind:href="'/RCC/Exchange/ExAccountDetail.aspx?oID=' + org.ExchangeSubs" Target="_blank">{{ org.ExchangeSubs }} - {{ org.OrganizationName }}</a></li>
                                                            </ul>&nbsp;
                                                        </li>
                                                        </ul>
                                                        <ul class="option-menu" v-if="org.O365Subs > 0">
                                                        <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="" data-html="true"></span>
                                                            </a>
                                                            <ul class="dropdown-menu pull-right">
                                                                <li><a ID="LB_O365Orgs" class=" waves-effect waves-block" v-bind:href="'/RCC/O365/TenantDetail.aspx?TId=' + org.O365Subs" Target="_blank">{{ org.O365Subs }} - {{ org.OrganizationName }}</a></li>
                                                            </ul>&nbsp;
                                                        </li>
                                                        </ul>
                                                        <ul class="option-menu" v-if="org.SharepointSubs != ''">
                                                        <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="" data-html="true"></span>
                                                            </a>
                                                            <ul class="dropdown-menu pull-right">
                                                                <li v-for="sub in org.SharepointSubs.split(', ')"><a class=" waves-effect waves-block" v-bind:href="'/RCC/SharePoint/SPAccountDetail.aspx?OID=' + sub.split('^')[1]" Target="_blank">{{ sub.split('^')[1] }} - {{ sub.split('^')[0] }}</a></li>
                                                            </ul>&nbsp;
                                                        </li>
                                                        </ul>
                                                        <ul class="option-menu" v-if="org.SHServiceData != ''">
                                                        <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="" data-html="true"></span>
                                                            </a>
                                                            <ul class="dropdown-menu pull-right">
                                                                <li v-for="sub in org.SHServiceData.split(', ')"><a class=" waves-effect waves-block" v-bind:href="'/RCC/Hostmatic/Databases.aspx?DomainId=' + sub.split('^')[2] + '&dbo=3&DBId=' + sub.split('^')[3]" Target="_blank">{{ sub.split('^')[0] }} - {{ sub.split('^')[1] }}</a></li>
                                                            </ul>&nbsp;
                                                        </li>
                                                        </ul>
                                                        <ul class="option-menu" v-if="org.CRMSubs > 0">
                                                        <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="" data-html="true"></span>
                                                            </a>
                                                            <ul class="dropdown-menu pull-right">
                                                                <li><a ID="LB_CRMOrgs" class=" waves-effect waves-block" v-bind:href="'/RCC/CRM/CRMAccountDetail.aspx?OID=' + org.CRMSubs" Target="_blank">{{ org.CRMSubs }} - {{ org.OrganizationName }}</a></li>
                                                            </ul>&nbsp;
                                                        </li>
                                                        </ul>
                                                        <ul class="option-menu" v-if="org.OCSSubs > 0">
                                                        <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_OCSSubs" class="icon-skype4b mp-icons" data-toggle="tooltip" data-placement="top" title="" data-original-title="" data-html="true"></span>
                                                            </a>
                                                            <ul class="dropdown-menu pull-right">
                                                                <li><a ID="LB_OCSOrgs" class=" waves-effect waves-block" v-bind:href="'/RCC/OCS/OCSAccountDetail.aspx?oID=' + org.OCSSubs" Target="_blank">{{ org.OCSSubs }} - {{ org.OrganizationName }}</a></li>
                                                            </ul>&nbsp;
                                                        </li>
                                                        </ul>
                                                        <ul class="option-menu" v-if="org.ADSubs > 0">
                                                        <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_ADSubs" class="icon-active-directory mp-icons" data-toggle="tooltip" data-placement="top" title="" data-original-title="" data-html="true"></span>
                                                            </a>
                                                            <ul class="dropdown-menu pull-right">
                                                                <li><a ID="LB_ADOrgs" class=" waves-effect waves-block" v-bind:href="'/RCC/Clients/AD.aspx?SubId=' + org.ADSubs + '&TIndex=4'" Target="_blank">{{ org.ADSubs }} - {{ org.OrganizationName }}</a></li>
                                                            </ul>&nbsp;
                                                        </li>
                                                        </ul>
                                                        <ul class="option-menu" v-if="org.WFHSubs > 0">
                                                        <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_WFHSubs" class="icon-work-folder mp-icons" data-toggle="tooltip" data-placement="top" title="" data-original-title="" data-html="true"></span>
                                                            </a>
                                                            <ul class="dropdown-menu pull-right">
                                                                <li><a ID="LB_WFHOrgs" class=" waves-effect waves-block" v-bind:href="'/RCC/Clients/WFH.aspx?SubId=' + org.WFHSubs + '&TIndex=4'" Target="_blank">{{ org.WFHSubs }} - {{ org.OrganizationName }}</a></li>
                                                            </ul>&nbsp;
                                                        </li>
                                                        </ul>
                                                        <ul class="option-menu" v-if="org.RDSSubs > 0">
                                                        <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_RDSSubs" class="icon-virtual-machine mp-icons" data-toggle="tooltip" data-placement="top" title="" data-original-title="" data-html="true"></span>
                                                            </a>
                                                            <ul class="dropdown-menu pull-right">
                                                                <li><a ID="LB_RDSOrgs" class=" waves-effect waves-block" v-bind:href="'/RCC/RDS/Manage.aspx?SubId=' + org.RDSSubs + '&TIndex=3'" Target="_blank">{{ org.RDSSubs }} - {{ org.OrganizationName }}</a></li>
                                                            </ul>&nbsp;
                                                        </li>
                                                        </ul>
                                                    </td>
                                                </tr>
                                            </tbody>
                                        </table>
                                    </td>
                                    <td>
                                        <table class="table small">
                                            <tbody>
                                                <tr v-if="isProviderLogin">
                                                    <td class="row-label col-sm-5 col-xs-12">{{getLabelText("DGN1110433")}}:</td>
                                                    <td class="col-sm-7 col-xs-12">{{org.ADDomainName}}</td>
                                                </tr>
                                                <tr>
                                                    <td class="row-label col-sm-5 col-xs-12">{{getLabelText("AD125")}}:</td>
                                                    <td class="col-sm-7 col-xs-12" v-if="org.SyncEnabled">{{getLabelText("GN0000004")}}</td>
                                                    <td class="col-sm-7 col-xs-12" v-else>{{getLabelText("GN0000005")}}</td>
                                                </tr>
                                                <tr v-if="org.SyncEnabled">
                                                    <td class="row-label col-sm-5 col-xs-12">{{getLabelText("strADSyncTemplate")}}:</td>
                                                    <td class="col-sm-7 col-xs-12">{{org.AdSyncTemplate}}</td>
                                                </tr>
                                                <tr>
                                                    <td class="row-label col-sm-5 col-xs-12">{{getLabelText("M0091")}}:</td>
                                                    <td class="col-sm-7 col-xs-12" v-if="org.ExchangeSubs > 0 || org.O365Subs > 0 || org.SharepointSubs != '' || org.CRMSubs != '' || org.OCSSubs > 0 || org.ADSubs > 0 || org.WFHSubs > 0 || org.RDSSubs > 0">{{getLabelText("GN0000004")}}</td>
                                                    <td class="col-sm-7 col-xs-12" v-else>{{getLabelText("GN0000005")}}</td>
                                                </tr>
                                                <tr v-if="!isLoggedInAsCustomer">
                                                    <td class="row-label col-sm-5 col-xs-12">{{getLabelText("GN0000850")}}:</td>
                                                    <td class="col-sm-7 col-xs-12"><a v-bind:href="'/RCC/Clients/ClientDetail.aspx?CID='+org.CustomerID">#{{org.CustomerID}} - {{org.FirstName}} {{org.LastName}}</a></td>
                                                </tr>
                                            </tbody>
                                        </table>
                                    </td>

                                    <td v-if="!readOnly && (packageTypeId != 22 && packageTypeId != 23)">
                                        <a v-bind:href="'/PCC/DC/ManageOrg.aspx?OrgId=' + org.HostedOrgID" class="btn btn-primary waves-effect">{{ getLabelText('L0086') }}</a>
                                    </td>
                                </tr>
                                <Pager :totalRecords="this.orgs[0].RecordCounter" :pageSize="this.search.pageSize" :currentPage="this.search.pageIndex" @pagerChange="pagerChangeHandler" />
                            </tbody>
                        </table>
                        <NoRecords v-else />
                    </div>

                    <ModalPopUp v-if="showModal" :parentContext="parentContext" :modalTitle="modalTitle" @onYes="mpModelEventHandler" @onNo="mpModelEventHandler"
                                :yesButtonText="getLabelText('GN0000858')" :noButtonText="getLabelText('GN0000572')">

                        <div class="row">
                            <div class="col-md-4 col-sm-6 col-xs-12" v-for="itm in templates.items">
                                <label>
                                    <input type="radio" name="AdSyncTemplates" v-model="templateId" :value="itm.value" v-bind:id="'rb_' + itm.value" />{{itm.text}}
                                </label>
                            </div>
                        </div>

                    </ModalPopUp>

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